iOS Xib中AutoLayout介紹和使用

最近公司小伙伴在討論項(xiàng)目中效率問題,決定要改用Xib來創(chuàng)建界面,個人一直使用,所以我就做了個PPT,打算在這里做一個簡單的分享,話不多說,直接進(jìn)入主題:

一、Xib中三種常用的約束面板

01常用約束面版.png
  • 1、Align: 對齊方式

02對齊方式.png
  • 2、Add New Constraint: 添加新的約束

03添加新約束01.png
當(dāng)然除了這種約束方式 ,還有一種是右鍵長按,拖到到想要創(chuàng)建約束的控件上,按住command鍵可以添加多個約束,如圖:
03添加新約束02

補(bǔ)充兩點(diǎn):

1. 添加新約束時,如果勾選了Constrain to margins,控件會自帶20的內(nèi)邊距
margin.png
2. Aspect Ratio:設(shè)置視圖的寬高比

使用場景:
視圖寬度隨著屏幕寬度變化拉伸時,讓其高度自動進(jìn)行等比例拉伸,保持該視圖寬高比不變.


. Aspect Ratio.png
  • 3、Resolve Auto Layout Issues : 修復(fù)自動布局問題

04修復(fù)自動布局問題.png

二、AutoLayout的四大使用原則

AutoLayout是為了確定View的Frame(確定View的Point和Size)。

  • 1、至少添加四個約束,寬高和位置來確定frame

  • 2、避免約束沖突

1.如同一個View的寬設(shè)置兩次,一個100,一個200,導(dǎo)致無法確定,形成沖突,沖突屬于錯誤,須解決:
05避免約束沖突.png
2.如約束不夠,無法確定View的frame時候也會報錯:
06約束.png
  • 3、AutoLayout的警告

警告一般是Xib中添加好了約束,但是對應(yīng)View沒有移動到對應(yīng)位置導(dǎo)致。這種情況程序運(yùn)行起來之后會是正確約束的樣子,而不是Xib中的樣子。

1.選中View,update frame 或使用快捷鍵‘command’ + ‘option’ + ‘=’
2.如圖:
07警告.png
  • 4、約束的修改

約束的修改有很多種方式,下面列舉一種我常用的方式!

08約束的修改.png

注意:上面說的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


約束修改公式.png

一個有效的約束是指有且僅有一種方案滿足所有約束。如果有多種方案或者沒有一個方案滿足所有約束,則這些自動布局都無效。對于 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,即必須滿足。


約束的關(guān)系.png

三、XIB 給 UIView 添加 CALayer 相關(guān)的屬性

09CALayer 相關(guān)的屬性.png
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)先級的,就像下圖:

10屬性優(yōu)先級01.png

但是運(yùn)行起來發(fā)現(xiàn)事情并不是想像中的樣子???如圖:
11屬性優(yōu)先級02.png

那應(yīng)該怎么辦呢??選中右邊的Label控件,修改它的Horizontal橫向?qū)傩缘膬?yōu)先級,如圖:
12屬性優(yōu)先級03.png

神奇的事情發(fā)生了:
13屬性優(yōu)先級03.png

當(dāng)然還有一種辦法,拖拽兩個Label的層級關(guān)系也是可以的

五、XIB 使用SizeClass適配不同屏幕

項(xiàng)目中如果有用到橫豎屏幕效果圖不一樣的情況,可以用下面的方式:


14 SizeClass01.png
介紹圖

在Xcode屏幕下方會有一個機(jī)型顯示,點(diǎn)擊顯示如下:

15 SizeClass02.png

如下圖。Introduce Variations Based On: 如果只選中Width是 wC hAny類型,只選中Height是wAny hC類型,選中Width和Height是wC hC類型
16 SizeClass03.png

如圖展示,已經(jīng)進(jìn)入wC hC類型
17 SizeClass04.png

備注:如果需要進(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)

18機(jī)型示意.png

備注:如果項(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:時隔兩年再次拾起了我的簡書)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評論 6 532
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,538評論 3 417
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,761評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,207評論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,419評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,959評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,678評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,978評論 2 374

推薦閱讀更多精彩內(nèi)容