iOS 自動(dòng)布局Autolayout

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20、加約束之前，一定要保證相關(guān)控件都已經(jīng)在各自的父控件上p3不用再給view設(shè)置frame高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家!北京傳智播客教育 NSLayoutConstraintn一個(gè)NSLayoutConstraint對(duì)象就代表一個(gè)約束n創(chuàng)建約束對(duì)象的常用方法+(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 ：約束的類(lèi)型（做怎樣的約束）prelation ：與參照控件之間的關(guān)系pview2 ：參照的控件pattr2 ：約束的類(lèi)型（做怎樣的約束）pmultiplier ：乘數(shù)pc ：常量n自動(dòng)布局有個(gè)核心公式perty1 =（perty2 * multiplier）+ constant value高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家!北京傳智播客教育 案例4用代碼實(shí)現(xiàn)n/ 創(chuàng)建藍(lán)色Viewn/ 創(chuàng)建紅色n/ 禁止 autoresizingn/ 創(chuàng)建約束n/ 創(chuàng)建藍(lán)色 Vi

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

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

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