自動布局簡介

2022-08-22 09:12:13 字數 2055 閱讀 6951

直接使用 frame 計算控制項的位置

官方應用大多支援橫豎屏

隨著 ipad 的發布, 螢幕的物理尺寸發生了變化

並且蘋果建議,在 ipad 上執行的程式如果沒有特殊原因,應該支援橫豎屏切換

因此:不能把控制項的 frame 都寫死了,需要進行螢幕適配

為了解決螢幕適配需求,蘋果同時推出了第乙個螢幕適配解決方案:autoresizing

autoresizing的核心思想就是:參照父容器來設定子控制項的frame

不再寫死 frame, 而是參照父容器

舉例:在豎屏下有乙個按鈕要佔據整個螢幕寬度, 當切換到橫屏以後同樣要佔據整個螢幕的寬度

autoresizing 只能設定當前控制項父控制項之間的相對關係

redview.autoresizingmask = uiviewautoresizingflexiblewidth | uiviewautoresizingflexibleheight;
隨著 iphone5 \ iphone5s 等的發布蘋果裝置不同尺寸的螢幕變得越來越多, 不僅要求能根據控制項父子

關係來設定相對位置,也要求能根據任意控制項之間的關係來設定位置因為 autoresizing 只能設定當前控制項 與父控制項之間的相對關係,當遇到要設定兄弟控制項之間的關係的時候 autoresizing 就無能為力了

舉例: 在豎屏下, 螢幕底部有兩個按鈕,這兩個按鈕的間距為乙個固定的值(寬度不指定)

當切換為橫屏的時候要求這兩個按鈕還顯示在螢幕底部

並且按鈕間的間距不變, 按鈕可以隨之變寬

auto layout 技術主要解決的問題:控制項位置的參照關係不再侷限於父控制項

*** autolayout核心公式: ***

firstitem.firstattribute  seconditem.secondattribute * multiplier + constant
注意:如果firstitem.firstattribute和seconditem.secondattribute調換位置後注意multiplier和constant值的變化

使用 size classes + auto layout 進行螢幕適配

當 iphone6 發布以後,蘋果裝置的螢幕越來越多(以後也可能出現更多不同大小的螢幕),為了能更容易的適配不同的螢幕,蘋果推出了 size classes 技術

通過 auto layout 設定的約束,約束一旦新增就會應用於各種螢幕(也就是說在

各種不同的螢幕下都使用相同的約束)

通過 size classes + auto layout 的方式, 可以為不同尺寸的螢幕設定不同的約束

舉例: iphone 下的計算器,在橫屏、豎屏下的不同表現

要先禁止autoresizing功能,設定view的下面屬性為no

約束要作用的view.translatesautoresizingmaskintoconstraints = no;

新增約束之前,一定要保證相關控制項都已經在各自的父控制項

不用再給控制項設定frame

xcode版本

正式版發布時間

支援系統及設定

xcode4.2

2023年10月13日

ios5-iphone4s

xcode4.5

2023年9月20日

ios6-iphone5

xcode5.0

2023年9月18日

ios7-iphone5s

xcode6.0

2023年9月17日

ios8-iphone6

xcode7.0

2023年9月28日

ios9-iphone6s)

軟體布局簡介

初學packet tracer 5.1筆記 一 1 首先從介面最左下角的這段開始說起 routers switches hubs wireless devices connections end devices wan emulation custom made devices multiuser ...

flex布局簡介

傳統的布局方式都是基於盒狀模型,依靠與 display position float 方式來實現.在css3中增加了一種新的布局方案 flex布局.flex是flexible box 彈性布局 的縮寫.將元素置為flex布局.只要在需要使用flex布局的元素中新增display flex屬性即可.1...

IOS自動布局

使用相對布局之後,可以增加開發的速度,一直用frame的方式,混亂。使用相對布局之後,之前以設定frame的方式來取設定view將沒有效果 除了controller的view 同設定frame類似的時,在設定view的約束的時候,也需要制定他的大小和座標,否則,編輯器會提示警告。以實際操作來演示下如...