iOS Autolayout笔记

一、Autolayout笔记

上午:
第一节
1.PPT介绍页面布局的三个时期
2.Autosizing简单使用
    1如何固定控件和四周的距离
    》讲解如何开启Autosizing （去掉Use Auto Layout）
    》Autosizing主要学习六根线
        1.周围四根线
        a. 用途:用来控制当前控件和父控件的距离的
        b. 如果勾选左边线条,代表当前控件与父控件的左边的距离固定,其他依次类推
        c. 举例:四个红色方块在控制器view内部,要求无论控制器view如何变化,四个红色方块永远都在控制器view的的四个角上

        2.中间的两根:
        a. 如果勾选了中间水平方向这条线,则子控件宽度,随父控件宽度的变化而变化.
        b. 如果勾选了中间垂直方向这条线,则子控件高度,随父控件高度的变化而变化.
        c. 要求:红色控件在蓝色控件内部,(蓝为父,红为子), 红色控件与蓝色控件上下左右的距离不变, 红色控件随着蓝色控件的宽度的变化而变化,点击按钮让蓝色控件的宽高变大

    2.代码中使用Autosizing
        代码中使用子控件的autoresizingMask属性,来设置子控件与父控件之间的关系的.
        需求:搞两个控件,一个蓝色一个红色,形成父子关系,蓝色是父控件,红色是子控件.
        让红色控件永远在蓝色的底部,并且红色的宽度必须随着蓝色的变化而变化

        》设置autoreizingMask属性距离顶部可拉伸、宽度可拉伸
        》"切记"：代码中设置某个方向可拉伸代表另一个方向固定和故事板中正好相反

    3.autoreizingMask缺陷

        》拖入两个view并设置view宽度为130， 要求两个View距离左右和顶部永远是20
        》设置A控件距离左边顶部固定， 设置B控件距离右边顶部固定， 运行查看效果
        》设置A,B控件内部是可拉伸的， 运行查看效果
        》无论如何Autosizing无法满足需求，因为Autosizing是相对父控件计算的,不能单独设置两个控件之间的条件
第二节
3.Autolayout简单实用
    Autolayout基本概念 （让控件居中并距离上下左右50）
    》讲解如何打开Autolayout（勾选Use Auto Layout）
      为了我们能够使用autolayout,必须勾选, 为了更清楚的认识autolayout, sizeclass 先不要勾选.
    >Autolayout的原理
        >没有使用auturesizing/autolayout时是设置frame , 设置frame其实就是告诉系统控件的X/Y/宽/高.
        >以前可以通过frame直接设置控件的X/Y/宽/高.
        >以前可以通过auturesizing间接设置控件的X/Y/宽/高.
        >so使用autolayout时也是间接设置控件的X/Y/宽/高即可
        >系统会根据约束自动调整

    》讲解故事版底部几个按钮作用
    举例:1
    1.让子控件永远居中, 宽高永远100
        1.0 拖入一个控件设置尺寸为100,100 ,位置随便放置
        1.1添加距离在父控件中心地约束
        1.2 红色箭头:表示缺少约束或约束冲突
        1.3.添加宽高的约束
        1.4 黄色箭头:黄色箭头代表当前控件的X或Y或宽或高和autulayout约束的不一致
        1.5 如何修复黄色箭头,两种方式
        1.6 演示红色箭头的另一个原因,约束冲突,添加一个宽度为200的约束
        1.7 演示如何修复红色箭头
    2.举例:让控件居中,并且距离上下左右都是50
        2.1 拖入一个view,背景设置为蓝色,调整尺寸
        2.2 添加距离父控件上下左右距离的约束
        2.3 如何删除约束

4. Autolayout其他用法
练习
    第一题:
    控制器的view内部有红蓝两个view,红色的view与蓝色的view时兄弟关系.

    要求:红色的view距离控制器的view左边20固定,底部20固定,高度100固定
    蓝色view与控制器view右边20底部20,宽度和高度与红色view相同,
    蓝色view与红色的view之间的间隙为20

    "注意":当有多个view的时候,建议一个一个搞,当多同时搞的话就容易搞混
    方法1:多控件宽高相等（练习1）
        》设置A控件左下固定（相当于设置X和Y）
        》B控件右下固定 （相当于设置X和Y）
        》设置AB控件中间固定
        》设置两个控件宽度相等 （统自动推算， 相当于设置宽度）
        》设置A控件高度
        》设置两个控件高度相等（相当设置B高度）
    方法2:多控件顶部底部对齐 （练习1）
        》设置A控件左下固定、B控件右下固定
        》设置AB控件中间固定
        》设置两个控件宽度相等
        》设置A控件高度
        》设置B和A顶部底部对齐

    第二题:
    控制器的view中有红色View和蓝色View
    要求
    蓝色view距离控制器的view顶部以及左右都是20,高度为100
    红色的view与控制器view的右边的间距也为20
    红色view在蓝色view下方,红色view与蓝色view之间的间隔为20
    红色view与蓝色view的高度相同,宽度是蓝色view的一半
核心公式:
    firstItem(redView.width) = secondItem(blueView.width) * 0.5 +  Constant(0)

    方法1:
    》设置A控件距离上左右固定 （相当于设置X/Y/宽）
    》设置A控件高度固定
    》设置B控件宽高等于A控件
    》设置B控件距离A控件底部固定
    》设置B控件和A控件右对齐
    》讲解公式
    view1.attr1  view2.attr2 * multiplier + constant
    》修改乘积为0.5运行查看效果
    修改:
    》利用修改水平居中约束实现

第三节: Autolayout使用技巧
需求1:  使用一张图片作为主页界面,无论是在4s 还是5/5s上都可以正常显示
       创建项目去掉sizeclasses,拖入图片,storyboard中拖入imageView,设置imageView的图片 ,完成后如图所示:

       1.UIImageView如果有图片就可以不添加它宽高约束,系统把image图片的宽高作为UIImageView的宽高
       2.UILabel如果有内容也可以不添加宽高约束,系统会根据UILabel的内容来确定它的宽高
       3.系统中还有一些控件默认就宽高如 UISwitch,UIButton 系统自带几种类型 等,也不用设置宽高约束

需求2 :  使用一张图片作为主页界面,主界面上有按钮的位置添加一个按钮控件,无论是在4s 还是5/5s上都可以正常显示,如图

下午:
第一节:(理解)
Autolayout代码实现
    1.PPT讲解添加约束的规则
        1）对于两个同层级view之间的约束关系，添加到它们的父view上
        2)对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
        3)对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上
        4)只与自己本身有关系，添加到自己上(如固定的宽或高)
    2.代码实现Autolayout概念（PPT讲解）
    》切记：要先禁止autoresizing功能，设置view的下面属性为NO
    》切记：添加约束之前，一定要保证相关控件都已经在各自的父控件上
    3.Autolayout约束的代码创建[了解]
        • 一个NSLayoutConstraint对象就代表一个约束
        • 创建约束对象的常用方法
        +(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
        • view1 ：要约束的控件
        • attr1 ：约束的类型（做怎样的约束）
        • relation ：与参照控件之间的关系
        • view2 ：参照的控件
        • attr2 ：约束的类型（做怎样的约束）
        • multiplier ：乘数
          c ：常量

        核心公式: view1.attr1  view2.attr2 * multiplier     + c

    4.编程实现（添加控件，要求款到100并且居中）
    》对照公式讲解NSLayoutConstraint对象每个参数的含义
    /*
     typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
     NSLayoutAttributeLeft = 1,                     //左侧
     NSLayoutAttributeRight,                        //右侧
     NSLayoutAttributeTop,                          //上方
     NSLayoutAttributeBottom,                       //下方
     NSLayoutAttributeLeading,                      //首部
     NSLayoutAttributeTrailing,                     //尾部
     NSLayoutAttributeWidth,                        //宽度
     NSLayoutAttributeHeight,                       //高度
     NSLayoutAttributeCenterX,                      //X轴中心
     NSLayoutAttributeCenterY,                      //Y轴中心
     NSLayoutAttributeBaseline,                     //文本底标线
     NSLayoutAttributeNotAnAttribute = 0            //没有属性
     };
     其中leading与left trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时(比如阿拉伯文) 则会对调，换句话说就是只用left和right就好了

     typedef NS_ENUM(NSInteger, NSLayoutRelation) {
     NSLayoutRelationLessThanOrEqual = -1,          //小于等于
     NSLayoutRelationEqual = 0,                     //等于
     NSLayoutRelationGreaterThanOrEqual = 1,        //大于等于
     };
     */
    》创建4个约束宽高、CenterX 、CenterY添加后运行查看效果
    5.3练习
    控制器的view中有红色View和蓝色View
    要求
    蓝色view距离控制器的view顶部以及左右都是20,高度为100
    红色的view与控制器view的右边的间距也为20
    红色view在蓝色view下方,红色view与蓝色view之间的间隔为20
    红色view与蓝色view的高度相同,宽度是蓝色view的一半
    使用纯代码
    》添加控件并禁止Autoresizing
    》创建蓝色控件约束（高度、距离左边、顶部、右边）
    》创建红色控件约束（右边等于蓝色、高度等于蓝色、顶部对齐蓝色底部、宽度等于蓝色一半）

第二节: VFL(了解):

    练习:
    2.控制器的view中有红色View和蓝色View
    要求
    蓝色view距离控制器的view顶部以及左右都是20,高度为100
    红色的view与控制器view的右边的间距也为20
    红色view在蓝色view下方,红色view与蓝色view之间的间隔为20
    红色view与蓝色view的高度相同,宽度是蓝色view的一半
    使用VLF语言
2.Masonry[理解]
  概述
  Masonry，“一个轻量级的布局框架，采用更"优雅"的语法封装自动布局”，不需要使用XIB和Storyboard， 并具有高可读性 而且同时支持 iOS 和 Max OS X
  Masonry尤其适合习惯纯代码开发的开发者 ，在iPhone6发布后引发的适配潮中 Masonry一定可以助你一臂之力
  使用:
  1.创建项目
  2.导入框架(把框架代码拷贝过来)
  3.根据示例程序来写[介绍pch文件]

  Masonry常用方法
  在控制器上添加一个控件，在控制器view的中心,宽高均为200
  三个添加约束方法区别
  /*
 mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
 mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
 mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
 三种函数善加利用 就可以应对各种情况了
  */
  两个赋值方法区别（equalTo 和 mas_equalTo）
  /*
  #define equalTo(...)                     mas_equalTo(__VA_ARGS__)
  #define mas_equalTo(...)                 equalTo(MASBoxValue((__VA_ARGS__)))
  
  mas_equalTo对其参数进行了一个自动装箱操作， 除了支持NSNumber数值类型之外还支持CGPoint CGSize UIEdgeInsets
  */

//define this constant if you want to use Masonry without the 'mas_' prefix
//你如果希望不加mas_使用Masonry就定义这个宏
 #define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
//如果你希望启用自动加包解包(基本数据类转对象类型称为加包,对象类转对象类型称为解包,自动加解包为auto-boxing)就定义这个宏
 #define MAS_SHORTHAND_GLOBALS



第三节
 Masonry练习
 在控制器上添加一个控件，距离控制器View上下左右各20
 方式一逐个设置 make.top.equalTo
 方式二连续设置 make.top.left
              make.bottom.and.right.equalTo
/*
  注意：这里的and和with 其实这两个函数什么事情都没做
  and和with方法直接 return self;
  */
 方式三一次性设置 make.edges.equalTo


 练习2
 控制器的view中有红色View和蓝色View
 要求
 蓝色view距离控制器的view顶部以及左右都是20,高度为100
 红色的view与控制器view的右边的间距也为20
 红色view在蓝色view下方,红色view与蓝色view之间的间隔为20
 红色view与蓝色view的高度相同,宽度是蓝色view的一半

晚上:
  第一节
    1.AutoLayout中使用动画
      1.约束可以拖线到控制器
      2.可以修改约束
      3.执行动画的时候,调用layoutIfNeeded
    2.sizeclass
      介绍sizeclass的作用
      使用sizeclass来实现QQ登录界面
      1.创建一个通用的项目
      2.使用autolayout来约束界面
        1.sizeclass 设置为Any & Any
        2.QQ头像水平居中,紧挨导航栏
        3.文本框宽度200,水平居中,顶部据头像的距离为20
        4.文本框宽度200,水平居中,距离上面的文本框为20
        5.预览在所有设备上都是正常的

    3.images.xcassets在Xcode6中的变化

    4.sizeclass安装
      选中控件,在该控件的属性面板的最下面
  第二节
     新浪微博使用autolayout来做
     1.创建项目拖入资源
     2.创建文件
     3.拷贝数据模型文件
     4.修改storyboard中的控制器为UITableViewController
     5.删除原来viewController,创建一个CZMicroBlogController继承自UITableViewController
     6.设置storyboard中的控制器为custom class 为CZMicroBlogController
     7.在控制提供microBlogs的属性,然后懒加载它
     8.storyboard中使用autolayout布局cell
       此时布局icon,name,vip和text
     9.创建CZMicroBlogCell类继承UITableViewCell
     10.设置storyboard中的cell的custom class为CZMicroBlogCell
     11.在CZMicroBlogCell.m文件中,定义类扩展,然后stroyboard中cell的子控件拖线到类扩展中
     12.在CZMicroBlogCell.h文件中,提供一个数据模型属性,重写该属性的setter方法,给子控件赋值
     13.在控制器中实现数据源方法
     14.在viewDidLoad方法中设置
        行高动态计算
        self.tableView.rowHeight = UITableViewAutomaticDimension;
        和估算行高
        self.tableView.estimatedRowHeight = 44;
     15.处理最下面的图片
        1.在storyboard中的cell中拖入一个UIImageView
        2.添加相关约束
        3.拖线到自定义cell中
        4.在setMicroBlog:中,判断有存在图片,就给设置图片,否则隐藏,运行没有显示的图片的依然占据位置
        5.把pictureView上的控制器行高的约束拖过来,如果没有图片就把行高约束设置为0,否则设置100

二、学习链接

1. Autolayout基础知识
   1).http://commandshift.co.uk/blog/2013/02/20/creating-individual-layout-constraints/
   2).http://commandshift.co.uk/blog/2013/01/31/visual-format-language-for-autolayout/

2. 自学:
   在Autolayout中如果是对ScorllerView和TableView是需要特殊处理
   而且在ios8中相比ios7 , TableView还需要更进一步的处理
   江哥提示:TableView中使用Autolayout
   1).https://github.com/smileyborg/TableViewCellWithAutoLayout
   2).https://github.com/smileyborg/TableViewCellWithAutoLayoutiOS8