第10天配套源碼自動布局autolayout

1、Autolayout-自動布局iOS學(xué)院簡介-iPhone屏幕適配的發(fā)展過程直接使用 frame 計(jì)算控件的位置、大小(MagicNumber)iPhone3GS iPhone4 iPhone4S 屏幕的物理尺寸是一樣的(無需屏幕適配), 而且一個應(yīng)用要么是橫屏要么是豎屏, 不存在能同時進(jìn)行橫豎屏切換的應(yīng)用使用 autoresizing進(jìn)行屏幕適配（設(shè)置顯示規(guī)則，只能按照父控件來設(shè)置參照）隨著iPad 的發(fā)布, 屏幕物理大小發(fā)生了變化, 并且要求部分應(yīng)用程序?qū)崿F(xiàn)橫豎屏切換，所以不能把控件的 frame 都寫死了，需要進(jìn)行屏幕適配。autoresizing的核心思想就是：參照父容器來設(shè)置子控件的

2、 frame。不再寫死 frame, 而是參照。舉例: 在豎屏下有一個按鈕要占據(jù)整個屏幕寬度, 當(dāng)切換到橫屏下以后同樣要占據(jù)整個屏幕的寬度注意: autoresizing只能設(shè)置當(dāng)前控件與父控件之間的相對關(guān)系簡介-iPhone屏幕適配的發(fā)展過程使用 autolayout（從 iOS6開始）進(jìn)行屏幕適配隨著 iPhone5 iPhone5s 等的發(fā)布蘋果設(shè)備不同尺寸的屏幕變得越來越多, 不僅要求能根據(jù)控件父子關(guān)系來設(shè)置相對位置, 也要求能根據(jù)任意控件之間的關(guān)系來設(shè)置位置因?yàn)?autoresizing只能設(shè)置當(dāng)期控件與父控件之間的相對關(guān)系, 當(dāng)遇到要設(shè)置兄弟控件之間的關(guān)系的時候 autoresiz

3、ing就無能為力了舉例: 在豎屏下, 屏幕底部有兩個按鈕, 這兩個按鈕的間距為一個固定的值(寬度不指定); 當(dāng)切換為橫屏的時候要求這兩個按鈕還顯示在屏幕底部, 并且按鈕間的間距不變, 按鈕可以隨之變寬。簡介-iPhone屏幕適配的發(fā)展過程使用 size classes + autolayout 進(jìn)行屏幕適配當(dāng) iPhone6發(fā)布以后, 蘋果設(shè)備的屏幕越來越多(以后也可能出現(xiàn)更多不同大小的屏幕), 為了能更容易的適配不同的屏幕, 蘋果推出了size classes 技術(shù)通過 autolayout設(shè)置的約束, 約束一旦添加就會應(yīng)用于各種屏幕（也就是說在各種不同的屏幕下都使用相同的約束）通過 siz

4、e classes + autolayout的方式, 可以為不同尺寸的屏幕設(shè)置不同的約束舉例: 在3.5 inch的屏幕下希望某個按鈕緊貼屏幕上邊顯示, 但是當(dāng)屏幕變成4.7 inch以后, 則希望該按鈕顯示到屏幕的正中央size classes技術(shù)主要解決的問題: 為不同尺寸的屏幕, 通過 autolayout設(shè)置不同的約束。屏幕適配發(fā)展總結(jié)通過代碼計(jì)算 frameAutoresizing（設(shè)置控件與父控件的相對關(guān)系,從而實(shí)現(xiàn)間接設(shè)置frame， ios系統(tǒng)在運(yùn)行時會根據(jù)設(shè)置的規(guī)則, 計(jì)算出對應(yīng)的frame,無需手動計(jì)算frame）通過設(shè)置子控件與父控件的關(guān)系來決定如何顯示控件Autolay

5、out(自動布局)通過設(shè)置某控件與任意其他控件間的關(guān)系來決定如何顯示這個控件, 不僅僅局限與父子控件size classes通過 size classes + autolayout實(shí)現(xiàn)針對不同屏幕為控件設(shè)置不同的約束注意注意: 無論是通過 autoresizing 還是 autolayout 其實(shí)只是間接設(shè)置了控件的 frame, 所以一旦使用了 autoreszing 或者 autolayout 那么就不要在直接設(shè)置 frame 了, 否者可能產(chǎn)生混亂。AutoresizingAutolayout并且： autoresizing 和autolayout 二者是互斥的，同時只能使用其中一種，當(dāng)

6、使用autoresizing的時候必須禁用autolayout, 當(dāng)使用autolayout的時候就無法使用Autoresizing了。介紹 autoresizing的使用只是為了介紹, 以后不要用 autoresizing, 都用 autolayoutautoresizing 和 autolayout只能用其一當(dāng)使用 autoresizing 的時候就無法使用 autolayout, 反之亦然。案例1:要求：1. 在控制器的 view 的四角放四個高寬都為100的 UIView。2. 在不同尺寸的屏幕下都可以正確顯示在四角。目的: 說明 autoresizing 外面4根線的作用。步驟:1

7、選擇3.5 inch的控制器, 在四角放四個 UIView, 設(shè)置寬高都是100, 并設(shè)置不同背景顏色2 分別演示在iPhone4S iPhone5s iPhone6 不同模擬器下的效果（同時演示橫屏下效果也不正常）, 說明如果不做屏幕適配, 那么在不同的模擬器下效果不正常3 通過 autoresizing解決布局問題, 首先取消掉 autolayout。4 選中對應(yīng)的子控件, 點(diǎn)擊工具箱中的Size Inspector(小尺子)5 找到 autoresizing的屬性框, 通過設(shè)置是否需要外面的4根線來實(shí)現(xiàn)屏幕適配案例1: 總結(jié)外面四根線的含義: 當(dāng)前控件與父控件之間是否保持固定的距離。如果

8、選擇了外面的線則表示與父控件某一邊的距離固定, 如果不勾選, 則表示當(dāng)前控件與父控件的某一邊距離是可拉伸的（不固定）。案例2:要求:1. 在界面上放置兩個 UIView2. 藍(lán)色 UIView, 200*200；紅色 UIView 100*1003.紅色 UIViwe 要放在藍(lán)色 UIView的里面4.當(dāng)藍(lán)色 UIView的寬高發(fā)生改變的時候, 要求紅色 UIView的寬高也隨著改變目的: 說明 autoresizing里面的兩根線的作用步驟: 先把內(nèi)部的紅色 UIView 的 autoresizing 都刪除, 然后把 autoresizing 中間的兩根線勾上。注意 :通過在 xcode

9、中修改屬性中藍(lán)色 UIView的大小來演示紅色 UIView 跟隨變化的效果。案例2: 總結(jié)里面兩根線的作用: 表示子控件的寬和高是否隨著父控件的寬高的變化而變化案例3：通過代碼實(shí)現(xiàn) autoresizing目的: 為了在工作中遇到舊的項(xiàng)目是通過代碼實(shí)現(xiàn)的 autoresizing時可以應(yīng)付自如。舊的項(xiàng)目還有沒 storyboard。注意: 這里一定要用純代碼的方式創(chuàng)建每一個控件, 拖上來的控件默認(rèn)設(shè)置了一些屬性, 會造成運(yùn)行效果不正確案例3：步驟1 通過代碼創(chuàng)建一個藍(lán)色 UIView, 200*2002 在這個藍(lán)色 UIView里創(chuàng)建一個紅色 UIView, 200*50, 這個紅色 UIV

10、iew放在在藍(lán)色 UIView的最底部: x = 0, y = 1503 要求: 當(dāng)藍(lán)色 UIView發(fā)生變化時（寬和高改變時）, 紅色 UIView的寬隨著藍(lán)色 UIView的寬度變化（紅色 UIView的高度始終保持不變）, 并且永遠(yuǎn)緊貼在藍(lán)色UIView底部顯示。4 為按鈕注冊單擊事件, 點(diǎn)擊按鈕的時候動態(tài)改變藍(lán)色 UIView的高度和寬度, 觀察里面紅色 UIView的變化5 為紅色 UIView設(shè)置寬度隨著父控件變化而變化、頂部自由伸縮（也就是底部緊貼父控件的底部）就可以了。redVw.autoresizingMask = UIViewAutoresizingFlexibleWidt

11、h | UIViewAutoresizingFlexibleTopMargin;什么是Autolayout - 自動布局Autolayout是一種“自動布局”技術(shù)，專門用來布局UI界面的Autolayout自iOS 6開始引入，由于Xcode 4的不給力，當(dāng)時并沒有得到很大推廣自iOS 7（Xcode 5）開始，Autolayout的開發(fā)效率得到很大的提升蘋果官方也推薦開發(fā)者盡量使用Autolayout來布局UI界面Autolayout能很輕松地解決屏幕適配的問題參照約束（規(guī)則）Autolayout的2個核心概念參照通過參照其他控件或父控件來設(shè)置當(dāng)前控件的位置和大小約束Constraint(規(guī)

12、則)通過添加約束限制控件的位置和大小autoresizing 無法解決的問題autoresizing 無法解決的問題介紹自動布局所使用的按鈕介紹自動布局所使用的按鈕分別介紹自動布局的每個按鈕。Autolayout的警告和錯誤警告控件的frame不匹配所添加的約束, 比如比如約束控件的寬度為100, 而控件現(xiàn)在的寬度是110錯誤缺乏必要的約束, 比如只約束了寬度和高度, 沒有約束具體的位置兩個約束沖突, 比如1個約束控件的寬度為100, 1個約束控件的寬度為110案例1：（控制器都使用600*600來做）需求：設(shè)置一個寬150，高30的按鈕始終顯示在屏幕的正中央（水平居中對齊、垂直居中對齊）思路

13、：設(shè)置水平居中約束、垂直居中約束、高和寬的約束分析每一個約束是什么意思：找公式、規(guī)律。解釋設(shè)置左右邊距的時候16的問題原因：在 iPhone6 Plus 上怕手誤觸摸屏幕（單手握手機(jī)）案例2: 設(shè)置一個 UIView 無論在任何屏幕下距離上下左右四個邊的距離都是50。思路：設(shè)置距離四周的 margin 為50.案例3：距離左右20, 兩個 View 之間間隔始終是20, 兩個 View 的高度都是50。寬度不定。（演示使用多種方式都可以實(shí)現(xiàn)）注意：設(shè)置右邊相對于某個控件的margin （間距）的時候, 如果當(dāng)前控件的右邊沒有那個控件，則無法選擇。案例4:在控制器view頂部添加2個view，1

14、個藍(lán)色，1個紅色2個view高度永遠(yuǎn)相等, 50紅色view和藍(lán)色view右邊對齊藍(lán)色view距離父控件左邊、右邊、上邊間距相等，30藍(lán)色view距離紅色view間距固定，30紅色view的左邊和父控件的中點(diǎn)對齊(或者紅色 View的寬度是藍(lán)色 View 的一半)案例5：完成“史上最牛的游戲”首頁添加對應(yīng)的6個button和背景圖片，適配所有屏幕。注意：按鈕、開關(guān)、文本框、標(biāo)簽（UILabel）圖片框等控件不設(shè)置高、寬的約束也可以，因?yàn)檫@些控件的高、寬都有默認(rèn)值。添加約束的規(guī)則（1）在創(chuàng)建約束之后，需要將其添加到作用的view上在添加時要注意目標(biāo)view需要遵循以下規(guī)則：1）對于兩個同層級vi

15、ew之間的約束關(guān)系，添加到它們的父view上添加約束的規(guī)則（2）2）對于兩個不同層級view之間的約束關(guān)系，添加到他們最近的共同父view上添加約束的規(guī)則（3）3）對于有層次關(guān)系的兩個view之間的約束關(guān)系，添加到層次較高的父view上總結(jié): 如果添加的約束和其它控件沒有關(guān)系, 會添加到自己身上總結(jié):如果是父子關(guān)系, 設(shè)置子控件的約束, 約束會添加到父控件上注意: 兩個控件是兄弟關(guān)系總結(jié): 如果是兄弟關(guān)系, 設(shè)置兩兄弟的約束, 約束會添加到第一個共同的父控件上代碼實(shí)現(xiàn)Autolayout代碼實(shí)現(xiàn)Autolayout的步驟利用NSLayoutConstraint類創(chuàng)建具體的約束對象添加約束對象到

16、相應(yīng)的view上- (void)addConstraint:(NSLayoutConstraint *)constraint;- (void)addConstraints:(NSArray *)constraints;代碼實(shí)現(xiàn)Autolayout的注意點(diǎn)1 要先禁止autoresizing功能，設(shè)置view的下面屬性為NOview.translatesAutoresizingMaskIntoConstraints = NO;2 添加約束之前，一定要保證相關(guān)控件都已經(jīng)在各自的父控件上3不用再給view設(shè)置frameNSLayoutConstraint一個NSLayoutConstraint對象就

17、代表一個約束創(chuàng)建約束對象的常用方法+(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 ：與參照控件之間的關(guān)系view2 ：參照的控件attr2 ：約束

18、的類型（做怎樣的約束）multiplier ：乘數(shù)c ：常量自動布局有個核心公式perty1 =（perty2 * multiplier）+ constant value案例4用代碼實(shí)現(xiàn)/ 創(chuàng)建藍(lán)色View/ 創(chuàng)建紅色/ 禁止 autoresizing/ 創(chuàng)建約束/ 創(chuàng)建藍(lán)色 View的約束/ 距離左邊30/ 距離上邊30/ 距離右邊30/ 高度50/ 創(chuàng)建紅色 View 的約束/ 紅色 view 的高度/ 紅色 view 的寬度等于藍(lán)色/ 紅色 view 與藍(lán)色 view 的間距 top/ 紅色 view與 藍(lán)色 view 右對齊基于Autolayout的動畫

19、在修改了約束之后，只要執(zhí)行下面代碼，就能做動畫效果UIView animateWithDuration:1.0 animations: 添加了約束的view layoutIfNeeded;思路：通過添加約束后，在修改約束的值，來實(shí)現(xiàn)動畫。注意：調(diào)用 某個 view 的layoutIfNeeded方法, 會先更新這個 view 的約束, 這個 view 的子控件的約束, 這個 View的父控件的約束。說明需要將layoutIfNeeded放到動畫中，而修改約束的代碼不需要放到動畫中，原因是只有在layoutIfNeeded方法中才會修改 frame, 修改約束的代碼，只是修改了約束還沒有更新 f

20、rame 呢。當(dāng)修改了約束以后, 系統(tǒng)會自動在生命周期的某個方法中修改 frame, 或者手動調(diào)用layoutIfNeeded來更新 frameUIView animateWithDuration:1.0 animations: 添加了約束的view layoutIfNeeded;Size Classes 介紹從 iOS8開始才支持 size classes。size classes本質(zhì)就是對所有的屏幕進(jìn)行了分類, 我們可以為不同類型的屏幕設(shè)置不同的約束僅僅是對屏幕進(jìn)行了分類, 真正排布UI元素還得使用autolayout不再有橫豎屏的概念, 只有屏幕尺寸的概念不再有具體尺寸的概念, 只有抽象

21、尺寸的概念具體尺寸：寬：320，高：480抽象尺寸：寬：小一點(diǎn)的，高：大一點(diǎn)的把寬度和高度各分為3種情況1 compact(緊湊, 小), 一般用 - 表示2 regular(正常, 大), 一般用 + 表示3 any(任意, 表示既可以是 compact, 也可以是 regular), 一般用 * 表示sizeclass和autolayout關(guān)系sizeclass:僅僅是對屏幕進(jìn)行了分類autolayout:對屏幕中各種元素進(jìn)行約束(位置尺寸)不再有橫屏、豎屏概念，都是抽象的尺寸介紹 size classes 的屏幕分類把寬度和高度各分為3種情況1 compact(緊湊, 小), 一般用 -

22、 表示2 regular(正常, 大), 一般用 + 表示3 any(任意, 表示既可以是 compact, 也可以是 regular), 一般用 * 表示通過這三種情況把屏幕分為九類wAny 和 hAny （任意尺寸的屏幕） pact 和 pact（3.5-inch、4-inch、4.7-inch的 iPhone 的橫屏）wAny 和 pact（所有 iPhone 的橫屏）wRegular 和 pact（5.5-inch iPhone 的橫屏）wRegular 和 hAny（iPad豎屏或橫屏） pact 和 hAny（3.5-inch、4-inch、4.7-inch的 iPhone 豎屏或

23、橫屏） pact 和 hRegular（所有 iPhone 的豎屏）wAny 和 hRegular（所有 iPhone 的豎屏或 iPad 橫屏或豎屏）wRegular 和 hRegular（iPad 豎屏或橫屏）案例1: 要求: 設(shè)置一個開關(guān), 在所有屏幕下, 無論橫屏還是豎屏都顯示, 并且永遠(yuǎn)顯示在屏幕的正中央（水平、垂直居中對齊）。思路：1 在 wAny, hAny 下拖一個 UISwitch2 設(shè)置這個 UISwitch 水平、垂直居中顯示案例2：要求：1 在所有的 iPhone 豎屏下和 5.5 inch 的 iPhone 橫屏 下顯示一個開關(guān), 其他情況不顯示2 開關(guān)要水平、垂直居中顯示。思路：1 現(xiàn)在 wAny 和 hAny 下拽一個開關(guān)。2 選中開關(guān)安裝（Install）一個 pact 和 hRegular（所有的iPhone豎屏）3 選擇 size classes 為 pact 和 hRegular，然后設(shè)置約束為水平、垂直居中對齊。4 選中開關(guān), 安裝（Install）一個 wRegular 和 pact(5.5 inch 橫屏)。5 選擇 size classes 為 wRegular 和 pact, 然后設(shè)置約束然后設(shè)置約束為水平、垂直居中對齊。6 選中開關(guān)，