storyBoard 搭建一个项目的 UI

由于进入新的公司接触新的项目基本使用的是storyBoard开发，之前没怎么用过就借着项目学习了一下,下面是我学习别人总结结合自己认识得到的基础知识结构

image.png

基础知识

优势

• storyboard能将nib汇总，便于管理
• storyboard可以通过segue完成各种场景的过度
• 支持tableview的prototype cell，可以在storyboard中编辑cell

在 storyboard 中使用自定义的控制器和 view

• 使用自定义的控制器
  1 首先需要创建一个viewcontroller的子类，如我们常用的tabBarController
  2 我们需要拖一个view controller 到main.storyBoard中，然后修改它的class为你创建的子类

  
  
  

  image.png
  
  

  3.此时你可以在这个controller中添加你的控件、关联控件

• 使用自定义的 view

这个和使用自定义控制器步骤是一样的，和之前 用xib 自定义控件也差不多，只不过不需要我们另外创建一个 xib 文件了，直接在 controller 中创建，就不多说了

• cell

cell 在 storyboard 创建和上面的 view 创建是一样的，需要注意的是 cell 有两种prototype cells 和
static cells

1.prototype cells
选中tableview，设置tableview的 cotent 为 Dynamic Propotype

image.png

这中种cell 是可以重用的，我们可以设置的 identityId 来区分不同的 cell，但是不能直接把cell中的view连线到cell所属的viewController中，因为这个是可以重用的 cell 所以无法确定连接的是哪一个 subview
2.static cells
使用静态的cell，适用在仅有几个确定cell的tableview中，不能重用，设置了几个cell，就显示几个cell,static cell 的cell以及cell中的控件都相当于确定的view，因此，static cell可以把cell以及cell中的控件连线到cell所属的viewController中。

加载 storyBoard

在一个项目中使用 storyboard肯定是需要一个入口加载它

1. 获取 storyboard 文件

• 作为程序主入口
  我们刚创建的项目中一般都会有一个 main.storyBoard，如果此时运行就会加载这个 storyboard 作为 window 的 rootviewcontroller
  我们项目中的info.plist中填写默认加载的是main.storyBoard文件 ，当然你也可以在此处修改你最先加载的入口为 你自己创建的 storyboard 文件
  
  

  image.png
• 通过代码加载
  以上是不通过代码来加载 storyboard作为程序的主入口 ，我们也可以通过代码来找到我们需要的 storyboard ，在我们需要的地方去使用它

UIStoryboard *storyboard=[UIStoryboard storyboardWithName:@"`你的storyBoard名称`" bundle:nil];

获取控制器

1.初始化storyBoard的主入口controller

storyboard文件需要一个初始化controller来作为他的主入口，这个和 window 需要一个 rootviewcontroller 差不多

• 在 storyboard 中选一个controller作为主入口，勾选Is Initial View Controller

  
  
  

  image.png
• 通过代码来初始化

UIStoryboard *storyboard=[UIStoryboard storyboardWithName:@"`你的storyBoard名称`" bundle:nil];
//下面这个方法代表着创建storyboard中箭头指向的控制器（初始控制器）
 MYViewController *controller=[storyboard instantiateInitialViewController];

//参考
//   UINib *nib=[UINib nibWithNibName:@"`你的storyBoard名称`" bundle:nil];
  //  [nib instantiateWithOwner:nil options:nil];

2.初始化任意 storyboard 中的 controller

有时候我们需要在一个 storyboard 文件中去加载其他 storyboard 文件中的控制器，那么我们需要先找到这个storyboard 文件,再通过 storyboardID 来找到相应的控制器，类似于 cell 的identityID

    UIStoryboard *storyboard=[UIStoryboard storyboardWithName:@"你的storyBoard名称" bundle:nil];
   //创建指定的控制器
     UIViewController *controller=[storyboard instantiateViewControllerWithIdentifier:@"MYTabViewControllerID

创建 container 控制器和它的自控制器的 segue

对于container view controller，即Tab Bar Controller，Navigation Controller 可以通过拖拽创建设置relationship segue。

Tab Bar Controller 需要设置 viewcontrollers 可以通过右击链接到Navigation Controller ，Navigation Controller 也可以通过这种方式来设置 rootviewcontroller

至此我们至少可以搭建一个大概的 UI 框架了 如图

image.png

当然我们需要在 storyboard 中修改 tabbar 的控制器名称，这个需要选中对应的navgationcontroller 中的tabbarItem 中设置

image.png

segue 的使用

什么是 segue

在storyBoard上每一根用来界面跳转的线,都是一个UIStoryBoardSegue对象.(简称Segue)

UIStoryBoardSegue的属性

每一个Segue对象,都有3个属性

给Segue设置唯一标识:
@property (nonatomic, readonly) NSString *identifier;
来源控制器
@property(nonatomic, readonly) id sourceViewController;
目标控制器
@property(nonatomic, readonly) id destinationViewController;

segue 的类型

• iOS8之前：

在storyboard中，segue有几种不同的类型，在iphone和ipad的开发中，segue的类型是不同的。
在iphone中，segue有：push，modal，和custom三种不同的类型，这些类型的区别在与新页面出现的方式。
而在ipad中，有push，modal，popover，replace和custom五种不同的类型。

modal: present 一个控制器或者 view
popover(iPad only)：采用浮动窗的形式把新页面展示出来
replace (iPad only):替换当前scene，
custom：

• iOS8之后
  show: 在iPhone 中类似与 push 在 ipad 中要区分只显示 master 或者 detail 还是两者都有，只显示一种的话就会和 push 一样把新的控制器压倒栈顶，两者都有的话会将内容将会压入detail区域
  present modally:模态展示内容属性面板中提供presentation style (UIModalPresentationStyle)与 transition style (UIModalTransitionStyle)两种选项
  popover presentation（好像iPad only）:在当前的view上出现一个小窗口来展示内容，
  在某个现有视图中的锚点处使用弹出框展示内容。这个选项可指定显示在弹出框视图一边上的箭头可用方向，同时也是指定锚点视图的一个选项。
  custom:自定义

跳转执行过程

segue 跳转的触发方式可以分为两种

• 自动触发：点击某个控件后(某个按钮),自动执行Segue,自动完成界面的跳转
  选中按钮通过右键后选择 action 链接目标控制器选择弹出方式

  
  
  

• 手动触发： 需要通过写代码手动执行Segue,才能完成界面的跳转
  选择控制器右键选择 triggered segue 链接目标控制器选择跳出方式

image.png

另外还需要给这个 segue 设置一个标签

image.png

最后在该跳转的时候,使用performSegueWithIdentifier方法执行对应的Segue

[self performSegueWithIdentifier:@"push" sender:nil];

segue 跳转的执行过程

• 手动调用performSegueWithIdentifier:sender:方法实现跳转。那么这期间发生了什么呢？大致分为三个部分。

1.根据identifier去storyboard中找到对应的线，新建UIStoryboardSegue对象

- (instancetype)initWithIdentifier:(NSString *)identifier source:(UIViewController *)source destination:(UIViewController *)destination; // Designated initializer

2.调用sourceViewController的下面方法，做一些跳转前的准备工作并且传入创建好的Segue对象

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender;

所谓跳转前的准备，因为可以拿到Segue(来源控制器,目标控制器)，所以就可以在这里给下一个控制器传递数据。这个方法是系统默认调用，所以只需要实现即可。另外，只能由来源控制器调用,来拿到目标控制器。
3.调用Segue对象的perform方法开始执行界面跳转操作。

[segue perform]

• [segue perform]方法的底层实现;
  调用Segue对象的- (void)perform;方法开始执行界面跳转操作
  1.如果segue的style是push取得sourceViewController所在的UINavigationController,调用UINavigationController的push方法将destinationViewController压入栈中，完成跳转
  2.如果segue的style是modal,调用sourceViewController的presentViewController方法将destinationViewController展示出来

跳转

segue可以实现页面间跳转，除了上面的 relationship segue 还有 Action segue 和 Manual segue，分别对应button跳转和viewController跳转。

跳进

Action segue 比较简单，就是将button连到要展示的viewController上，当点击时，就会触发。
Manual segue 相对比较麻烦，但是比较灵活。它设置了两个viewController的跳转关系，在你需要的时候出发跳转。