【Autolayout】AutoLayout介紹


參考文章


AutoLayout是什么?

AutoLayout是一種基于約束的,描述性的布局系統(tǒng)。

關(guān)鍵詞:

  • 基于約束 - 和以往定義frame的位置和尺寸不同,AutoLayout的位置確定是以所謂相對(duì)位置的約束來(lái)定義的,比如x坐標(biāo)為superView的中心,y坐標(biāo)為屏幕底部上方10像素等

  • 描述性 - 約束的定義和各個(gè)view的關(guān)系使用接近自然語(yǔ)言或者可視化語(yǔ)言的方法來(lái)進(jìn)行描述

  • 布局系統(tǒng) - 即字面意思,用來(lái)負(fù)責(zé)界面的各個(gè)元素的位置。

總而言之,AutoLayout為開(kāi)發(fā)者提供了一種不同于傳統(tǒng)對(duì)于UI元素位置指定的布局方法。以前,不論是在IB里拖放,還是在代碼中寫,每個(gè)UIView都會(huì)有自己的frame屬性,來(lái)定義其在當(dāng)前視圖中的位置和尺寸。使用AutoLayout的話,就變?yōu)榱耸褂眉s束條件來(lái)定義view的位置和尺寸。這樣的最大好處是一舉解決了不同分辨率和屏幕尺寸下view的適配問(wèn)題,另外也簡(jiǎn)化了旋轉(zhuǎn)時(shí)view的位置的定義,原來(lái)在底部之上10像素居中的view,不論在旋轉(zhuǎn)屏幕或是更換設(shè)備(iPad或者iPhone5或者以后可能出現(xiàn)的mini iPad)的時(shí)候,始終還在底部之上10像素居中的位置,不會(huì)發(fā)生變化。


AutoLayout和Autoresizing Mask的區(qū)別

Autoresizing Mask是我們的老朋友了…如果你以前一直是代碼寫UI的話,你肯定寫過(guò)UIViewAutoresizingFlexibleWidth之類的枚舉;如果你以前用IB比較多的話,一定注意到過(guò)每個(gè)view的size inspector中都有一個(gè)紅色線條的Autoresizing的指示器和相應(yīng)的動(dòng)畫縮放的示意圖,這就是Autoresizing Mask。在iOS6之前,關(guān)于屏幕旋轉(zhuǎn)的適配和iPhone,iPad屏幕的自動(dòng)適配,基本都是由Autoresizing Mask來(lái)完成的。但是隨著大家對(duì)iOS app的要求越來(lái)越高,以及已經(jīng)以及今后可能出現(xiàn)的多種屏幕和分辨率的設(shè)備來(lái)說(shuō),Autoresizing Mask顯得有些落伍和遲鈍了。

AutoLayout可以完成所有原來(lái)Autoresizing Mask能完成的工作,同時(shí)還能夠勝任一些原來(lái)無(wú)法完成的任務(wù),其中包括:

  • AutoLayout可以指定任意兩個(gè)view的相對(duì)位置,而不需要像Autoresizing Mask那樣需要兩個(gè)view在直系的view hierarchy中。

  • AutoLayout不必須指定相等關(guān)系的約束,它可以指定非相等約束(大于或者小于等);而Autoresizing Mask所能做的布局只能是相等條件的。

  • AutoLayout可以指定約束的優(yōu)先級(jí),計(jì)算frame時(shí)將優(yōu)先按照滿足優(yōu)先級(jí)高的條件進(jìn)行計(jì)算。

總結(jié):
Autoresizing Mask是AutoLayout的子集,任何可以用Autoresizing Mask完成的工作都可以用AutoLayout完成。AutoLayout還具備一些Autoresizing Mask不具備的優(yōu)良特性,以幫助我們更方便地構(gòu)建界面。

設(shè)置frame、Autoresizing Mask、Autolayout區(qū)別

設(shè)置frame
設(shè)置frame

設(shè)置autoresizing
設(shè)置autoresizing

設(shè)置autolayout
設(shè)置autolayout

用autolayout之前,我們可能這樣寫“button在左上角,坐標(biāo)為(20,230)”,現(xiàn)在用相對(duì)語(yǔ)言代替絕對(duì),可能會(huì)這樣寫“button相對(duì)于父視圖垂直居中,并且距父視圖左邊緣10個(gè)像素”


AutoLayout使用

1、**確認(rèn)勾選了Use Autolayout **


勾選Autolayout
勾選Autolayout

2、插入約束

插入約束
插入約束

注意:盡管你執(zhí)行完第一次Pin處理后,兩個(gè)視圖看起來(lái)還是被選中的,但其實(shí)他們只是在一個(gè)特別的布局關(guān)系顯示模型里。所以你需要重新選擇這兩個(gè)視圖.

3、兩個(gè)控件選擇約束

兩個(gè)視圖之間的約束,除了在Editor中選擇外,還可以通過(guò)Ctrl-drag來(lái)實(shí)現(xiàn),如圖:

Ctrl-drag來(lái)創(chuàng)建約束
Ctrl-drag來(lái)創(chuàng)建約束

Ctrl-drag后松手,選擇相應(yīng)約束,如圖:

松手,彈出約束選擇單
松手,彈出約束選擇單

4、第三種創(chuàng)建和管理約束的方法

Xcode5的圖樣,Xcode6有變化,不過(guò),還是很容易找到的
Xcode5的圖樣,Xcode6有變化,不過(guò),還是很容易找到的

四個(gè)按鈕分別是Align, Pin, Resolve Auto Layout Issues, 和 Resizing Behavior。 這應(yīng)該是最常用的 。

5、如果視圖的T型條是橙色,說(shuō)明約束條件不夠

T型條橙色,說(shuō)明約束條件不夠
T型條橙色,說(shuō)明約束條件不夠

6、如果視圖的T型條變?yōu)樗{(lán)色,說(shuō)明布局條件充分

T型條變?yōu)樗{(lán)色,說(shuō)明布局條件充分
T型條變?yōu)樗{(lán)色,說(shuō)明布局條件充分

7、每個(gè)約束都是一個(gè)對(duì)象(NSLayoutConstraint),這意味著你可以通過(guò)代碼實(shí)現(xiàn)約束性布局,本文不涉及

8、allign介紹

  • Left Edges 左對(duì)齊

  • Right Edges 右對(duì)齊

  • Top Edges 頂對(duì)齊

  • Bottom Edges 底對(duì)齊

  • Horizontal Centers 水平居中

  • Vertical Centers 垂直居中

  • Baselines 文本底部對(duì)齊

  • Horizontal Center in Container 水平居中(單個(gè)控件相對(duì)于其父視圖)

  • Vertical Center in Container 垂直居中(單個(gè)控件相對(duì)于其父視圖)

9、pin介紹

  • Width 固定寬度 (UIButton、UILabel、UISegmentedControl、UIProgressBar等有一種屬性叫intrinsic content size,它可以根據(jù)內(nèi)容調(diào)節(jié)自身寬度,如果設(shè)置width約束,這個(gè)屬性就失效了,如果想恢復(fù),可以刪掉這個(gè)約束,然后選擇Editor/Size To Fit Content恢復(fù)之)(用于自身)

  • Height 固定高度 (用于自身)

  • Horizontal Spacing 水平間隔(用于同級(jí)控件)

  • Vertical Spacing 垂直間隔(用于同級(jí)控件)

  • Leading Space To SuperView 與父視圖左距離

  • Trailing Space To SuperView 與父視圖右距離

  • Top Space To SuperView 與父視圖頂距離

  • Bottom Space To SuperView 與父視圖低距離

  • Widths Equally 多個(gè)控件保持等寬

  • Heights Equally 多個(gè)控件保持等高

10、約束不足或沖突提示

如圖:
約束不足或沖突提示
約束不足或沖突提示

11、通過(guò)Assistant editor來(lái)觀察橫豎屏的效果

通過(guò)Assistant editor來(lái)觀察橫豎屏的效果
通過(guò)加號(hào)增加機(jī)型

12、關(guān)于優(yōu)先級(jí)的一些說(shuō)明

優(yōu)先級(jí)說(shuō)明
優(yōu)先級(jí)說(shuō)明
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 iPhone自誕生以來(lái),隨著其屏幕尺寸不斷的多樣化,屏幕適配的技術(shù)一直在發(fā)展更新。目前,iOS系統(tǒng)版本已經(jīng)更...
    VV木公子閱讀 15,617評(píng)論 24 170
  • 1.尺寸適配1.原因 iOS7中所有導(dǎo)航欄都為半透明,導(dǎo)航欄(height=44)和狀態(tài)欄(height=20)不...
    LZM輪回閱讀 6,384評(píng)論 1 4
  • 目錄 0、前言 一、Auto Layout前世今生 二、Auto Layout基礎(chǔ)知識(shí) 1.Auto Layout...
    浮游lb閱讀 25,410評(píng)論 3 90
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,153評(píng)論 4 61
  • 很多人都不喜歡“伸手黨”,你認(rèn)為什么樣的行為類似于伸手黨呢? 1. 手腳和心智都健全的乞討者。 2. 學(xué)術(shù)作品中的...
    成為伍爾夫閱讀 339評(píng)論 0 1

友情鏈接更多精彩內(nèi)容