屏幕適配的總結筆記

一、屏幕適配-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。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容