UI控件

 

UITabBarController选项卡

选项卡（tab bar）设计极其常见，2015年后再度流行，位于屏幕底部，它把app划分为功能块。

缺点是占有屏幕一小块，不过随着iphone6大屏的普及，这个缺点早已不存在。facebook的iOS版本，已把侧边栏替换成选项卡，其他一应流行app如网易新闻，微信，支付宝和淘宝也都在用选项卡进行导航。

导航条：让用户在层级关系的视图中浏览。（微信>会话聊天>会话）

选项卡：管理关系不明显的视图集合，一般至少2个，最多显示5个。（微信－通讯录－发现－我）

 

1.1创建步骤：

无需任何代码，把一组视图控制器嵌入到选项卡控制器中即可。

打开Main.storyboard选中导航控制器，即屏幕的初始化控制器。

菜单Editor >Embed in >Tab Bar Controller

 

 

1.1.1定制自选项卡属性

点击导航控制器底部选项卡上的灰色块，可调整属性及图标。

 

 

1.1.2选项卡显示时机

我们虽然添加了选项卡，当深入浏览器分页内容时，选项卡仍然显示，显然不是很好。iOS提供了导航栏浏览时（ Push）隐藏选项卡的简单方法。

方法一：选中分页控制器，勾选"Hide Botton Bar on Push"

方法二：在主页转到分页的prepareForSegue方法中加入： xxxVC.hidesBottomBarWhenPushed = true

     

 

1.1.3集成控制器：把新导航控制器（子页）和选项卡控制器连接起来。

step1：按住Ctrl拖动选项卡到新导航控制器，选中菜单项"Relationship Segue - View Controllers"

 

2.1定制选项卡外观：

定制步骤，跟导航栏定制一样，使用Appearance API;

把代码加入到AppDelegate的application(_:didFinishLaunchingWithOptions:)方法中

 

2.1.1几个常见的选项卡属性定制

tintColor(前景色)：

如前景白色：UITabBar.appearance().tintColor = UIColor.whiteColor()

barTintColor(背景色)：

如背景粉红色：UITabBar.appearance().barTintColor = UIColor(red:242/255,green:166/255,blue:119/255,alpha:1)

 

 

backgroundImage(背景图)：UITabBar.appearance().backgroundImage = UIImage(...)

 

2.2.1更改选项选中时的背景图

当一个选项页被选中时，可以指定一个图标的背景图片，设置selectionIndicatorImage属性即可。

UITabBar.appearance().selectionIndicatorImage UIImage(named:String)

 

背景图片为粉红色背景图，选中即背景变为粉红色