barbuttonitem 文字换行_iOS Storyboard入门及一些高级使用

一、前言

Swift版本 4.0

Xcode版本 9.2

这周本来我是想要写其他知识的，但在构建 Demo 工程的时候， 我情不自禁的就使用了 Storyboard (下面简称 SB )，或者说是 Interface Builder (下面简称 IB)，所以就想着写一篇相关文章。

这里不讨论使用这种方式的好坏，大家仁者见仁,智者见智，猫神的文章链接在后记里面，我的观点和他一致。

二、Storyboard基础

这部分针对完全没用过 SB 的读者，极其基础，熟悉的直接跳过！

2.1 完成目标的概览

下面是我这一小节需要完成目标的样子，一个游戏的展示界面和添加游戏。

2.2 界面初识

先建立一个 Demo 项目，点击 Main.storyboard 出现如下界面：

首先需要了解 SB 中几个重要的区域，这里是按照我的理解取的名字，只是简单说明区域的作用，后面会详细使用这几个区域，如上图所示：

1、菜单导航区域，添加的控制器、控制器之间的跳转 Segue 及控制器上面的控件和布局等等信息都在这里显示。

2、工作展示区域： 可以在这里给各个控制器添加控件和预览布局后的控件。

3、配置区域： 可以在这里将 SB 和代码文件关联和查看关联后的信息，也可以直接在这里配置控件的属性等等。

4、布局区域： 上面面有很多机型选择，可以直接选择机型和方向，区域2会根据选择的机型和自动布局直接预览控件显示的效果和布局，中间的加减符号可以放大和缩小区域2中的内容，右上角的几个按钮可以进行自动布局操作。

5、控件区域，我们可以直接在这里选择控件，然后拖入区域2中。

细心的读者可能会发现，区域1中，控制器在一个 scene 的下面，在 SB 中，scene 就对应着一个控制器。区域2里面还有一个灰色箭头，它代表这个控制器是当前 SB 文件的入口，会在后面详细的讲解。

2.3 添加控件

直接从控件区域拖拽了一个 UIView 控件到控制器上，然后在 Attributes inspector区域 (点击配置区域中那个楔子形状的按钮)直接配置背景颜色为灰色。如果显示菜单栏中没有没有你想要的颜色，点击 other ,里面有多种方式配置颜色，如 RGB 和16进制颜色等等。

上图这个区域里还有一些其他的属性可以配置，例如 UILabel 控件字体和字体颜色等等属性等，就不深入去展开了。

读者肯定注意到，控件在拖拽中，控制器出现了辅助虚线，可以提醒你相对其他视图的位置信息，图中所示的其中一条就是父视图的中线。

2.4 布局控件

解释一下上图的自动布局操作：

1.选中控件， 点击 Align 按钮，勾选 Horizontalliy in Container 和 Vertically in Container，然后添加这两个布局，相对于父视图水平和垂直居中

2.然后点击 Add New Constraints按钮，添加 Width 和 Height 约束，都为200。

到这里布局就完成了，因为大小和位置都已经确定。观察上图，我只添加了 Align 约束时，界面出现了红线，这代表约束不完整。并且菜单栏上方出现带有箭头的小红点，可以点击进去查看还有哪些约束没有完成。这里还有其他的约束选项，读者可以自行尝试。

3、图中最后，我在 Size inspector 区域 (点击配置区域中那个小直尺按钮) 双击宽度约束，进入了详情配置界面，这里可以对约束进行二次修改。点击菜单栏的约束，同样可以进入这个界面。

这里还有另一种方式进行自动布局，如图所示：

按住 Ctrl,然后选中灰色 View ，移动鼠标会出现一条线，拖到你想要相对其布局的控件，图中选择的是父视图，出现了一个菜单让你选择约束条件。同样的操作也能直接在菜单栏中进行。甚至当控制器上控件比较多不容易选中时，可以直接从控制器上拖到菜单栏上的控件上。

这一部分的操作是很简单的，不过需要自动布局的相关知识。

2.5 开始一个TableView界面

选中菜单栏的 View Controller Scene,然后点击键盘上的 delete 键，删除我们鼓捣的控制器。

从控件区域拖拽一个 UITabBarController 到工作展示区域：

在工作展示空白区域，双击鼠标左键和单点鼠标右键，可以放大，缩小显示内容。

如图，UITabBarController (它和 UINavigationController 都是容器控制器) 会自带两个子控制器，并且有两个箭头从 TabBarController 指向它们，这个箭头的术语叫做 Segue, 这里的是 Relationship Segue ,代表控制器之间的关系。

删掉 item1 的控制器，拖拽一个 UITableViewController 出来，然后让它成为 UINavigationController 的子控制器， 再让 UINavigationController 成为 UITabBarController 控制器的子控制器，操作如图所示：

当然你也可以直接拖拽一个 UINavigationController 出来，然后按住 Control 拖动选择 view controllers。不过我觉得点击 Editor 这种方式更加便捷。

让我们的关注点来到 UITableViewController ,看到界面上有一个 Prototype Cells ，可以理解为我们平时使用的那种 Cell , 与之对应的是 Static Cells, 从名字就可以看出来，这种是静态的，不能够循环使用，并且只能在UITableViewController 上使用。

红框中，和我们代码实现中官方提供的4种 Cell 一样，不过这里我们需要自定义，下面是完成后的样子。

可能对没有接触过 IB 的读者来说，这里还是比较麻烦，所以详细描述一下。

选中 Cell 在右上角 Size inspector 区域修改 Cell 的高度为120，这里的高度设置只是方便我们进行布局，并不是实际显示的高度。

拖动一个 UIImageView 控件到 Cell 里面，进行布局。

iOS8 以后更新了让 Cell 自己自适应高度的新特性，所以这里我们不光要确定自己的位置和大小，还需要将自己的大小反馈给 Cell 让其自适应高度，后