文档章节

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

c
 chaoGod
发布于 2015/02/27 16:39
字数 798
阅读 20
收藏 0
点赞 0
评论 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
杭州
UITabBarController详解

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

广州英趣科技
2013/09/08
0
2
IOS学习,最简单的表格应用程序,学习,列出博客

IOS编程浅蓝教程,这是博客地址http://www.cnblogs.com/haichao/category/425378.html IOS编程浅蓝教程:锲子 IOS编程浅蓝教程(一)先决条件:开始iOS编程的必要准备 IOS编程浅蓝教程(二) Hel...

andy521zhu
2015/01/17
0
0
iOS精美过度动画、视频会议、朋友圈、联系人检索、自定义聊天界面等源码

iOS精选源码 iOS 精美过度动画源码(http://www.code4app.com/thread-14827-1-1.html) iOS简易聊天页面以及容联云IM自定义聊天页面的实现思路(http://www.code4app.com/thread-30348-1-1.htm...

sunnyaigd
07/11
0
0
Swift语言从天而降,能否掀起新一轮的科技革命?

Swift语言从天而降,能否掀起新一轮的科技革命? Swift语言诞生到现在,才短短一个月多,Swift竟然挤进TIOBE排行榜的第16位,相信这发展的速度绝不是任何一个语言可与之相提并论,那Swift到底...

sdefzhpk
2014/07/18
0
0
10步成为专业iOS开发者——从零起步

想在移动开发大餐中分一杯羹,体验最火最炫的技术?小伙子,很有眼光嘛 毫无疑问,移动开发在目前和未来几年内都会盛极一时。无数开发职位虚位以待。各大公司都在寻找各种层次的程序员——新...

hejunbinlan
2015/06/18
0
0
Ionic系列——调用系统电话

1、需求描述 在ionic项目用调用手机的打电话功能。开始还想找cordova和ng-cordova的插件那,现在H5实现起来特别方便。 2、准备 在cordova中所有的URL Schemes 都是服从于白名单的,所以要现在...

龙马行空
2015/08/14
0
0
(转)直接拿来用!最火的iOS开源项目(二)

“每一次的改变总意味着新的开始。”这句话用在iOS上可谓是再合适不过的了。GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7,有的项目...

孙启超
2013/06/21
0
1
c++ cout格式化输出函数详解

这篇文章主要讲解如何在C++中使用cout进行高级的格式化输出操作,包括数字的各种计数法(精度)输出,左或右对齐,大小写等等。通过本文,您可以完全脱离scanf/printf,仅使用cout来完成一切...

lieefu
2015/10/30
0
0
【iphone4 iOS4+升级到 iOS 5 beta7详细过程与iOS 5系统截图】-Himi升级iOS 5 beta7 流程

Himi 原创, 转载请注明出处,谢谢! 原文地址:http://blog.csdn.net/xiaominghimi/article/details/6289625 (警告:因为当前iOS 5属于beta版,apple没有正式发布,所以一旦你升级到iOS 5...

迷途d书童
2012/03/19
0
0
React Native SDK for OSS

此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文...

zuozhao
05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mybatis收集配置

一、Mybatis取Clob数据 1、Mapper.xml配置 <resultMap type="com.test.User" id="user"> <result column="id" property="id"/> <result column="json_data" property="jsonData" ......

星痕2018
19分钟前
0
0
centos7设置以多用户模式启动

1、旧版本linux系统修改inittab文件,在新版本执行vi /etc/inittab 会有以下提示 # inittab is no longer used when using systemd. # # ADDING CONFIGURATION HERE WILL HAVE NO EFFECT ON......

haha360
51分钟前
0
0
OSChina 周日乱弹 —— 局长:怕你不爱我

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ andonny :分享周二珂的单曲《孤独她呀》 《孤独她呀》- 周二珂 手机党少年们想听歌,请使劲儿戳(这里) @孤星闵月 :没事干,看一遍红楼梦...

小小编辑
56分钟前
127
8
Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式 Factory工厂模式 Singleton单例模式 Delegate委派模式 Strategy策略模式 Prototype原型模式 Template模板模式 Spring5 beans 接口实例化 代理Bean操作 ...

小致dad
今天
0
0
SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
10
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
17
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
245
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部