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 <relation> 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 <relation> 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