Xcode AutoLayout布局(一) 界面元素部分

一、 Size Inspector 尺寸檢查器


View部分

『show』- 視圖在布景中的尺寸及坐標(biāo)

1.Alignment Rectangle
  顯示視圖的可見區(qū)域的絕對(duì)位置
2.Frame Rectangle
  顯示視圖的總區(qū)域 (可見區(qū)域 + 外圍包圍層) 的絕對(duì)位置


Arrange部分

『Arrange』- 快速布局選項(xiàng)

1.Position in Container (父容器相對(duì)位置)
  Center Horizontally in Container 水平居中
  Center Vertically in Container 垂直居中
2.Fill Container (填充方式)
  Fill Container Horizontally 水平填充
  Fill Container Vertically 垂直填充
3.Align Vertically (垂直對(duì)齊方式)
  Top Edges 頂端對(duì)齊
  Vertical Centers 垂直居中對(duì)齊
  Baselines 基線對(duì)齊,針對(duì)UILabel等文本控件
  Bottom Edges 底端對(duì)齊
4.Align Horizontally (水平對(duì)齊方式)
  Left Edges 左端對(duì)齊
  Horizontal Centers 水平居中
  Right Edges 右端對(duì)齊


Autoersizing部分

『Autoersizing』- 用于屏幕適配,當(dāng)父容器的bounds發(fā)生變化時(shí)自動(dòng)調(diào)整視圖布局,該配置與constraints沖突,當(dāng)設(shè)置了constraints后該選項(xiàng)消失

1.外部上下左右為實(shí)線,表示當(dāng)父容器改變時(shí),依舊保持當(dāng)前間距進(jìn)行約束,否則間距等比例拉伸
2.內(nèi)部水平與垂直為實(shí)線,表示內(nèi)容隨父容器水平與垂直大小變化進(jìn)行等比例拉伸

實(shí)例:
1.邊距固定,內(nèi)容固定
2.邊距固定,內(nèi)容拉伸
3.邊距拉伸,內(nèi)容固定
4.邊距拉伸,內(nèi)容拉伸
??分別配上4張效果圖

Layout Margins部分

『Layout Margins』- 設(shè)置視圖與其子控件之間的留白間距,需要與constraints聯(lián)合使用,否則無效

1.Default (使用默認(rèn)間距值-8)
2.Language Directional (使用自定義間距值)
3.Fixed (使用自定義間距值)
4.Preserve Superview Margins (子控件是否需要同時(shí)滿足父父視圖約束)
5.Follow Readable Width (是否保持可視區(qū)域?qū)挾?當(dāng)設(shè)計(jì)模板使用iOS,在iPad中若顯示寬度不能填充,則需要勾選該選項(xiàng))
6.Safe Area Relative Margins (安全區(qū)域邊距,開啟后,可以在約束中設(shè)置距離安全區(qū)域的約束,可適配不同的機(jī)型,而不需要單獨(dú)計(jì)算狀態(tài)欄的高度)
7.Safe Area Layout Guide (引導(dǎo)安全區(qū)域,開啟后,當(dāng)添加了tabbar與navigationbar時(shí),會(huì)自動(dòng)重新計(jì)算安全區(qū)域,進(jìn)而調(diào)整通過安全區(qū)域約束的布局)

『Content Hugging Priority』- 抗拉伸優(yōu)先值,值越大越抗拉伸
『Content Compression Resistance Priority』- 抗壓縮優(yōu)先值,值越大越抗壓縮
1.Horizontal 水平優(yōu)先值
2.Vertical 垂直優(yōu)先值
3.Intrinsic Size 固定尺寸
  Default (System defined) 默認(rèn)值(適用于自動(dòng)計(jì)算高度控件UILabel、UIButton)
  Placeholder 自定義固定尺寸
4.Ambigulty 沖突檢測(cè)

實(shí)例:
1.多控件優(yōu)先拉伸某控件
2.多控件優(yōu)先壓縮某控件

二、底部控件
??插入整個(gè)底部視圖

『Update Frames』- 刷新布局
當(dāng)設(shè)置constraints后,當(dāng)控件不在約束位置時(shí),可使用該按鈕使控件調(diào)整至對(duì)應(yīng)約束位置

『Embed in stack』- 控件組合
將多個(gè)控件組合成一個(gè)整體框架,適用于9.0+版本

??插入視圖
『Align』- 對(duì)齊
  Leading Edges 左端對(duì)齊 (需同時(shí)選定多個(gè)控件)
  Trailing Edges 右端對(duì)齊 (需同時(shí)選定多個(gè)控件)
  Top Edges 頂端對(duì)齊 (需同時(shí)選定多個(gè)控件)
  Bottom Edges 下端對(duì)齊 (需同時(shí)選定多個(gè)控件)
  Horizontal Centers 水平對(duì)齊 (需同時(shí)選定多個(gè)控件)
  Vertical Centers 垂直對(duì)齊 (需同時(shí)選定多個(gè)控件)
  Baselines 基線對(duì)齊 (需同時(shí)選定多個(gè)控件)
  Horizontally in Container 水平居中
  Vertically in Container 垂直居中

??插入視圖
『Constraints』- 約束
  Width 寬度
  Height 高度
  Equal Widths 等寬 (需同時(shí)選定多個(gè)控件)
  Equal Height 等高 (需同時(shí)選定多個(gè)控件)
  Aspect Ratio 固定寬高比
  Align 對(duì)齊設(shè)置,與之前的重復(fù)

??插入視圖
『Resolve Auto Layout Issues』- 自動(dòng)布局問題修復(fù)
1.Selected Views 對(duì)所選視圖進(jìn)行設(shè)置
2.All Views in View Controller 對(duì)容器內(nèi)所有子視圖進(jìn)行設(shè)置
  Update Constraint Constants 更新約束數(shù)值,對(duì)已設(shè)置約束且偏移約束控件有效
  Add Missing Constraints 添加缺失約束
  Reset to Suggested Constraints 自動(dòng)配置約束
  Clear Constraints 清空所有約束

?著作權(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)容

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