iOS 自動布局Autolayout

1、高級軟件人才實作培訓專家!北京傳智播客教育 Autolayout-自動布局iOS學院高級軟件人才實作培訓專家!北京傳智播客教育 簡介-iPhone屏幕適配的發(fā)展過程一直接使用 frame 計算控件的位置、大小(MagicNumber)1.iPhone3GS iPhone4 iPhone4S 屏幕的物理尺寸是一樣屏幕的物理尺寸是一樣的的(無需屏幕適配無需屏幕適配), 而且一個應用要么是橫屏要么是豎屏, 不存在能同時進行橫豎屏切換的應用二使用 autoresizing進行屏幕適配（設(shè)置顯示規(guī)則，只能按照父控件來設(shè)置參照）1.隨著iPad 的發(fā)布, 屏幕物理大小發(fā)生了變化屏幕物理大小發(fā)生了變化, 并

2、且要求部分應用程序?qū)崿F(xiàn)橫豎屏切換橫豎屏切換，所以不能把控件的 frame 都寫死了，需要進行屏幕適配。2.autoresizing的核心思想就是：參照父容器來設(shè)置子控件的 frame。不再寫死 frame, 而是參照參照。3.舉例: 在豎屏下有一個按鈕要占據(jù)整個屏幕寬度, 當切換到橫屏下以后同樣要占據(jù)整個屏幕的寬度4.注意: autoresizing只能設(shè)置當前控件與父控件之間的相對關(guān)系高級軟件人才實作培訓專家!北京傳智播客教育 簡介-iPhone屏幕適配的發(fā)展過程三使用 autolayout（從 iOS6開始）進行屏幕適配1.隨著 iPhone5 iPhone5s 等的發(fā)布蘋果設(shè)備不同尺寸的

3、屏幕變得越來越多, 不僅要求能根據(jù)控件父子關(guān)系來設(shè)置相對位置, 也要求能根據(jù)任意控件之間的關(guān)系來設(shè)置位置2.因為 autoresizing只能設(shè)置當期控件與父控件之間的相對關(guān)系, 當遇到要設(shè)置兄弟控件之間的關(guān)系的時候 autoresizing就無能為力了3.舉例: 在豎屏下, 屏幕底部有兩個按鈕, 這兩個按鈕的間距為一個固定的值(寬度不指定); 當切換為橫屏的時候要求這兩個按鈕還顯示在屏幕底部, 并且按鈕間的間距不變, 按鈕可以隨之變寬。高級軟件人才實作培訓專家!北京傳智播客教育 簡介-iPhone屏幕適配的發(fā)展過程四使用 size classes + autolayout 進行屏幕適配1.看

4、時間作為補充, 今天的內(nèi)容是Autolayout”2.當 iPhone6發(fā)布以后, 蘋果設(shè)備的屏幕越來越多(以后也可能出現(xiàn)更多不同大小的屏幕), 為了能更容易的適配不同的屏幕, 蘋果推出了size classes 技術(shù)3.通過 autolayout設(shè)置的約束, 約束一旦添加就會應用于各種屏幕（也就是說在各種不同的屏幕下都使用相同的約束）4.通過 size classes + autolayout的方式, 可以為不同尺寸的屏幕可以為不同尺寸的屏幕設(shè)置不同的約束設(shè)置不同的約束n舉例: 在3.5 inch的屏幕下希望某個按鈕緊貼屏幕上邊顯示, 但是當屏幕變成4.7 inch以后, 則希望該按鈕顯示到

5、屏幕的正中央nsize classes技術(shù)主要解決的問題: 為為不同尺寸的屏幕不同尺寸的屏幕, 通過通過 autolayout設(shè)置不同的約束。設(shè)置不同的約束。高級軟件人才實作培訓專家!北京傳智播客教育 屏幕適配發(fā)展總結(jié)1.通過代碼計算 frame2.Autoresizing（設(shè)置控件與父控件的相對關(guān)系,從而實現(xiàn)間接設(shè)置frame， ios系統(tǒng)在運行時會根據(jù)設(shè)置的規(guī)則, 計算出對應的frame,無需手動計算frame）n通過設(shè)置子控件與父控件的關(guān)系來決定如何顯示控件3.autolayoutn通過設(shè)置某控件與任意其他控件間的關(guān)系來決定如何顯示這個控件, 不僅僅局限與父子控件4.size class

6、esn通過 size classes + autolayout實現(xiàn)針對不同屏幕為控件設(shè)置不同的約束高級軟件人才實作培訓專家!北京傳智播客教育 注意n注意: 無論是通過 autoresizing 還是 autolayout 其實只是間接設(shè)置了控件的 frame, 所以一旦使用了 autoreszing 或者 autolayout 那么就不要在直接設(shè)置 frame 了, 否者可能產(chǎn)生混亂。高級軟件人才實作培訓專家!北京傳智播客教育 nAutoresizingnAutolayoutn并且： autoresizing 和autolayout 二者是互斥的，同時只能使用其中一種，當使用autoresiz

7、ing的時候必須禁用autolayout, 當使用autolayout的時候就無法使用Autoresizing了。高級軟件人才實作培訓專家!北京傳智播客教育 高級軟件人才實作培訓專家!北京傳智播客教育 高級軟件人才實作培訓專家!北京傳智播客教育 介紹 autoresizing的使用n只是為了介紹, 以后不要用 autoresizing, 都用 autolayoutnautoresizing 和 autolayout只能用其一n當使用 autoresizing 的時候就無法使用 autolayout, 反之亦然。高級軟件人才實作培訓專家!北京傳智播客教育 案例1:n要求：n1. 在控制器的 vi

8、ew 的四角放四個高寬都為100的 UIView。n2. 在不同尺寸的屏幕下都可以正確顯示在四角。n目的: 說明 autoresizing 外面4根線的作用。n步驟:n1 選擇3.5 inch的控制器, 在四角放四個 UIView, 設(shè)置寬高都是100, 并設(shè)置不同背景顏色n2 分別演示在iPhone4S iPhone5s iPhone6 不同模擬器下的效果（同時演示橫屏下效果也不正常）, 說明如果不做屏幕適配, 那么在不同的模擬器下效果不正常n3 通過 autoresizing解決布局問題, 首先取消掉 autolayout。n4 選中對應的子控件, 點擊工具箱中的Size Inspecto

9、r(小尺子)n5 找到 autoresizing的屬性框, 通過設(shè)置是否需要外面的4根線來實現(xiàn)屏幕適配高級軟件人才實作培訓專家!北京傳智播客教育 案例1: 總結(jié)n外面四根線的含義: n當前控件與父控件之間是否保持固定的距離。如果選擇了外面的線則表示與父控件某一邊的距離固定, 如果不勾選, 則表示當前控件與父控件的某一邊距離是可拉伸的（不固定）。高級軟件人才實作培訓專家!北京傳智播客教育 案例2:n要求:n1. 在界面上放置兩個 UIViewn2. 藍色 UIView, 200*200；紅色 UIView 100*100n3.紅色 UIViwe 要放在藍色 UIView的里面n4.當藍色 UIV

10、iew的寬高發(fā)生改變的時候, 要求紅色 UIView的寬高也隨著改變n目的: 說明 autoresizing里面的兩根線的作用n步驟: 先把內(nèi)部的紅色 UIView 的 autoresizing 都刪除, 然后把 autoresizing 中間的兩根線勾上。n注意 :通過在 xcode 中修改屬性中藍色 UIView的大小來演示紅色 UIView 跟隨變化的效果。高級軟件人才實作培訓專家!北京傳智播客教育 案例2: 總結(jié)n里面兩根線的作用:n 表示子控件的寬和高是否隨著父控件的寬高的變化而變化高級軟件人才實作培訓專家!北京傳智播客教育 案例3：通過代碼實現(xiàn) autoresizingn目的: 為

11、了在工作中遇到舊的項目是通過代碼實現(xiàn)的 autoresizing時可以應付自如。舊的項目還有沒 storyboard。n注意注意: 這里一定要用純代碼的方式創(chuàng)建每一個控件, 拖上來的控件默認設(shè)置了一些屬性, 會造成運行效果不正確高級軟件人才實作培訓專家!北京傳智播客教育 案例3：步驟n1 通過代碼創(chuàng)建一個藍色 UIView, 200*200n2 在這個藍色 UIView里創(chuàng)建一個紅色 UIView, 200*50, 這個紅色 UIView放在在藍色 UIView的最底部: x = 0, y = 150n3 要求: 當藍色 UIView發(fā)生變化時（寬和高改變時）, 紅色 UIView的寬隨著藍色

12、 UIView的寬度變化（紅色 UIView的高度始終保持不變）, 并且永遠緊貼在藍色UIView底部顯示。n4 為按鈕注冊單擊事件, 點擊按鈕的時候動態(tài)改變藍色 UIView的高度和寬度, 觀察里面紅色 UIView的變化n5 為紅色 UIView設(shè)置寬度隨著父控件變化而變化、頂部自由伸縮（也就是底部緊貼父控件的底部）就可以了。nredVw.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;高級軟件人才實作培訓專家!北京傳智播客教育 高級軟件人才實作培訓專家!北京傳

13、智播客教育 高級軟件人才實作培訓專家!北京傳智播客教育 什么是Autolayout - 自動布局pAutolayout是一種“自動布局”技術(shù)，專門用來布局UI界面的pAutolayout自iOS 6開始引入，由于Xcode 4的不給力，當時并沒有得到很大推廣p自iOS 7（Xcode 5）開始，Autolayout的開發(fā)效率得到很大的提升p蘋果官方也推薦開發(fā)者盡量使用Autolayout來布局UI界面pAutolayout能很輕松地解決屏幕適配的問題高級軟件人才實作培訓專家!北京傳智播客教育 Autolayout的2個核心概念p參照p通過參照其他控件或父控件來設(shè)置當前控件的位置和大小p約束Co

14、nstraint(規(guī)則)p通過添加約束限制控件的位置和大小高級軟件人才實作培訓專家!北京傳智播客教育 autoresizing 無法解決的問題高級軟件人才實作培訓專家!北京傳智播客教育 autoresizing 無法解決的問題高級軟件人才實作培訓專家!北京傳智播客教育 介紹自動布局所使用的按鈕高級軟件人才實作培訓專家!北京傳智播客教育 介紹自動布局所使用的按鈕n分別介紹自動布局的每個按鈕。高級軟件人才實作培訓專家!北京傳智播客教育 Autolayout的警告和錯誤n警告p控件的frame不匹配所添加的約束, 比如比如約束控件的寬度為100, 而控件現(xiàn)在的寬度是110n錯誤p缺乏必要的約束, 比

15、如只約束了寬度和高度, 沒有約束具體的位置p兩個約束沖突, 比如1個約束控件的寬度為100, 1個約束控件的寬度為110高級軟件人才實作培訓專家!北京傳智播客教育 案例1：（控制器都使用600*600來做）n需求：設(shè)置一個寬150，高30的按鈕始終顯示在屏幕的正中央（水平居中對齊、垂直居中對齊）n思路：設(shè)置水平居中約束、垂直居中約束、高和寬的約束高級軟件人才實作培訓專家!北京傳智播客教育 案例2: n設(shè)置一個 UIView 無論在任何屏幕下距離上下左右四個邊的距離都是50。思路：設(shè)置距離四周的 margin 為50.高級軟件人才實作培訓專家!北京傳智播客教育 案例3：n距離左右20, 兩個 V

16、iew 之間間隔始終是20, 兩個 View 的高度都是50。寬度不定。（演示使用多種方式都可以實現(xiàn)）n注意：設(shè)置右邊相對于某個控件的margin （間距）的時候, 如果當前控件的右邊沒有那個控件，則無法選擇。高級軟件人才實作培訓專家!北京傳智播客教育 案例4:n在控制器view頂部添加2個view，1個藍色，1個紅色p2個view高度永遠相等, 50p紅色view和藍色view右邊對齊p藍色view距離父控件左邊、右邊、上邊間距相等，30p藍色view距離紅色view間距固定，30p紅色view的左邊和父控件的中點對齊(或者紅色 View的寬度是藍色 View 的一半)高級軟件人才實作培訓專

17、家!北京傳智播客教育 高級軟件人才實作培訓專家!北京傳智播客教育 案例5：n完成“史上最牛的游戲”首頁p添加對應的6個button和背景圖片，適配3.5 inch、4.0 inch高級軟件人才實作培訓專家!北京傳智播客教育 n注意：按鈕、開關(guān)、文本框等控件不設(shè)置高、寬的約束也可以，因為這些控件的高、寬都有默認值。高級軟件人才實作培訓專家!北京傳智播客教育 案例6n橫豎屏效果如圖所示高級軟件人才實作培訓專家!北京傳智播客教育 添加約束的規(guī)則（1）n在創(chuàng)建約束之后，需要將其添加到作用的view上n在添加時要注意目標view需要遵循以下規(guī)則：p1）對于兩個同層級view之間的約束關(guān)系，添加到它們的父

18、view上高級軟件人才實作培訓專家!北京傳智播客教育 添加約束的規(guī)則（2）n2）對于兩個不同層級view之間的約束關(guān)系，添加到他們最近的共同父view上高級軟件人才實作培訓專家!北京傳智播客教育 添加約束的規(guī)則（3）n3）對于有層次關(guān)系的兩個view之間的約束關(guān)系，添加到層次較高的父view上高級軟件人才實作培訓專家!北京傳智播客教育 n總結(jié): 如果添加的約束和其它控件沒有關(guān)系, 會添加到自己身上n總結(jié):如果是父子關(guān)系, 設(shè)置子控件的約束, 約束會添加到父控件上n注意: 兩個控件是兄弟關(guān)系n總結(jié): 如果是兄弟關(guān)系, 設(shè)置兩兄弟的約束, 約束會添加到第一個共同的父控件上高級軟件人才實作培訓專家!

19、北京傳智播客教育 代碼實現(xiàn)Autolayoutn代碼實現(xiàn)Autolayout的步驟p利用NSLayoutConstraint類創(chuàng)建具體的約束對象p添加約束對象到相應的view上- (void)addConstraint:(NSLayoutConstraint *)constraint;- (void)addConstraints:(NSArray *)constraints;n代碼實現(xiàn)Autolayout的注意點p1 要先禁止autoresizing功能，設(shè)置view的下面屬性為NOview.translatesAutoresizingMaskIntoConstraints = NO;p2 添

20、加約束之前，一定要保證相關(guān)控件都已經(jīng)在各自的父控件上p3不用再給view設(shè)置frame高級軟件人才實作培訓專家!北京傳智播客教育 NSLayoutConstraintn一個NSLayoutConstraint對象就代表一個約束n創(chuàng)建約束對象的常用方法+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFlo

21、at)multiplier constant:(CGFloat)c;pview1 ：要約束的控件pattr1 ：約束的類型（做怎樣的約束）prelation ：與參照控件之間的關(guān)系pview2 ：參照的控件pattr2 ：約束的類型（做怎樣的約束）pmultiplier ：乘數(shù)pc ：常量n自動布局有個核心公式perty1 =（perty2 * multiplier）+ constant value高級軟件人才實作培訓專家!北京傳智播客教育 案例4用代碼實現(xiàn)n/ 創(chuàng)建藍色Viewn/ 創(chuàng)建紅色n/ 禁止 autoresizingn/ 創(chuàng)建約束n/ 創(chuàng)建藍色 Vi

22、ew的約束n/ 距離左邊30n/ 距離上邊30n/ 距離右邊30n/ 高度50n/ 創(chuàng)建紅色 View 的約束n/ 紅色 view 的高度n/ 紅色 view 的寬度等于藍色n/ 紅色 view 與藍色 view 的間距 topn/ 紅色 view與 藍色 view 右對齊高級軟件人才實作培訓專家!北京傳智播客教育 基于Autolayout的動畫n在修改了約束之后，只要執(zhí)行下面代碼，就能做動畫效果UIView animateWithDuration:1.0 animations: 添加了約束的view layoutIfNeeded;思路：通過添加約束后，在修改約束的值，來實現(xiàn)動畫。注意：調(diào)用

23、某個 view 的layoutIfNeeded方法, 會先更新這個 view 的約束, 這個 view 的子控件的約束, 這個 View的父控件的約束。高級軟件人才實作培訓專家!北京傳智播客教育 Size Classes 介紹n從 iOS8開始才支持 size classes。nsize classes本質(zhì)就是對所有的屏幕進行了分類, 我們可以為不同類型的屏幕設(shè)置不同的約束n僅僅是對屏幕進行了分類, 真正排布UI元素還得使用autolayoutn不再有橫豎屏的概念, 只有屏幕尺寸的概念n不再有具體尺寸的概念, 只有抽象尺寸的概念n把寬度和高度各分為3種情況n1 any(任意, 表示既可以是 c

24、ompact, 也可以是 regular), 一般用 * 表示n2 compact(緊湊, 小), 一般用 - 表示n3 regular(正常, 大), 一般用 + 表示高級軟件人才實作培訓專家!北京傳智播客教育 sizeclass和autolayout關(guān)系nsizeclass:僅僅是對屏幕進行了分類nautolayout:對屏幕中各種元素進行約束(位置尺寸)高級軟件人才實作培訓專家!北京傳智播客教育 size classes 案例1:n案例1: 在所有豎屏的 iPhone上左上角有一個開關(guān), 在所有 iPad 上, 右下角顯示開關(guān)。n步驟:n0 在 any 和 any 的情況下拽一個開關(guān)。n1 先選中控件, 在右側(cè)設(shè)置 Installed 屬性, 告訴 xcode 在哪種屏幕下要顯示這個控件n2 選擇底部菜單欄的size classes菜單項, 設(shè)置在特定的屏幕下如何顯示(設(shè)置約束)n* 注意: 默認情況下 Installed表示 Any 和 Any, 也就意味著默認情況下在任何屏幕下都顯示這個控件高級軟件人才實作培訓專家!北京傳智播客教育 size classes 案例2:n案例2: 在所有橫屏的 iPhone上右上角有一個開關(guān)。n步驟：n1 在所有 iPhone的橫屏下安裝這個開關(guān)。n2 切換到橫屏下