頁(yè)面布局

View的定位

View界面層次

• UIScreen->UIWindow->rootViewController.view->我們?cè)O(shè)置的view
• 左邊的view是右邊下一個(gè)view的父view，界面顯示的總是最上面的view，也就是輩分最小的view

UIKit坐標(biāo)系

• 原點(diǎn)在屏幕左上角，如圖：

  
  
  UIKit坐標(biāo)系.png
• 圖中三個(gè)函數(shù)分別描述的是點(diǎn)、線、面，在描述面時(shí)，我們使用origin來表示該面的左上角的點(diǎn)坐標(biāo)

View定位

• frame={origin：{x，y}，size：{w，h}}，該屬性描述的面是在父view的坐標(biāo)系中

• bounds={origin：{x，y}，size：{w，h}}，該屬性描述的面是在當(dāng)前view的坐標(biāo)系中
  這么說可能不太好理解，bounds的點(diǎn)坐標(biāo)一般是{0,0}，無論該view在哪兒，它的左上角就是{0,0}，但frame的左上角坐標(biāo)需要參考父view.bounds的坐標(biāo)，先在rootViewController.view上設(shè)置一個(gè)子view，看圖：

  
  
  View定位-bounds.png
  
  

  假如我把rootViewController.view.bounds.origin修改為{40,160}，大家猜會(huì)發(fā)生什么，

  
  
  bounds.gif
  
  這是為什么呢？原來子view根據(jù)父view的bounds確定自己的位置，子view.frame.origin為{40,160}，結(jié)果他就去父view中尋找這個(gè)坐標(biāo)，而父view中這個(gè)坐標(biāo)在原點(diǎn)，它就自然而然跑到原點(diǎn)了。
• center=CGPoint{x，y}，這個(gè)坐標(biāo)是相對(duì)于父view的
  如果修改子view.bounds.size，center不變。子view會(huì)根據(jù)center的坐標(biāo)和size來確定自己在父view中的位置，也就是說從中心點(diǎn)放大或縮小，子view.frame自動(dòng)變化。

View.transform

• CGAffineTransform transform（平移、旋轉(zhuǎn)、縮放）
• 圖形變換在當(dāng)前view繪制代碼執(zhí)行之前添加到圖形繪制環(huán)境里（不理解）
• 子視圖總是在上級(jí)視圖變換過的環(huán)境里繪制自己

界面旋轉(zhuǎn)

• UIApplication先根據(jù)Info.plist的信息確定該不該旋轉(zhuǎn)，怎么旋轉(zhuǎn)
• 頂層可視View Controller被詢問支不支持旋轉(zhuǎn)，然后做相應(yīng)動(dòng)作
• 注意：所有的view Controller需要聲明自己支持旋轉(zhuǎn)的方向與現(xiàn)在應(yīng)該旋轉(zhuǎn)的方向保持一致

Autoresizing

界面布局過程

• -layoutSubviews，在view重排之前會(huì)收到這個(gè)消息
• -setNeedsLayout，一般不直接像view發(fā)送-layoutSubviews這個(gè)方法，而是通過-setNeedsLayout來實(shí)現(xiàn)，它在下次繪制之前重新推算布局，節(jié)省資源
• -layoutIfNeeded，如有需要，立即重新推算布局

布局需求

主要是確定界面元素之間的間距

• 固定間距：柱子（struts）
• 按比例調(diào)整間距：彈簧（springs）

UIView.autoresizingMsak

• flexible對(duì)應(yīng)彈簧，沒有指定的話，默認(rèn)為fixed（固定）

  
  
  UIView.autoresizingMask.png

在xcode中嘗試Autoresizing

先把view controller的autoLayout關(guān)掉：

準(zhǔn)備工作.png

如圖，幾個(gè)屬性試過之后就明白了，簡(jiǎn)單明了：

Autoresizing練習(xí).png

控制Autoresizing

• 從nib中加載的view都默認(rèn)實(shí)現(xiàn)了Autoresizing

• 代碼創(chuàng)建的view卻是空空如也

  
  
  Autoresizing.png

Autolayout

Autolayout基礎(chǔ)

Autolayout基礎(chǔ).png

Autolayout開關(guān)

Autolayout開啟關(guān)閉.png

Autolayout思想

其實(shí)關(guān)鍵的就是約束，與父視圖或者其他控件的約束。

• 有自己固定大小的控件，我們只需要確定其位置，例如Button
• 還有一些，例如ImageView需要我們給定位置和大小
• 當(dāng)約束線為紅色代表約束不夠確定該控件位置，黃色代表與現(xiàn)有位置不匹配，藍(lán)色說明正確約束了該控件，且現(xiàn)有位置在該控件被約束的位置

Autolayout優(yōu)先級(jí)

在有些時(shí)候我們需要用到優(yōu)先級(jí)，例如一個(gè)控件在5.5寸和3.5寸屏顯示上，frame位置不應(yīng)該固定，應(yīng)該按比例調(diào)整。還有例如textfiled我們希望它在大的顯示屏上更大，用優(yōu)先級(jí)都是可以做到的，不過操作比較繁瑣，優(yōu)點(diǎn)是可以精確定位。