IOS 学习笔记 页面导航:标签导航

笔记对应代码实现的原工程github地址，里面有所有的资源，可以下载下来对照练习，工程地址为：https://github.com/cmyeyi/TabNavigationSimple

 

目录

1 标签导航

1.1 概述

1.2 创建Tabbed Application

1.2.1 xcode模版直接创建Tabbed App

1.2.2 修改模版增加Tab

1.2.3 添加标签的icon和文字

1.2.4 给每个场景添加对应的ViewController类

1.2.5 类源码

1.2.6 运行效果

1.3 代码实现

1.3.1 修改AppDelegate添加ViewControllers

1.3.2  添加TAB的iocn和文字

1.3.3  源码下载

---

 

1 标签导航

1.1 概述

标签导航几乎是ios应用开发中用到的最多的一种导航模式，与android中的Tab一样，标签栏在底部，将应用按照功能划分为多个功能模块，彼此之间独立，通过tab来切换各个功能模块，如下图：

 

 

 

1.2 创建Tabbed Application

 

1.2.1 xcode模版直接创建Tabbed App

在创建工程的时候xcode是提供了Tabbed App的模版的，如下图：

创建完毕工程后默认是故事板，打开会看到三个Scene（场景）通过线条连接在一起，这些线就是Segue（过渡），最右边有一个箭头指向Tab Bar Controller，表示它是首页第一个视图控制器，也是第一个场景，第一个和用户交互的页面，两条连线将Tab Bar Controller和First View和Second View连接，这是两个过渡，

运行结果如下：

 

1.2.2 修改模版增加Tab

上面的模版已经给我们默认添加了2个tab，一般来说我们的应用至少有4个tab，现在我们有新需求，增加两个tab，共4组，[首页、风景、妹子、帅哥]

步骤：

1）从对象库中拖两个View Controller到设计界面中

2）按住control键，按住Tab Bar Controller拖拽到新添加的View Controller上，弹出对话框

3）选中弹出对话框中的view controllers

4）修改界面布局文字

gif步骤图如下：

最后如下图效果：

运行到手机上的效果如下：