Swift小白的第六课-标签栏分页(Tab Bar Controller)

我们今天的任务：将页面分成不同的Tab页面，以此来将我们的业务进行拆分，比如我们将主页(Home)和个人(Me)页面分开

知识点目录：

1. 建立Tab Bar Controller和关系管理

2. 自定义Tab Bar Item 图标和个性化

tab栏在IOS上的效果

上一节课我们讲了Navigation Controller的使用方式，同时提到了Storyboard Enter Point的使用，这节课我们重点目标是完成Tab分页以及Tab图标的自定义等

一、Tab Bar Controller设置和关系建立

1. 从元件库中搜索“Tab Bar Controller",并且将它拖动到故事版

2. Tab Bar Controller会默认带两个有关系的View Controller（我们称Tab Bar的下属页面叫Item）. 我们用不着两个Item，我们就删除其中一个Item，另一个我们我们打算用我们上节课的Navigation Controller作为其中一个item. 

Tab Bar Controller默认带两个Item

3. 我们将将其中一个item删除以后，然后将从Tab Bar Controller鼠标右键拖一个关系线到Navigation Controller上，然后松手，选择“view controllers". 以此来建立Tab Bar Controller与两个Item之间的关系.

将Tab Bar Controller与Navigation Controller建立关系

4. 建立完成关系以后发现，Tab Bar Controller中的两个Item顺序与我们预期的相反，我们希望Navigation Controller作为Tab Bar Controller从左到右的第一个Item. 

 Tab Bar Controller默认按照建立关系的顺序从左到右设置Item，因为我们Navigation Controller比原本的Item2关系建立晚，所以Navigation Controller的Item建立到了Item2的右边. 

此时只需要把Item2的关系删了（选中Relationship "view controllers" to "Item2"），将其删除、然后按照步骤3的方式，重新与Item2建立关系，这样建立完成关系后，我们就发现Navigation Controller的Item出现在左边了

删除Item2的关系

5. 目前Storyboard Enter Point仍然在Navigation Controller上，这样是不对的，因为目前管理Navigation Controller的是Tab Bar Controller了，所以Tab Bar Controller层级应该比Navigation Controller上，因此我们将Storyboard Enter Point移动到Tab Bar Controller上. 

将Storyboard Enter Point移动到Tab Bar Controller上

二、Tab Bar Item自定义和个性化

目标：我们要把Tab Bar 的Item图标和Title换一下， 提前准备好我们要的图标清单：（制作要求和方法可以参考：iOS Tab Bar Icon 尺寸规范和自制合规图标）

标准状态图标（非选中状态）： Home图标（@2x, @3x ) x 2张 ～ 3张 、Me图标（@2x, @3x) x 2张 ～ 3张

选中状态图标（选中状态）： Home图标（@2x, @3x ) x 2张 ～ 3张、Me图标（@2x, @3x) x 2张 ～ 3张

接着上边的Tab Bar Controller关系配置完成以后，我们需要对Item的图标和Title等内容进行个性化的配置，我们这里会接触到非常重要的图片，素材管理工具“Assets.xcassets”.

6. 我们要把Tab Bar 的 Item图标和Title换一下；从项目文件目录，找到“Assets.xcassets“, 我们将在这里管理App里重要的图标等元素.

Assets.xcassets

7. 点击库下方的”+“，选中”New Image Set"，新建Image Set. 

新建Image Set

8. 依次建立下边的Image Set：(名字可以自己取，需要保证不重复）主要是你自己能找到，识别度高的名字为宜：

home和me两个tab bar item的默认状态图标和选中状态的图标各两个. 一共4个Image Set即可; 

把准备好的图标对号入座的拖到Image Set里.

将图标拖动到Image set里

9. 选中要设置Tab Bar Item图标的Item，选择属性编辑器，

            分别设置Seleted Image和Image. (以同样的方法设置Me的那个Item）

            再设置Title：Home 和 Me

设置图标

10. 设置好图标以后，Command + R 看一下效果：

    选中图标的颜色是蓝色的（iOS默认的选中颜色）、未选中状态下的颜色是深灰色（iOS默认未选中状态下的颜色）；我们做的图标颜色没有凸显出来.  --> 步骤11安排解决

运行效果

11. 未选中状态下的深灰色，我们决定保留系统的设定，但是选中状态的颜色我们还是希望改编成我们设计的金色

办法1 ：我们只需要进入Assets.xcassets. 找到两个selected的图标，选中它，找到属性设置里的Render As，然后将渲染属性设置为“Original Image" （ 这种只设置办法，只能改变图标的颜色，title的颜色仍然无法修改）

图片渲染属性设置为Original Image

办法2: 找到Tab Bar Controller上的Tab Bar，将属性：“ImageTint" 设置成金色，这样App将自动将图标和Title都渲染成金色

通过设置Image Tint设置渲染颜色

12. 再次运行程序，看下效果：