一、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
二、學習鏈接
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/自學:
在Autolayout中如果是對ScorllerView和TableView是需要特殊處理
而且在ios8中相比ios7 , TableView還需要更進一步的處理
江哥提示:TableView中使用Autolayout
1).https://github.com/smileyborg/TableViewCellWithAutoLayout
2).https://github.com/smileyborg/TableViewCellWithAutoLayoutiOS8
