Objective－c——UI基礎開發第十天（自動布局）

標籤：

一、autoresizing 的使用（瞭解）

只能參照父控制項

 

1、實現橫豎螢幕切換，不能把控制項的frame血絲，需要進行螢幕適配

2、需要參照父控制項

 

use auto layout禁用

才會出現autoresizing

3、autolayout和autoresizing是互斥的

 

不通過運行來查看不同尺寸下的情況

preview－》mainstoryboard

4、外側的四根線勾選，表示該view距離父控制項四周的邊界的距離保持不變

內側的兩根線表示表示寬度和高度會隨著父view 的變化而變化（等比例變化

 

二、autoresizing代碼的實現和弊端

6根線，外側四根控制與父控制項的距離

內側兩個記錄與父控制項之間的相對變化

autoresizingMask

UIViewAutoresizingFlexibleTopMargin

UIViewAutoresizingNone

UIViewAutoresingFlexibleHeight

去 ｜ 或號

autoresing只適用子view和父view的

子view 和子view直接沒法設定

只需要記住6根線的使用

 

 

autolayout（使用病掌握）

三、autolayout的基本使用

autolayout核心思想 ：參照和約束

可以設定控制項和任意控制項的約束

建立項目 可以禁用size class

UIStackView 除外，其它都應用autolayout

（align pin （大頭釘 有固定的意思）resolve auto layout issues（解決auto layout問題

 

align上面的一些灰色：針對多個控制項的設定

leading edge 左邊距（leading頭部

Trialling edge 右邊距

top edge  上邊距

bottom edge 下邊距

 

horizontal centers 水平置中

vertical centers 垂直置中

basinlines 基準，一般表示底部

－——－－－－以上，針對多個控制項的對齊

horizontal in container

vertically in container 

add constraints 增加約束

 

當顯示紅線的時候：

表示缺少關鍵約束

或是約束衝突

————————以上針對align

添加寬高：pin中設定

也有四根線：constraints

表示該控制項和其他控制項的距離

width：表示本身的寬高

height

灰色：equal widths／equal heights ：設定多個控制項等寬等高的情況下

——－－－－－————以上真對pin

當顯示黃線的時候：

表示約束和實際的位置不相符合

 

resolve auto layout issues（解決autoolayout問題

selected views

update frame

update constraints

all views in view controller

 

更新約束只是讓它去適應現在的約束

 

四、autolayout設定邊界

使用autolayout的時候，稍不注意容易被添加一些值或者減少一些值 constant會產生位移

 

（使用第三方庫解決自動布局問題可以推薦）

使用了sutolayout 就不要再使用frame ：沒有frame的概念

autolayout 要確定寬高和x、y你只需設定約束就好，不需要去計算

 

五、使用autolayout設定邊界

pin中：constant to margins 的勾選是什嗎？

xcode自動幫你添加的間距

在自己設定的時候，把勾選去掉

 

當設定上下左右設定間距的時候有問題：是上邊距是針對 狀態條下方進行設定的距離

 

解決：點擊下選箭頭的按鈕：出現：top layout guide ／view（current distance）

 

同樣點擊：bottom layout guide／view（current distance

有什麼差別呢：

top layout guide 和bottom layout guide

是針對導航控制器和tabbar 設定的 

 

六、auto layout 設定兄弟view之間的約束

clean constant 可以將約束清空

高度相等，頂部和底部對其

 

七、autolayout的上下約束設定

核心公式：

被約束view 的width ＝ 參照view 的width ＊ 係數 ＋ 常量

 

八、autolayout的小技巧

設定圖片並添加約束

1、

先添加圖片再進行置中顯示，紅線消失，而不需要設定寬高

一開始置中但沒有圖片的時候，會出現紅線

原因：設定完圖片之後，會預設使用圖片的寬高

 

2、拖放小控制項的時候，添加上下距離的約束，沒設定寬高也不會出現紅線：原因是有些控制項是有預設寬高的像（switch、button、textfield，雖然有預設寬高，但會出現與實際不符的黃線，因為你需要修改它的寬度，否則預設寬度較短

 

3、

九、小應用

圖片無壓縮怎麼設定（邊界不能設定）

那麼就設定中心點（只需設定圖片的xy）寬高根據圖片而定

1X 

2X 

使用1x而把圖片放在2X圖片會放大兩倍

把多出來的截掉

 

垂直或水平置中，再用當前的位置進行計算，也就是說都是相對於中心點的變動

中心點是個相對的位置

上面螢幕的高度是不一樣的，所以才以中心點為參照（即便中心點在變，始終是一個相對的位置

 

十、autolayout代碼實現

 

添加約束的規則：

1）對於兩個同層級view之間的約束關係，添加到它們的父view上

2）對於兩個不同層級的view之間的約束關係，添加到離它們最近的共同父view上

3）對於有層次關係的兩個view之間的約束關係，添加到層次較高的view上

高度為什麼可以添加到自己身上：因為沒有做任何參照

和其他的view有關係的一般要添加到父view上

 

代碼實現

 

一定要把view 的autoresizing屬性給禁用掉（因為是互斥關係

review.translatesAutoresizingMaskIntoConstraints=NO;

否則添加的約束都是沒有作用的

 

1\添加頂部的約束(核心公式

NSLayoutConstraint *blueTop =[NSLayoutCOnstraint  constraintWithItem://被約束的view

attribute: NSLayoutAttributeLeft 被約束的屬性

relatedBy :NSLayoutRelationGreaterThanOrEqual

toItem:參照的view

attribute:參照view的屬性

multiplier：乘

constant：20加

 

2\設定完約束之後，添加到誰身上

//如果有子view和父view 的關係的話，就添加到父view上

self.view addConstraint:/addConstraints［後面會用到]

 

3\添加blueview的高度約束

NSLayoutConstraint *height =[NSLAyoutCOnstraint constraintWithItem attribute: toItem:nil attribute:NSLayoutAttributeNotAnAttribute

需要注意設定高度的時候，沒有參照view就傳nil 屬性傳NSLayoutNotAnAttribute

注意，右側傳入的constant 要負數

添加到哪？

如果添加到父view上也可以，添加到自己身上也可以 因為沒有任何參照

 

十一、添加紅色view

IME：通用：中文時使用英文標示

注意：

1、千萬不要忘記關閉translatesAutoresizingMaskIntoContraints屬性

2、一定要保證相關控制項都已經在各自的父控制項上

3、不要給view設定frame

 

review的約束，是參照blueview

 

 十二、VFL語言的使用

（可視化格式語言）

文法解釋：

@“H：｜－20-［review］－20-｜”

H：表示水平方向

V：表示垂直方向

｜－ 邊界 左／右（和左側邊界有距離，距離為20）

［review］

 

@“V：｜－20-［review（50）］－20－［purpleview（＝＝redView）”

V：表示垂直方向

｜－20-［review（50）］：review 距離頂部的高度是20間距，自身的高度為50

purpleVIew 的高度和review 相等，purpleView距離review 有20的間距

 

在設定寬度的時候

addConstraints：因為設定約束的時候不止設定一個view

水平方向上紅色view和紫色view相等

@“H：［purple view（＝＝redView）］”

＝＝redView＊0.5為什麼解析不了？

因為：VFL語言不支援乘法除法

所以如果要實現寬度一半的情況只能原先的設定方式

 

constraintsWithVisualFormat:放置VFL語言

水平方向上要不對top要不對bottom不能左右

垂直方向上只能左右不能上下

metrics：字典@{@“delte”:@20}

view:@{@“redView”:redView}]對應出現的對象

 

Objective－c——UI基礎開發第十天（自動布局）