最近公司小伙伴在討論項(xiàng)目中效率問題,決定要改用Xib來創(chuàng)建界面,個人一直使用,所以我就做了個PPT,打算在這里做一個簡單的分享,話不多說,直接進(jìn)入主題:
一、Xib中三種常用的約束面板
-
1、Align: 對齊方式
-
2、Add New Constraint: 添加新的約束
當(dāng)然除了這種約束方式 ,還有一種是右鍵長按,拖到到想要創(chuàng)建約束的控件上,按住command鍵可以添加多個約束,如圖:
補(bǔ)充兩點(diǎn):
1. 添加新約束時,如果勾選了Constrain to margins,控件會自帶20的內(nèi)邊距
2. Aspect Ratio:設(shè)置視圖的寬高比
使用場景:
視圖寬度隨著屏幕寬度變化拉伸時,讓其高度自動進(jìn)行等比例拉伸,保持該視圖寬高比不變.
-
3、Resolve Auto Layout Issues : 修復(fù)自動布局問題
二、AutoLayout的四大使用原則
AutoLayout是為了確定View的Frame(確定View的Point和Size)。
-
1、至少添加四個約束,寬高和位置來確定frame
-
2、避免約束沖突
1.如同一個View的寬設(shè)置兩次,一個100,一個200,導(dǎo)致無法確定,形成沖突,沖突屬于錯誤,須解決:
2.如約束不夠,無法確定View的frame時候也會報錯:
-
3、AutoLayout的警告
警告一般是Xib中添加好了約束,但是對應(yīng)View沒有移動到對應(yīng)位置導(dǎo)致。這種情況程序運(yùn)行起來之后會是正確約束的樣子,而不是Xib中的樣子。
1.選中View,update frame 或使用快捷鍵‘command’ + ‘option’ + ‘=’
2.如圖:
-
4、約束的修改
約束的修改有很多種方式,下面列舉一種我常用的方式!
注意:上面說的Add New Constaints面板只能添加新的約束,修改不能在那里。
補(bǔ)充一點(diǎn):
約束可以理解為,兩個界面元素之間必須滿足的基于約束布局系統(tǒng)的關(guān)系。每個約束都是以下方式的線性表達(dá)式:
item1.attribute1 = multiplier × item2.attribute2 + constant
其中 item1, item2 表示兩個界面元素,attribute1, attribute2是兩個界面的布局屬性,是自動布局系統(tǒng)在滿足這些約束的過程中可以調(diào)整的變量,由 NSLayoutAttribute 定義,包括 left, right, top, bottom, leading, trailing, width, height, centerX, centerY 和 baseline等. 對于諸如英語這種從左至右閱讀的語言,leading 和 trailing 與 left 和 right 完全一樣,但是對于諸如 Hebrew 或者 Arabic 這種從右往左閱讀的語言,leading 與 right 相同,trailing 與 left 相同,通常情況下,我們使用 leading 和 trailing 較多。
如下圖可以理解為:view1.height = view2.height * 0.5 + 10
一個有效的約束是指有且僅有一種方案滿足所有約束。如果有多種方案或者沒有一個方案滿足所有約束,則這些自動布局都無效。對于 view 上的約束都是累加的,對于同一類型的約束不會覆蓋,例如,如果你已對 view 添加了一個寬度約束,再次對該 view 添加寬度約束并不會將之前的寬度約束移除或者將之前的寬度約束值修改為新的約束值,你必須將之前添加的寬度約束值手動移除。
另外,約束不僅限于等量關(guān)系,它還可以是(>=)或者(<=)來描述兩個屬性之間的關(guān)系,由 NSLayoutRelation 定義。約束還有 1 ~ 1000的優(yōu)先級(priority),優(yōu)先級為1000的約束為必須滿足,優(yōu)先級為 1 ~ 999 的約束為可選約束,數(shù)字越大其優(yōu)先級越高,其滿足的可能性越高,自動布局系統(tǒng)在滿足了所有優(yōu)先級為 1000 的約束后,會按照優(yōu)先級從高到低的順序滿足可選約束。默認(rèn)情況下,所有約束優(yōu)先級都是 1000,即必須滿足。
三、XIB 給 UIView 添加 CALayer 相關(guān)的屬性
1、設(shè)置圓角需要到的Key Path:
layer.cornerRadius , 注意該 key 對應(yīng) Value 的 type 應(yīng)該設(shè)置為 String
layer.masksToBounds , 注意該 key 對應(yīng) Value 的 type 應(yīng)該設(shè)置為 Boolean , 當(dāng)右側(cè)出現(xiàn)對號時為YES
2、設(shè)置邊框需要到的Key Path:
layer.borderWidth , 注意該 key 對應(yīng) Value 的 type 應(yīng)該設(shè)置為 String
layer.borderUIColor , 注意該 key 對應(yīng) Value 的 type 應(yīng)該設(shè)置為 Color
3、設(shè)置陰影需要到的Key Path:
layer.shadowOffset , 注意該 key 對應(yīng) Value 的 type 應(yīng)該設(shè)置為 Size
layer.shadowUIColor , 注意該 key 對應(yīng) Value 的 type 應(yīng)該設(shè)置為 Color
layer.shadowOpacity,注意該 key 對應(yīng) Value 的 type 應(yīng)該設(shè)置為 Number
layer.shadowRadius, 注意該 key 對應(yīng) Value 的 type 應(yīng)該設(shè)置為 Number
4、設(shè)置UITextField的私有屬性placeholderColor
placeholderLabel.textColor,注意該 key 對應(yīng) Value 的 type 應(yīng)該設(shè)置為 Color
四、XIB 屬性優(yōu)先級
在運(yùn)用過程中會發(fā)現(xiàn)并列的兩個 label需要一個優(yōu)先級的,就像下圖:
但是運(yùn)行起來發(fā)現(xiàn)事情并不是想像中的樣子???如圖:
那應(yīng)該怎么辦呢??選中右邊的Label控件,修改它的Horizontal橫向?qū)傩缘膬?yōu)先級,如圖:
神奇的事情發(fā)生了:
當(dāng)然還有一種辦法,拖拽兩個Label的層級關(guān)系也是可以的
五、XIB 使用SizeClass適配不同屏幕
項(xiàng)目中如果有用到橫豎屏幕效果圖不一樣的情況,可以用下面的方式:
介紹圖
在Xcode屏幕下方會有一個機(jī)型顯示,點(diǎn)擊顯示如下:
如下圖。Introduce Variations Based On: 如果只選中Width是 wC hAny類型,只選中Height是wAny hC類型,選中Width和Height是wC hC類型
如圖展示,已經(jīng)進(jìn)入wC hC類型
備注:如果需要進(jìn)去這個模式,開始的時候需要點(diǎn)擊Vary for Traits 和結(jié)束的時候需要點(diǎn)擊 Done Varying
接下來是各種情況的總結(jié):
iOS8推出的Size Class,可以讓我們在一個工程的storyboard中進(jìn)行所有尺寸屏幕的適配,把屏幕的寬和高分別分成兩種情況:Compact-緊湊, Regular-正常(Any-任意,其實(shí)就是這2種的組合)
w:Compact h:Compact - (w:Any h:Compact , w:Compact h:Any , w:Any h:Any)
w:Compact h:Compact - (w:Any h:Compact , w:Compact h:Any , w:Any h:Any)
w:Compact h:Regular - (w:Any h:Regular , w:Compact h:Any , w:Any h:Any)
w:Compact h:Regular - (w:Any h:Regular , w:Compact h:Any , w:Any h:Any)
機(jī)型說明
iPhone4S,iPhone5/5s,iPhone6,iPhone7,iPhone8
豎屏:(w:Compact h:Regular)
橫屏:(w:Compact h:Compact)
iPhone6 Plus,iPhone7Plus
豎屏:(w:Compact h:Regular)
橫屏:(w:Regular h:Compact)
iPad
豎屏:(w:Regular h:Regular)
橫屏:(w:Regular h:Regular)
備注:如果項(xiàng)目不支持橫屏顯示,使用w:Compact h:Regular(或者直接取消使用Size Class) 如果項(xiàng)目支持橫屏顯示,使用w:Compact h:Regular+w:Any h:Compact 對于一些公有的約束(任意組合中都適用),一般放在w:Any h:Any中設(shè)置
至此,Xib中的AutoLayout介紹和使用就已經(jīng)寫完了,如果還有什么項(xiàng)目中遇到的問題,或者有什么不明白的地方,歡迎各位私聊,我們一起探討一下!(PS:時隔兩年再次拾起了我的簡書)