一、屏幕適配-autoresizing簡單使用
1、為什么要屏幕適配?
> iphone手機屏幕尺寸呈現多樣化。
> 橫豎屏適配(ipad)
2、屏幕適配的發展過程。
> 純代碼計算frame適配--> autoresizing--> autolayout。
* autoresizing:ios7之前經常使用
* autolayout:ios6開始出現,ios7之后大范圍使用
> PPT介紹頁面布局的三個時期
3 autoresizing示例
//注意:autoresizing和autolayout是一般情況下不能共存,要開啟autoresizing(去掉Use Auto Layout)
3.1、通過storyboard講解autoresizing使用
> 在四個角放入4個控件運行查看兩種情況下默認的效果
> 依次設置4個控件autosizing周圍的線條講解四周線條含義(固定距離周圍的距離)
3.2、通過代碼實現autosizing
> 需求:藍色父控件和紅色小控件
/**
1.紅色工具條永遠粘著藍色父控件的底部
* 距離父控件底部、左邊、右邊的間距是固定的
* 距離父控件頂部的間距是伸縮的
2.紅色工具條的寬度永遠填充整個藍色父控件
* 自己的寬度跟隨父控件寬度的改變而伸縮(改變)
3.紅色工具條的高度永遠固定是44
*/
設置autoreizingMask屬性距離頂部可拉伸、寬度可拉伸。
> autoreizingMask每個枚舉值的含義如下:
/*
UIViewAutoresizingNone? ? ? ? ? ? ? ? = 0,
默認情況,父控件的尺寸修改了,子控件沒有任何反應
UIViewAutoresizingFlexibleLeftMargin? = 1 << 0,
距離父控件左邊的間距是伸縮的(右邊距離固定)
UIViewAutoresizingFlexibleWidth? ? ? ? = 1 << 1,
自己的寬度跟隨父控件寬度的改變而伸縮
UIViewAutoresizingFlexibleRightMargin? = 1 << 2,
距離父控件右邊的間距是伸縮的(左邊的距離固定)
UIViewAutoresizingFlexibleTopMargin? ? = 1 << 3,
距離父控件頂部的間距是伸縮的
UIViewAutoresizingFlexibleHeight? ? ? = 1 << 4,
自己的高度跟隨父控件高度的改變而伸縮
UIViewAutoresizingFlexibleBottomMargin = 1 << 5
距離父控件底部的間距是伸縮的
*/
> 切記:代碼中設置某個方向可伸縮代表另一個方向固定,(storyboard里面)中正好相反
二、Autolayout基本使用
1、autoresizing的缺陷
> 需求:如果想設置A控件和B控件之間距離固定。
> 無論如何Autosizing無法滿足需求,因為Autosizing是相對父控件計算的,不能單獨設置兩個子控件之間的相對位置。
> autolayout的出現就是為了擬補autoresizing的缺陷。
2、Autolayout簡單使用
> PPT介紹Autolayout基本概念
* 參照:就是一個控件可以參照另一個控件的位置
* 約束:就是限制條件。比如里兩個控件之間的距離是20
3、新建項目演示autolayout的基本使用。
> 驗證無法通過autoresizing來固定兩個子控件之間的間距。
> 使用autolayout來約束子控件的寬高和距離父控件上下左右的間距。
> 警告和錯誤
1)、警告(黃色提示)
* 控件的frame不匹配所添加的約束, 比如比如約束控件的寬度為100, 而控件現在的寬度是110
2)、錯誤(紅色提示)
* 缺乏必要的約束, 比如只約束了寬度和高度, 沒有約束具體的位置
* 兩個約束沖突, 比如1個約束控件的寬度為100, 1個約束控件的寬度為110
> Top Layout Guide? ? 上面的參照線
> Bottom Layout Guide? 下面的參照線
三、Autolayout其它用法
1、約束兩個子控件
> 寬高相等
> 垂直方向距離固定20
> 兩個子控件永遠在父控件中間
四、Autolayout練習(PPT)
五、Autolayout代碼實現
1、使用代碼實現AutoLayout的注意點。
> 要先禁止autoresizing功能,設置view的下面屬性為NO
view.translatesAutoresizingMaskIntoConstraints = NO;
> 添加約束之前,一定要保證相關控件都已經在各自的父控件上
> 不用再給view設置frame
2、代碼實現Autolayout概念(PPT講解)
> 對照公式講解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,? ? ? ? //大于等于
};
*/
3、代碼實現AutoLayout(PPT練習2)
> 添加控件并禁止Autoresizing
> 創建藍色控件約束(高度、距離左邊、頂部、右邊)
> 創建紅色控件約束(右邊等于藍色、高度等于藍色、頂部對齊藍色底部、寬度等于藍色一半)
4、VFL
> VFL基本概念(PPT)
> 利用VFL實現PPT練習2
* 注意在設置垂直方向屬性時設置右對齊
* 注意VFL語句中不能有乘除法(還需要代碼寫約束配合)
/***? 利用VFL語言生成約束*/
NSString *vfl = @"V:|-padding-[blueView(40)]-padding-[redView(==blueView)]";
NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
NSDictionary *metrics = @{@"padding" : @20};
NSArray *contrains = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:0 metrics:metrics views:views];
/*
Autolayout基礎知識
http://commandshift.co.uk/blog/2013/02/20/creating-individual-layout-constraints/
http://commandshift.co.uk/blog/2013/01/31/visual-format-language-for-autolayout/
*/
/*
TableView中使用Autolayout (MeXXX)
https://github.com/smileyborg/TableViewCellWithAutoLayout
https://github.com/smileyborg/TableViewCellWithAutoLayoutiOS8
注意:利用Autolayout約束UIScrollView和TableView需要特殊處理
*/
5、AutoLayout動畫(PPT)
> 每個約束都是NSLayoutConstraint對象,可以修改該對象的constant調整控件的布局然后調用layoutIfNeeded更新布局
6、UILabel使用autolayout(PPT)
六、sizeclass
1> 發展歷程
代碼計算frame -> autoreszing(父控件和子控件的關系) -> autolayout(任何控件都可以產生關系) -> sizeclass
2> sizeclass
* 僅僅是對屏幕進行了分類, 真正排布UI元素還得使用autolayout
* 不再有橫豎屏的概念, 只有屏幕尺寸的概念
* 不再有具體尺寸的概念, 只有抽象尺寸的概念
* 把寬度和高度各分為3種情況
1) Compact : 緊湊(小)
2) Any : 任意
3) Regular : 寬松(大)
4) 符號代表
- : Compact
* : Any
+ : Regular
5) 繼承性(不建議大家使用Any)
* * : 其它8種情況都會繼承
* - : 會被- - \ + -繼承
+ * : 會被+ - \ + +繼承
6) sizeclass和autolayout的作用
sizeclass:僅僅是對屏幕進行了分類
autolayout:對屏幕中各種元素進行約束(位置\尺寸)
7) 從xcode6開始,iPhone&ipad的開發可以使用同一個 stroyboard。