Storyboard 系列文章
[iOS] Storyboard (1) -- 入門：API 篇
[iOS] Storyboard (2) --入門：約束篇
[iOS] Storyboard (3) -- 使用：常用Tips
[iOS] Storyboard (4) -- 實(shí)踐：?jiǎn)栴}總結(jié)
[iOS] Storyboard (4) -- 實(shí)踐：UIScrollView
[iOS] Storyboard (4) -- 實(shí)踐：UICollectionView
一個(gè)完整的 Storyboard 大概是這個(gè)樣子：
主要分為三個(gè)紅框區(qū)域和三個(gè)籃框工具條：
- 控件列表及層級(jí)關(guān)系
- UI 效果
- 屬性設(shè)置外傅、Frame布局約束等
- 視圖模式切換
- Autolayout 布局約束
- 設(shè)備選擇
這里的第一部分和第二部分很簡(jiǎn)單，第一部分是每個(gè)控制器內(nèi)所包含的視圖層級(jí)關(guān)系典尾，多個(gè)控制器會(huì)依次并列顯示在這里睹耐；第二部分是我們主要的工作區(qū)域，添加控件蜂大，也是最終的 UI效果預(yù)覽區(qū)闽铐；
第三部分：屬性設(shè)置區(qū)
總共有六個(gè)選項(xiàng)，從左到右依次為：
Show the File Inspector（文件檢查器）奶浦、
Show the Quick help Inspector（快速幫助檢查器）兄墅、
Show the Identity Inspector（標(biāo)識(shí)檢查器）、
Show the Attributes Inspector（屬性檢察器）澳叉、
Show the Size Inspector（尺寸檢查器）以及
Show the Connections Inspector（連接關(guān)系檢查器）隙咸；
在左側(cè)控件列表選中的控件不同時(shí)，各個(gè)選項(xiàng)下的內(nèi)容也不盡相同成洗，可以都點(diǎn)看看一些大致有哪些東西五督；其中，最常用的是第三個(gè)到第五個(gè)：
Show the Identity Inspector（標(biāo)識(shí)檢查器）
前面說了瓶殃，這里的內(nèi)容充包，在選擇不同的控件時(shí)，顯示的內(nèi)容略有區(qū)別遥椿，下面是選中 UIViewController 時(shí)的內(nèi)容：
這里經(jīng)常用到的是下面幾個(gè):
Custom Class
Custom Class 下的 Class 是關(guān)聯(lián)我們新建的對(duì)應(yīng)控件的子類的（即 .h/.m）基矮；
** Identity**
Identity 下的 Storyboard ID，在我們使用 Storyboard 時(shí)會(huì)經(jīng)常使用到這個(gè)冠场，一般設(shè)置為和類名一致即可家浇！
User Defined Runtime Attributes
這里使用 KVC 的特性, 設(shè)置類的 key-path 屬性, 在運(yùn)行時(shí)通過 key-path 來設(shè)置對(duì)應(yīng)控件的屬性, 在屬性面板沒有找到設(shè)置的屬性, 都可以在這里進(jìn)行添加,這里舉一個(gè)??: 設(shè)置視圖圓角
一種方式是通過 layer 的屬性進(jìn)行設(shè)置, 如果是代碼的話,會(huì)是這樣:
view.layer.cornerRadius = 6;
view.layer.borderWidth = 1;
而在這里可以這樣添加:
需要注意的是, 在設(shè)置邊框顏色時(shí),因?yàn)檫@里只能選擇 UIColor, 而實(shí)際需要的是 CGColor, 解決方法就是, 給 layer 寫個(gè)擴(kuò)展, 添加一個(gè)自定義屬性, 然后在這里設(shè)置這個(gè)屬性, 即: bColor, 通過這個(gè)屬性轉(zhuǎn)換一下即可; 這里的擴(kuò)展大概是這樣:
// CALayer+LQLayer.h
#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface CALayer (LQLayer)
@property (nonatomic, weak) UIColor *bColor;
@end
NS_ASSUME_NONNULL_END
// CALayer+LQLayer.m
#import "CALayer+LQLayer.h"
@implementation CALayer (LQLayer)
@dynamic bColor;
-(void)setBColor:(UIColor *)bColor {
self.borderColor = bColor.CGColor;
}
@end
Show the Attributes Inspector（屬性檢察器）
這里是我們?cè)O(shè)置控件的相應(yīng)屬性的地方，根據(jù)選擇的控件不同碴裙，內(nèi)容差別比較大钢悲，下面是選中 UIView 時(shí)的內(nèi)容：
可以不同的控件都選中看一下点额，每種控件的大部分屬性都可以在這里進(jìn)行設(shè)置，和使用代碼時(shí)的設(shè)置是一樣的莺琳；
Show the Size Inspector（尺寸檢查器）
這里主要是現(xiàn)實(shí)各個(gè)控件的坐標(biāo)及約束信息的还棱，修改控件坐標(biāo)、約束芦昔，都可以在這里進(jìn)行操作诱贿，這里也是我們經(jīng)常使用的；下面是選中 UIView 的時(shí)候的內(nèi)容：
View 下主要是坐標(biāo)信息咕缎，直接修改 x/y/width/height 的值珠十，即可；
Constraints 是約束信息凭豪，給控件添加約束后焙蹭，這里會(huì)顯示所有的約束，如果我們想修改某個(gè)約束嫂伞，也是在這里進(jìn)行孔厉；
當(dāng)我們想修改某條約束，直接點(diǎn)擊約束后面的 Edit帖努，或者直接雙擊該約束撰豺，會(huì)跳到約束的編輯頁(yè)：
控件的約束，大致是按下面的公式進(jìn)行計(jì)算：
First Item = Multiplier × Second Item + Constant
First Item：需要添加約束的視圖
Relation：關(guān)系拼余，Equal（=）污桦、Less Than or Equal to（<=）、Greater Than or Equal to（>=）
Second Item：相對(duì)某個(gè)視圖的約束匙监，可以選擇參考的是哪個(gè)視圖和該視圖的哪個(gè)屬性
Constant：常量
Priority：優(yōu)先級(jí)凡橱，一般不做修改
Multiplier：倍數(shù)
可以看下下面這個(gè)示例，約束是 綠色的寬是紅色寬的2倍加10 ：
即：GreenView.width = 2 × RedView.width + 10
第四部分：視圖面板
這里有四個(gè)按鈕：控件庫(kù)亭姥、Storyboard 面板稼钩、Storyboard & Code 雙面板、XML面板达罗；
主要用到的是前三個(gè)坝撑，在需要將 Storyboard 中的控件連線到Code 中時(shí)，需要切換為 Storyboard & Code 雙面板（第三個(gè)）粮揉；
這里功能比較簡(jiǎn)單绍载，不做過多介紹；
第五部分：約束
這部分主要是我們?yōu)楦鱾€(gè)控件添加約束的滔蝉，五個(gè)按鈕從左到右依次是：Update Frames、Embed In塔沃、Align蝠引、Add New Constrains阳谍、Resolve Auto Layout Issues
Update Frames：更新約束
經(jīng)常使用
在修改了某個(gè)控件的約束后，如果視圖沒有立即變化螃概，可在修改結(jié)束后矫夯，點(diǎn)擊這個(gè)按鈕，進(jìn)行更新吊洼；
PS：需要注意训貌，該按鈕大部分時(shí)間下是灰色不可點(diǎn)擊的，只有在約束有更新冒窍，并切選中的視圖是其父視圖的時(shí)候递沪，才會(huì)變?yōu)榭牲c(diǎn)擊的黑色；
Embed In：嵌入
常使用
可以看到我們可以將選中的視圖综液，嵌入到某些視圖/視圖控制器中款慨；
Align：對(duì)齊
主要是需要將多個(gè)視圖對(duì)齊時(shí)使用
Leading Edges：左對(duì)齊
Trailing Edges：右對(duì)齊
Top Edges：頂部對(duì)齊
Bottom Edges：底部對(duì)齊
Horizontal Centers：垂直居中對(duì)齊
Vertrical Centers：水平居中對(duì)齊
Baselines：基線對(duì)齊
Horizontally in container：和父視圖的垂直中心線對(duì)齊
Verically in Container ：和父視圖的水平中心線對(duì)齊
除了最后兩個(gè)，前面的需要在選中多個(gè)視圖時(shí)谬莹，才是可選的檩奠；
選中多個(gè)視圖：按住Command鍵后即可多選
Add New Constrains：新加約束
主要是為單個(gè)控件添加約束的面板：
上下總共有三部分，第一部分是設(shè)置距離臨近控件的間隙附帽，設(shè)置后紅色的虛線會(huì)變?yōu)榧t色的實(shí)線埠戳，也可以點(diǎn)擊實(shí)線/虛線進(jìn)行取消/添加約束；
這里有個(gè)復(fù)選框：Constrain to margins蕉扮，勾選后整胃，會(huì)在左右兩邊各有8pt 的間隙，在我們?cè)O(shè)置全屏的時(shí)候慢显，如果不取消勾選爪模，是無法全屏的，一般情況下荚藻，我們直接取消勾選即可屋灌；
第二部分，設(shè)置控件固定的寬高应狱；
第三部分共郭，看名稱也能猜到，等寬疾呻、等高除嘹、等比；
Resolve Auto Layout Issues：解決布局錯(cuò)誤
這里主要分為兩部分：上半部分：Selected Views岸蜗，只會(huì)作用在所選擇的控件上尉咕；下半部分：All Views in View Controller，會(huì)作用在所有的視圖上璃岳；每部分的功能都一樣年缎，只不過作用的范圍不同悔捶，使用的時(shí)候需要注意這個(gè)；
Update Constraint Constants ：更新約束单芜，一般不使用這個(gè)更新蜕该，而是使用 Upadte Frames
Add Missing Constraints ：如果我們添加的約束不足，系統(tǒng)推薦補(bǔ)全約束洲鸠；一般不使用這個(gè)推薦堂淡，根據(jù)提示的不足，手動(dòng)添加缺失的約束扒腕；使用這個(gè)的時(shí)候會(huì)有莫名其妙的問題
Reset to Suggested Constraints：重置為系統(tǒng)推薦的約束绢淀，同上面那個(gè)，一般不使用
Clear Constraints：清除約束袜匿。使用的時(shí)候需要注意是清除所有的還是某個(gè)控件的
這里常用的也就是最后一個(gè) Clear Constraints更啄，在我們添加約束遇到無法解決的問題，或者修改的太多居灯，直接清除祭务，然后重新添加；
第六部分：設(shè)備
點(diǎn)擊后怪嫌，可以選擇不同的設(shè)備以及橫豎屏义锥，并可以調(diào)節(jié)畫布的大小
這里需要注意的是 Vary for Traits（不同特征）按鈕，如果需要在不同的設(shè)備或者不同的設(shè)備方向有不同的 UI 布局岩灭，可以使用這個(gè)功能拌倍；
例如, 我們先選擇豎屏, 對(duì)控件進(jìn)行了布局約束, 然后再選擇橫屏?xí)r, 這時(shí)候的UI布局可能就不是我們希望的, 也就是說, 在橫豎屏狀態(tài)下, UI 的布局是不一樣的;
我們可以這樣操作, 在選擇橫屏后, 點(diǎn)擊 Vary for Traits , 選擇 width & height, 然后進(jìn)行橫屏的布局;
點(diǎn)擊后會(huì)彈出一個(gè)選擇框：
選擇特征的依據(jù)，Width噪径、Height 或者 兩者都選柱恤，然后點(diǎn)擊空白區(qū)域，彈框消失找爱；這時(shí)候梗顺，面板會(huì)變?yōu)檫@樣：
點(diǎn)擊手機(jī)模型圖標(biāo)，會(huì)彈出所有支持的設(shè)備车摄，可以選擇需要的設(shè)備寺谤，然后進(jìn)行控件/約束的添加。
注意, 在未完成布局前, 不要點(diǎn)擊 Done Varying, 橫屏狀態(tài)下的所有控件布局結(jié)束后, 再點(diǎn)擊 Done Varying; 然后, 運(yùn)行模擬器, 切換橫豎屏, 就會(huì)看到不同的布局
完成后就是這個(gè)樣子 ??
連線添加約束
除了使用上面的面板來為控件添加約束吮播，還有一種方式是連線：
選中控件变屁，按住 CTRL 鍵，點(diǎn)擊左鍵意狠，拖拽到需要參考的另一個(gè)控件上：
在彈出框中選擇要添加的屬性：
Horizontal Spacing：橫向間距
Vertical Spacing：垂直間距
Vertical Baseline Standard Spacing：垂直基線標(biāo)準(zhǔn)間距
Top：頂部
Center Vertically：垂直中心點(diǎn)
First Baseline：第一基線
Bottom：底部
Leading：左側(cè)
Center Horizontally：水平中心點(diǎn)
Trailing：右側(cè)
Equal Widths：等寬
Equal Heights：等高
Aspect Ratio：等比
最后兩個(gè)是操作的提醒：只按 CTRL 連一次線只能添加一個(gè)屬性粟关，
同時(shí)按住 CTRL + Shift，可以選擇多個(gè)屬性环戈。
