初学iOS----可视化编程storyBoard（创建，简单操作，小技巧持续补充更新）

StoryBoard，俗称sb，是iOS下可视化编程的方式之一，另一种是xib。
使用storyBoard可以方便快捷的拖拽视图控制器，控件，设置根视图控制器，并且可以直观的看到位置大小，效果等，如果能熟练使用storyBoard，可以少写很多代码。
因为多storyBoard还没怎么用过，这里只说单storyBoard，也就是Main.storyBoard。

![Uploading storyBoard-1_280278.gif . . .]
](http://upload-images.jianshu.io/upload_images/1803560-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