AutoLayout(自動布局)


1. iOS兩種自適應布局方式:(修正說明:)

    -AutoLayout(自動布局) + SizeClasses(尺寸類別) 

    -Autoresizing (自動調整尺寸/彈簧式調整尺寸)

     前者 AutoLayout 是從iOS6出現,通過創建視圖約束實現自適應,SizeClasses是iOS8 開始出現,用於配合AutoLayout使用,為解決所有(包括iPhone,iPad)iOS設備屏幕尺寸和屏幕旋轉時UI的適配。

     后者是早期開發使用的適配界面的方式,現在仍然保留。通過彈簧式調整控件尺寸,使其適應屏幕的尺寸變化。

     蘋果官方建議使用AutoLayout。

     Autoresizing 缺點:

     > 其描述界面變化規則不夠靈活,很多變化規則根本無法精確描述。autoresizingMask縮放比例是UIKit內部計算的,開發者無法指定縮放比例的精確值。

  •      > 變化規則只能基於父視圖與子視圖之間,無法建立同級視圖或者跨級視圖之間的關系。

     AutoLayout 的核心原理:

     > view具有自我計算尺寸,布局的能力。通過它自身的內容,能夠得到尺寸。

     > view的布局位置,確定於它與superview及其他view的關系。 

     > 與傳統的autoresizingmask自適應相比,AutoLayout更精確,能絕對的確定view的布局。

     > view不一定需要一個初始的rect。AutoLayout中,view如果有足夠的constraint,便可以確定自己的尺寸和位置,並且知道自己和其他view的關系。即,想確定view的布局,就給它(們)添加constraint。

 

2. AutoLayout 自動布局 有三種方式:

    > 在Xcode 可視化界面 Interface Builder 中右下角添加並設置約束

    > 純代碼添加約束

    > 純代碼通過可視化格式語言VFL(Visual Format Language) 添加約束

 

2.1 可視化設置約束

     Interface Builder中,右下角,依次是Alignment(布局),Pin(固定),Resolve(解決約束錯誤)

     以下列出三項中常用的項

     Alignment: Horizontally in Container  在容器中水平中心,值為0,設置其他值時,表示水平方向偏移中心位置量

                     Vertially in Container 在容器中豎直中心,值為0,設置其他值時,表示水平方向偏移中心位置量

     Pin:  

           上方四個值,從左側順時針依次是:

                 Leading Space to Superview // 相對於父視圖的左間距 leading:首部

                 Top Space to Superview       // 相對於父視圖的上間距

                 Trailing Space to Superview  // 相對於父視圖的右間距 trailing:尾部

                 Bottom Space to Superview  // 相對於父視圖的底間距

           Width : 固定自身寬度

           Height : 固定自身高度

           

           若要使多個視圖相同的寬度,高度,則先同時選中多個視圖,然后在Pin中選擇:

           EqualWidths: 多個視圖相同寬度;EqualHeights: 多個視圖相同高度

 

             若要使兩個視圖水平方向或垂直方向上相互之間的距離固定,先選中其中一個視圖,同時按住鍵盤上control鍵,拉線到另一個視圖,在彈出框中:

         選中 Horizontal Spacing (水平方向間距) 或 Vertical Spacing(豎直方向間距),然后在被選中視圖的Size Inspector(右側倒數第二個選項卡) 中Constraints 欄目下,如圖所示: 點擊“Edit”,

彈出     在 constant中輸入固定間距值

                     

     Resolve: 主要使用到 Clear Constraints 清除視圖的約束

 

2.2 純代碼設置約束

     NSLayoutConstraint 布局約束類

     > 純代碼方式添加視圖,不指定frame(若可視化下添加其位置,大小對約束有影響,會產生沖突)

     > 設置禁止自動尺寸轉換成約束,否則會產生約束沖突

        被約束的視圖.translatesAutoresizingMaskIntoConstraints = NO

        在可視化下Interface Builder 上默認設置就是關閉的

     > 創建約束

        [NSLayoutConstraint constraintWithItem:lb attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100]

        // 參數一:被約束的視圖:view1

        // 參數二:指定在被約束的視圖哪個屬性上約束,位置或大小

        // 參數三:被約束的視圖與參照視圖指定屬性之間的關系

        // 參數四:參照視圖:view2

        // 參數五:參照視圖的屬性

        // 參數六: multiplier:被約束視圖指定屬性是參照視圖指定屬性的多少倍

        // 參數七:被約束視圖的指定屬性需要加的浮點數 value

        計算公式:view1.attr [=,>=,<=] view2.attr * multiplier + value;

 

     > 添加約束

        注意:約束是添加到參照視圖上。

       [view2 addConstraint: ]

 

     [擴展] 第三方庫實現約束 Masonry

    官網: https://github.com/SnapKit/Masonry

 

2.3 VFL設置約束

      通過 NSLayoutConstraint 類方法:

      + (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;

     示例:

     NSArray *constraints=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==height)]"

                         options:0

                         metrics:@{@"height":@30}

                         views:NSDictionaryOfVariableBindings(button1,button2)];

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM