iOS 开发记录（一）AutoLayout 实践

首先，我们看到的每一个页面都是一个ViewController+对应的xib共同组成。页面之间的跳转就是将一个个页面在根navigation栈中入栈出栈。对应的方法为push Or pop，而在入栈出栈，页面显示过程中需要掌握页面的生命周期（似乎跟react很相似哦）：

    // 各方法一定要先执行父方法 super.xxx(param)，再重写自己的方法体
    override func viewDidLoad() {
        // 页面载入时只执行一次
    }
    override func viewWillAppear(_ animated: Bool) {
        // 页面每次即将渲染时执行
    }
    override func viewDidAppear(_ animated: Bool) {
        // 页面每次渲染完后执行
    }
    override func viewDidLayoutSubviews() {
        // 页面渲染后，只要有变动即执行
    }
    override func viewWillDisappear(_ animated: Bool) {
        // 页面即将离开时执行
    }
    override func viewDidDisappear(_ animated: Bool) {
        // 页面已经离开执行
    }

1. 创建ViewController以及对应的xib文件：

   
   新建ViewController(1)
   新建ViewController(2)
   

   一定要勾选“Also create XIB file”。

2. 进入xib文件，进行基本的页面元素布局：
   xib文件
   右下角有iOS原生的各种组件，如果定制化需求不高，此处的组件完全够用，且风格与iOS相符。
   常用的有Label Button SegmentedControl TextField Switch ImageView Table View View Scroll View 等。
3. 所有App开发都会遇到一个导航栏处理的问题，有的登录页没有导航栏，有的又需要导航栏，比如返回按钮，页面标题等。如果不需要导航栏，可以在对应view controller文件中用代码将其disable掉即可。此外，如果我们就采用苹果原生的导航栏，我们可以在每个页面的生命周期内对导航栏的左按钮（通常是返回）、页面标题以及右按钮进行配置（包括按钮事件等），且导航栏高度+状态栏高度 = 64pt。
4. 所有的组件使用时，只需从右下角将其拖入view中即可 设置Label属性以及约束
   

   右边设置控件的文字、对齐方式、背景颜色等属性，下方的Constraints用来设置控件约束（包括距某控件上下左右，以及自身的宽高）

• 这里说明一下AutoLayout的要点：

  • 所有控件不设置固定的frame（x,y,width,height）即不用绝对定位。
  • 所有的控件都可以从xib中拖入view controller中进行关联后，再在controller中用代码控制控件的
    各个属性以及约束，十分灵活便捷。

    @IBOutlet weak var AButton: UIButton!      //关联后xib中的AButton就变成controller中的变量
    

  • 所有控件均设置与某控件的上下左右约束，比如A按钮的约束(依赖SnapKit库用代码实现等同于xib内设置)：

        import UISnapKit
        View.addSubview(AButton) // 先将控件添加于其父控件中才能使用equalToSuperview方法
        AButton.snp.makeConstraints { (maker) in
            maker.top.equalToSuperview().offset(0)
            maker.height.equalTo(height)
            maker.leading.equalToSuperview().offset(0)
            maker.trailing.equalToSuperview().offset(0)
        }
  

此处，设置了A按钮距离父view顶部0pt，左边距父view左边0pt，右边距父view右边0pt，控件高度height。这就将A按钮准确定位于父view中，且不随设备的宽高变化而移动，实现按钮整体随设备的拉伸或压缩的效果。当然，更深一层次，可以用 SizeClasses 技术来适配不同设备横竖屏。

至此，我们就可以将我们的页面按照需求进行Autolayout布局。