文档章节

iOS(新手向)--UITabBarController完全自定义

c
 chaoGod
发布于 2015/02/27 16:39
字数 798
阅读 21
收藏 0

UITabBarController是用来管理视图控制器的, 如UINavigationController, UIViewController,导航控制器不同,Tab控制器是用数组管理子视图控制器,并且子视图之间是平等关系。 

在大部分的iOS应用中都有这样的一个用户界面:

这是iphone6模拟器中自带的图片浏览应用,它就是一个UITabBarController,点击底部的tabbar可以切换到不同的界面。

上图中的tabbar都是系统自带的,系统自带的tabbar的使用这里就不再赘述。

我们的目的是将底部的tabbar换成自己的图片,并且同样可以实现界面的切换。

最终的效果如下:


上图中的图片和文字是在一个图中的,并不是添加的文字。

首先, 创建工程并创建需要用到的类,这里用到5个uiviewcontroller



在AppDelegate中将uitabbarcontroller作为根视图;

在TabBarController中初始化属性;

创建5个视图:

- (void)_initViewControllers
{
    OneViewController *oneCol = [[OneViewController alloc] init];
    TwoViewController *twoCol = [[TwoViewController alloc] init];
    ThreeViewController *threeCol = [[ThreeViewController alloc] init];
    FourViewController *fourCol = [[FourViewController alloc] init];
    
    FiveViewController *fiveCol = [[FiveViewController alloc] init];
    
    // 需要将控制器保存到数组中,才能交给tabBar控制器管理
    NSArray *colArray = @[oneCol, twoCol, threeCol, fourCol, fiveCol];
    NSMutableArray *navColArray = [[NSMutableArray alloc] init];
    
    for (int i = 0; i < 5; i++) {
        
        NavigationController *navCol = [[NavigationController alloc] initWithRootViewController:colArray[i]];
        [navColArray addObject:navCol];
    }
    
    // 把五个导航控制器交给tabBar控制器去管理
    self.viewControllers = navColArray;
}

添加图片:

- (void)_initTabBarItems
{
    // 设置tabBar的背景
    [self.tabBar setBackgroundImage:[UIImage imageNamed:@"navbg"]];
       //[self.tabBar setBackgroundColor:[UIColor greenColor]];
    
    CGFloat itemWidth = [UIScreen mainScreen].bounds.size.width / 5;
    // 获取tabBar的高度
    CGFloat itemHeight = CGRectGetHeight(self.tabBar.frame);
    
    // 添加选中滑块 UIImageView
    _selectView = [[UIImageView alloc] initWithFrame:CGRectMake((itemWidth - 50) / 2, 3, 50,45)];
    _selectView.image = [UIImage imageNamed:@"选中"];
    [self.tabBar addSubview:_selectView];
    
    //添加图标
    for (int i = 0; i < 5; i++) {
        
        UIButton *itemButton = [UIButton buttonWithType:UIButtonTypeCustom];
        itemButton.frame = CGRectMake(i * itemWidth, 0, itemWidth, itemHeight);
        itemButton.tag = i + 10;
        NSString *imageName = [NSString stringWithFormat:@"%d.png",i + 1];
        [itemButton setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
        [itemButton addTarget:self action:@selector(itemAction:) forControlEvents:UIControlEventTouchUpInside];
        
        [self.tabBar addSubview:itemButton];
    }
}

- (void)itemAction:(UIButton *)button
{
    // 指定当前选中的控制器的位置 selectedIndex
    self.selectedIndex = button.tag - 10;
    
    [UIView animateWithDuration:0.3 animations:^{
        _selectView.center = button.center;
  
    }];
    
}

接下来就是将创建uitabbarcontroller时系统自带的tabbar移除。创建了5个,就有5个tabbar。

这几个tabbar时看不到的,但确实存在。如果不添加图片,在相应位置点击,同样可以跳转。

可以将添加图片那步注释,运行,尝试一下。


可以通过一下代码获得相关信息:

- (void)removeItems
{
    NSArray *subViews = self.tabBar.subviews;
 
    for (UIView *view in subViews) {       
 
        NSLog(@"view = %@",view);
    }
}

控制台会输出这样的信息:

2015-02-27 16:18:17.401 UITabBarController[3099:441686] view = <UITabBarButton: 0x7fcbd0e7bc10; frame = (2 1; 71 48); opaque = NO; layer = <CALayer: 0x7fcbd0e7c050>>

可以看到UITabBarButton就是tabbar所属的类;

将它移除

- (void)removeItems
{
    NSArray *subViews = self.tabBar.subviews;
    // NSClassFromString 将字符串转化为对象类型Class,因为自带的item为 UITabBarButton 类型没有公开不能直接拿到,所以需要转换
    Class tabButtonclass = NSClassFromString(@"UITabBarButton");
    
    // 指定移除 UITabBarButton 视图,其他的视图不移除
    for (UIView *view in subViews) {
        
        if ([view isKindOfClass:[tabButtonclass class]]) {
            
            [view removeFromSuperview];

        }
    }
}

最后

- (void)viewDidLoad {
    [super viewDidLoad];
    [self _initViewControllers];
    [self _initTabBarItems];
}

移除操作需要在viewDidAppear中调用:否则不能移除

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    [self removeItems];
}

最后运行就能看到效果了;滑块会根据点击的图标滑动


© 著作权归作者所有

共有 人打赏支持
c
粉丝 0
博文 2
码字总数 1364
作品 0
杭州
私信 提问
OSC客户端工具条是UITabBarController吗?

这个工具条是UITabBarController带的,还是几个按钮拼起来的? 点击中间的加号弹出的是模态视图,而不是切换视图效果。 QQ空间客户端也是这个风格,请问是怎么实现的? 我是觉得如果在UITab...

有谁知道光棍的好
2015/05/10
373
2
UITabBarController详解

 广州APP开发,微信开发,广州英趣信息科技开发部博客:当我们想要做一个界面类似 联系人 那样的程序时,就一定会用到 UITabBar,它可以帮我们添加、管理许多的Tab项, 使我们的程序包含不同...

广州英趣科技
2013/09/08
0
2
ArcGIS for iOS 开发系列(1) – 基本概念

1.1 iOS简介 2006年苹果公司发布了智能手机iPhone,卓越的外形设计和新颖的触摸式交互,令其迅速风靡全球,随后发布的平板电脑iPad同样也取得了巨大成功,二者所搭载的都是iOS智能移动操作系...

长平狐
2012/11/28
867
0
iOS开发简记(2):自定义tabbar

tabbar是放在APP底部的控件。常见的APP都使用tabbar来进行功能分类的管理,比如微信、QQ等等。 小程需要一个特殊一点的tabbar,要求突显中间的那个按钮,让中间按钮特别显眼,从而引导用户去...

jonlan
2018/11/17
0
0
WindowPhone开发Panorama和Pivot布局组件文件嵌套问题

最近开始学习WP平台开发,对标题所述布局组件有个疑问。在IOS中,和Pivot类似的UITabbar组件可以使用单独的ViewController页面嵌套(实现模块分离),但在WP中,只能在Pivot的XAML中配置Ite...

xoHome
2014/02/19
112
1

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 没时间 没头发 但有钱

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @开源中国总经办主任 :分享齐一的单曲《这个年纪》 《这个年纪》- 齐一 手机党少年们想听歌,请使劲儿戳(这里) @肿肿卷 :我真的可以睡一天...

小小编辑
22分钟前
8
4
Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
3
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部