转载

storyBoard 搭建一个项目的 UI

2018-11-29  本文已影响8人  刺客小生110

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

image.png

基础知识

优势

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

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

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 文件
UIStoryboard *storyboard=[UIStoryboard storyboardWithName:@"`你的storyBoard名称`" bundle:nil];

获取控制器

1.初始化storyBoard的主入口controller

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

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 的类型

在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

跳转执行过程

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

image.png

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


image.png

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

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

segue 跳转的执行过程

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可以实现页面间跳转,除了上面的 relationship segue 还有 Action segue 和 Manual segue,分别对应button跳转和viewController跳转。

跳进

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

上一篇 下一篇

猜你喜欢

热点阅读