IOS开发以及Tab Bar使用讲解

为了更好理解使用用tabbar和切换视图，我们创建一个Empty Application。

　 　1、 打开Xcode ，新建项目

　 　2、 创建View Controller

在项目上按花键+N创建新文件，创建 Objective-C class 文件，按Next按钮，subClass 选UIViewController 。勾选上xib选项

以同样方式创建另外三个ViewController ，RedViewController ，GreyViewController，YellowViewController。四个View准备好了。那么Tabbar呢？

　 　3、 创建TabBarController.xib文件，选择创建Empty文件

这时候你发现创建的xib文件是空白的，不用慌，去右下角控件栏中把TabBar Controller拖过来就Ok了。

4、 关联TabBarController.xib ,tabbarAppDelegate这两个文件

在上图中选择File’s Owner，打开Identity Inspector，在Class一栏选择tabbarAppDelegate

这样，我们就可以创建TabBarController.xib 文件指向tabbarAppDelegate 文件的Outlet映射了。

5、 在Xcode中的工具栏的View菜单找到 打开Assistant Editor，使tabbarAppDelegate.h和TabBarController.xib 同时打开。

在xib文件上按住control键，往tabbarAppDelegate.h，创建Outlet.

d出窗口输入 rootController,点connect。

　 　6、 添加代码

打开tabbarAppDelegate.m，在didFinishLaunchingWithOptions方法中添加代码：

1.- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

2. self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]

3. // Override point for customization after application launch.

4. [[NSBundle mainBundle] loadNibNamed:@"TabBarController" owner:self options:nil]

5. [self.window addSubview:self.rootController.view]

6. self.window.backgroundColor = [UIColor whiteColor]

7. [self.window makeKeyAndVisible]

8. return YES

　 　7、 往TabBarController.xib上添加Tab Bar Item,

把控件栏上的Tab Bar Item控件往TabBarController.xib上拖拽即可，一个放4个。

　 　8 、关联Tab Bar Item和***ViewController。

选择其中一个Tab Bar Item，在右上角打开Identity Inspector，在Class中选择BlueViewController：

然后，打开Attribute，在NIB Name选择BlueViewController：

其他3个tab item重复类似的 *** 作，选中对应的ViewController,这样在切换Tab标签时，就可以切换到对应的页面。

9、 设置tab item的属性

选中其中一个tab item ,会在右上角的属性栏里看到如下信息

Badge是红色圈圈里面有数字 ，表示有多少条信息的属性

Identifier 是tab item的样式，选custom是自定义，下面的是系统的样式。我选了其中四种。

bar ITem 的title image在custom的样式下能设置。

10 、剩下的3个Tab Item也做类似的设置即可。

现在基本完工，运行看看结果如何。好吧，其实和第一第二个图是一样的`，这里就不放了。

11 、在viewDidLoad方法加Log观察切换View

可以加写日志看看对应的View是什么时候运行的。第一个运行的View是BlueViewController，点击其他的tab项时，加载其他的view，加载一次之后下次点击不再调用viewDidLoad。

1.- (void)viewDidLoad

2. [super viewDidLoad]

3. NSLog(@"BlueViewController")

4. // Do any additional setup after loading the view from its nib.

UITabBarController 有个方法是 setSelectedIndex = 1就可以了

你获取到UITabBarController 对象 调用这个方法就可以了

对于设计师来说，阅读ios规范的时候更多的是关注界面层面的内容，对于系统自带的内容关注较少。交互设计师同时要关注ios的交互手势、导航逻辑、控件使用规范等，但是所谓的“用户行为”的承载页面最终是界面，所以充分的了解界面元素是非常必要的。

本文内容来源ios规范，搬用内容、总结知识。

ios界面元素分为：条栏、内容视图、控件、临时视图

一、条栏

1、状态栏 status bar

状态栏用来显示设备的信息、时间、网络等重要信息。默认是白底黑字与黑底白字。

#状态栏是透明背景

#位置总是处于顶部

注意事项：1、状态栏可以在整个app中采用一个样式，也可以单独为某个视图设计样式。2、状态栏背后不要放其他内容，不要有滚动内容，防止干扰用户阅读状态栏信息。3、尽量不要隐藏状态栏，除非特殊情况，例如全屏看视频可以隐藏状态栏，但是保证轻点屏幕时可以重新恢复状态栏。

2、导航栏 navigation bar

导航栏主要作用是在不同的层级的信息结构之间导航，有时候可以管理屏幕内容。

导航栏上面可以放标题或者控件。

3、工具栏 Toolbar

包含了对页面或者视图中对象进行 *** 作的控件。

4、标签栏 tab bar

标签栏赋予了用户在不同任务、视图和模态的切换的能力。

5、搜索栏 search bar

搜索栏可以接受用户输入的文本，并把它作为一次性搜素输入。

二、内容视图

我们可以把视图是用来承载页面信息的一个容器，iOS 系统为我们提供一些比较优秀的视图模式。在视图部分主要列举几种比较常用的视图模式。

1、精选视图 collection view

可以管理项目的有序集合，比如相册。

2、图像视图 image view

可以理解为装载图像的容器，用来定义图像是否可以拉伸、缩放、位置的调整等。

3、地图视图 map view 

可以呈现地理数据，并支持地图app的大部分功能。

4、滚动视图 scroll view

该视图的作用是可以让用户浏览比视图更大区域的内容。例如放大图片后，用滑动或者拖拽查看。

5、表格视图 table view

以不同的行来显示信息。该视图提供了控件让用户添加、删除或者多选，查看某行的更多信息。

6、文本视图 text view

可以容纳并显示多行文本。并且支持编辑文本。

7、web 视图

该视图可以显示富Html 内容。比如ios内置的邮件功能。

三、控件

1、活动指示器 activity indicator

表示某个任务或进程正在进行中。任务进行时旋转，任务完成时小时，不允许用户与之交互。

2、日期选择器 date picker

3、标签 label

用于显示静态文本。

4、网络活动指示器 network activity indicator

出现在状态栏，表示网络活动正在进行。

5、页码控件 page control

表示打开了多少视图以及当前视图是哪一个。不允许用户不按照顺序访问视图。

6、选择器 picker

用来显示一组数值，用户可以从中选择一个。

7、进度视图 progress view

用于展示已知持续时间的任务或者进度。

8、刷新控件 refresh control

用于执行用户发起的刷新，通常用在表格视图中。

9、分段控件 segmented control

每一个分段控件相当于一个显示不同视图的按钮

10、滑块 slider

允许用户在一定范围里调整数值或进度。

11、步进器 stepper

以常数量来增加或者减少某个数值。支持自定义图像。

12、开关 switch 表现两种互斥的状态，只用于表格视图。

13、系统按钮 system button

支持自定义样式，可以包含图片或者文字。默认情况下没有边框和背景。

14、文本框 text field

支持用户输入单行文本。可以在文本框左侧或者右侧显示自定义图像，或者添加系统按钮，例如书签按钮。还可以在文本框的右侧显示清楚按钮。

四、临时视图

1、警告框 alert

包含一条必要的标题和可选信息。

包含一个或多个按钮。 双按钮的情况下，按钮排布规则：1、 *** 作不会造成严重后果，而且是用户最有可能的 *** 作，我们把它放在右边，取消按钮放在左边。2、如果按钮具有破环性，则放在左边，取消按钮在右边。

2、 *** 作菜单 action sheet

显示用户所发起 *** 作的相关选项。用红色的字来显示具有破坏的选项按钮。

3、模态视图 modal view

以模态的形式展现的视图，为当前任务或者情景提供功能。通常包含一个完成按钮，一个取消按钮。比如评论功能，点击评论的图标进入模态视图，d出键盘、文本视图、完成和取消按钮。

---