StoryBoard，俗称sb，是iOS下可视化编程的方式之一，另一种是xib。
使用storyBoard可以方便快捷的拖拽视图控制器，控件，设置根视图控制器，并且可以直观的看到位置大小，效果等，如果能熟练使用storyBoard，可以少写很多代码。
因为多storyBoard还没怎么用过，这里只说单storyBoard，也就是Main.storyBoard。
![Uploading storyBoard-1_280278.gif . . .]
](https://img.haomeiwen.com/i1803560/ef9bc50b0e120441.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如图，主路口是可以直接拖动的，或者在某个视图控制器上勾选。
如果想为视图控制器A添加一个navigationController或者TabBarController，可以按照下图方式设置：
下面是storyBoard的初始页面：
storyBoard.png
注意，在添加之前先点击A。
然后就可以在右下角往视图控制器上拖想要的控件，不再详细介绍
页面间的跳转
首先在storyBoard上拖拽第二个视图控制器，和你创建的类一个类型
这样就已经和你创建的类关联上了，storyBoardID就是相当于该页面的唯一标识，而identifier是segue的标识符，会根据不同的segue标识符处理数据
如果在其他类里引入该类时，就需要用storyBoardID找到这个页面，而不能重新创建初始化，以页面跳转为例，storyBoard之间的跳转都使用如下方法：
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
if ([segue.identifier isEqualToString:@"secondPush"]) {
SecondViewController *secondVC = [[UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]]instantiateViewControllerWithIdentifier:@"second"];
secondVC.CustomLabel.backgroundColor = [UIColor cyanColor];
}
}
这里的@“second”就是刚刚写的storyBoardID.
自定义segue：
自定义segue步骤
步骤一 : 新建 个类继承 UIStoryboardSegue
步骤 二: 选中前 个控制器,按住control鼠标 标辅助完成连线,选 择custom。
步骤三: 选中 定义 segue,设置 segue的identifier 以及关联类。
步骤四: 在 segue类里重写perform方法(界 间跳转默认执行的方法), 自定义跳转效果。
storyBoard.png
//重写自定义方法
-(void)perform
{
//获取源控制器:
ViewController *sourceVC = (ViewController *)self.sourceViewController;
//获取目标控制器:
SecondViewController *secondVC = (SecondViewController *)self.destinationViewController;
//动画效果
//第一个参数:源控制器的视图
//第二个参数:目标控制器的视图
//第三个参数:动画持续的时间
//第四个参数:动画样式
//第五个参数:动画完成之后进行的操作
[UIView transitionFromView:sourceVC.view toView:secondVC.view duration:1 options:(UIViewAnimationOptionTransitionFlipFromTop) completion:^(BOOL finished) {
//动画完成之后进行的内容
[sourceVC.navigationController pushViewController:secondVC animated:YES];
}];
}
StoryBoard约束：
storyBoard约束很简单，点到想要约束的控件，然后点击下面的按钮
storyBoard.png
另外还有等高，等宽，等比例等约束，我个人比较喜欢直接用ctrl键按着控件拖：
storyBoard.gif
可以按照需要的比例进行调试。
如果想要清除已经加的约束，可以进行如下操作
storyBoard.png
最后，放一个简单的登录页面的效果图(不是所有屏幕适配！！)
storyBoard.gif
storyBoard易坑点，小技巧(会补充更新，欢迎交流)
控件和关联到页面成属性或方法之后，如果想删掉，记得在storyBoard上也删了
storyBoard-1.gif
tabBar，navigationBar，navigationItem设置图片时，想让图片不被渲染：
storyBoard-1.gif
设置navigationBar的背景图片，我在设置navigationBar的背景图片时，发现直接在右侧操作设置不行，查到的最简单的方法就是在AppDelegate.m里写一个方法：
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"bg_nav.png"] forBarMetrics:UIBarMetricsDefault];
即可，有大神知道直接设置背景图片是哪里的问题的话请留言或私信，感谢！！！！
如图：
2.png
当按钮的类型是System的时候，设置图片是没有反应的，需要设置为custom，不过现在一般操作时会自动更换成custom
网友评论