Storyboard 系列文章
[iOS] Storyboard (1) -- 入門：API 篇
[iOS] Storyboard (2) --入門：約束篇
[iOS] Storyboard (3) -- 使用：常用Tips
[iOS] Storyboard (4) -- 實踐：問題總結
[iOS] Storyboard (4) -- 實踐：UIScrollView
[iOS] Storyboard (4) -- 實踐：UICollectionView
一個完整的 Storyboard 大概是這個樣子：
主要分為三個紅框區域和三個籃框工具條：
- 控件列表及層級關系
- UI 效果
- 屬性設置、Frame布局約束等
- 視圖模式切換
- Autolayout 布局約束
- 設備選擇
這里的第一部分和第二部分很簡單，第一部分是每個控制器內所包含的視圖層級關系，多個控制器會依次并列顯示在這里；第二部分是我們主要的工作區域，添加控件，也是最終的 UI效果預覽區；
第三部分：屬性設置區
總共有六個選項，從左到右依次為：
Show the File Inspector（文件檢查器）、
Show the Quick help Inspector（快速幫助檢查器）、
Show the Identity Inspector（標識檢查器）、
Show the Attributes Inspector（屬性檢察器）、
Show the Size Inspector（尺寸檢查器）以及
Show the Connections Inspector（連接關系檢查器）；
在左側控件列表選中的控件不同時，各個選項下的內容也不盡相同，可以都點看看一些大致有哪些東西；其中，最常用的是第三個到第五個：
Show the Identity Inspector（標識檢查器）
前面說了，這里的內容，在選擇不同的控件時，顯示的內容略有區別，下面是選中 UIViewController 時的內容：
這里經常用到的是下面幾個:
Custom Class
Custom Class 下的 Class 是關聯我們新建的對應控件的子類的（即 .h/.m）；
** Identity**
Identity 下的 Storyboard ID，在我們使用 Storyboard 時會經常使用到這個，一般設置為和類名一致即可！
User Defined Runtime Attributes
這里使用 KVC 的特性, 設置類的 key-path 屬性, 在運行時通過 key-path 來設置對應控件的屬性, 在屬性面板沒有找到設置的屬性, 都可以在這里進行添加,這里舉一個??: 設置視圖圓角
一種方式是通過 layer 的屬性進行設置, 如果是代碼的話,會是這樣:
view.layer.cornerRadius = 6;
view.layer.borderWidth = 1;
而在這里可以這樣添加:
需要注意的是, 在設置邊框顏色時,因為這里只能選擇 UIColor, 而實際需要的是 CGColor, 解決方法就是, 給 layer 寫個擴展, 添加一個自定義屬性, 然后在這里設置這個屬性, 即: bColor, 通過這個屬性轉換一下即可; 這里的擴展大概是這樣:
// 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（屬性檢察器）
這里是我們設置控件的相應屬性的地方，根據選擇的控件不同，內容差別比較大，下面是選中 UIView 時的內容：
可以不同的控件都選中看一下，每種控件的大部分屬性都可以在這里進行設置，和使用代碼時的設置是一樣的；
Show the Size Inspector（尺寸檢查器）
這里主要是現實各個控件的坐標及約束信息的，修改控件坐標、約束，都可以在這里進行操作，這里也是我們經常使用的；下面是選中 UIView 的時候的內容：
View 下主要是坐標信息，直接修改 x/y/width/height 的值，即可；
Constraints 是約束信息，給控件添加約束后，這里會顯示所有的約束，如果我們想修改某個約束，也是在這里進行；
當我們想修改某條約束，直接點擊約束后面的 Edit，或者直接雙擊該約束，會跳到約束的編輯頁：
控件的約束，大致是按下面的公式進行計算：
First Item = Multiplier × Second Item + Constant
First Item：需要添加約束的視圖
Relation：關系，Equal（=）、Less Than or Equal to（<=）、Greater Than or Equal to（>=）
Second Item：相對某個視圖的約束，可以選擇參考的是哪個視圖和該視圖的哪個屬性
Constant：常量
Priority：優先級，一般不做修改
Multiplier：倍數
可以看下下面這個示例，約束是 綠色的寬是紅色寬的2倍加10 ：
即：GreenView.width = 2 × RedView.width + 10
第四部分：視圖面板
這里有四個按鈕：控件庫、Storyboard 面板、Storyboard & Code 雙面板、XML面板；
主要用到的是前三個，在需要將 Storyboard 中的控件連線到Code 中時，需要切換為 Storyboard & Code 雙面板（第三個）；
這里功能比較簡單，不做過多介紹；
第五部分：約束
這部分主要是我們為各個控件添加約束的，五個按鈕從左到右依次是：Update Frames、Embed In、Align、Add New Constrains、Resolve Auto Layout Issues
Update Frames：更新約束
經常使用
在修改了某個控件的約束后，如果視圖沒有立即變化，可在修改結束后，點擊這個按鈕，進行更新；
PS：需要注意，該按鈕大部分時間下是灰色不可點擊的，只有在約束有更新，并切選中的視圖是其父視圖的時候，才會變為可點擊的黑色；
Embed In：嵌入
常使用
可以看到我們可以將選中的視圖，嵌入到某些視圖/視圖控制器中；
Align：對齊
主要是需要將多個視圖對齊時使用
Leading Edges：左對齊
Trailing Edges：右對齊
Top Edges：頂部對齊
Bottom Edges：底部對齊
Horizontal Centers：垂直居中對齊
Vertrical Centers：水平居中對齊
Baselines：基線對齊
Horizontally in container：和父視圖的垂直中心線對齊
Verically in Container ：和父視圖的水平中心線對齊
除了最后兩個，前面的需要在選中多個視圖時，才是可選的；
選中多個視圖：按住Command鍵后即可多選
Add New Constrains：新加約束
主要是為單個控件添加約束的面板：
上下總共有三部分，第一部分是設置距離臨近控件的間隙，設置后紅色的虛線會變為紅色的實線，也可以點擊實線/虛線進行取消/添加約束；
這里有個復選框：Constrain to margins，勾選后，會在左右兩邊各有8pt 的間隙，在我們設置全屏的時候，如果不取消勾選，是無法全屏的，一般情況下，我們直接取消勾選即可；
第二部分，設置控件固定的寬高；
第三部分，看名稱也能猜到，等寬、等高、等比；
Resolve Auto Layout Issues：解決布局錯誤
這里主要分為兩部分：上半部分：Selected Views，只會作用在所選擇的控件上；下半部分：All Views in View Controller，會作用在所有的視圖上；每部分的功能都一樣，只不過作用的范圍不同，使用的時候需要注意這個；
Update Constraint Constants ：更新約束，一般不使用這個更新，而是使用 Upadte Frames
Add Missing Constraints ：如果我們添加的約束不足，系統推薦補全約束；一般不使用這個推薦，根據提示的不足，手動添加缺失的約束；使用這個的時候會有莫名其妙的問題
Reset to Suggested Constraints：重置為系統推薦的約束，同上面那個，一般不使用
Clear Constraints：清除約束。使用的時候需要注意是清除所有的還是某個控件的
這里常用的也就是最后一個 Clear Constraints，在我們添加約束遇到無法解決的問題，或者修改的太多，直接清除，然后重新添加；
第六部分：設備
點擊后，可以選擇不同的設備以及橫豎屏，并可以調節畫布的大小
這里需要注意的是 Vary for Traits（不同特征）按鈕，如果需要在不同的設備或者不同的設備方向有不同的 UI 布局，可以使用這個功能；
例如, 我們先選擇豎屏, 對控件進行了布局約束, 然后再選擇橫屏時, 這時候的UI布局可能就不是我們希望的, 也就是說, 在橫豎屏狀態下, UI 的布局是不一樣的;
我們可以這樣操作, 在選擇橫屏后, 點擊 Vary for Traits , 選擇 width & height, 然后進行橫屏的布局;
點擊后會彈出一個選擇框：
選擇特征的依據，Width、Height 或者 兩者都選，然后點擊空白區域，彈框消失；這時候，面板會變為這樣：
點擊手機模型圖標，會彈出所有支持的設備，可以選擇需要的設備，然后進行控件/約束的添加。
注意, 在未完成布局前, 不要點擊 Done Varying, 橫屏狀態下的所有控件布局結束后, 再點擊 Done Varying; 然后, 運行模擬器, 切換橫豎屏, 就會看到不同的布局
完成后就是這個樣子 ??
連線添加約束
除了使用上面的面板來為控件添加約束，還有一種方式是連線：
選中控件，按住 CTRL 鍵，點擊左鍵，拖拽到需要參考的另一個控件上：
在彈出框中選擇要添加的屬性：
Horizontal Spacing：橫向間距
Vertical Spacing：垂直間距
Vertical Baseline Standard Spacing：垂直基線標準間距
Top：頂部
Center Vertically：垂直中心點
First Baseline：第一基線
Bottom：底部
Leading：左側
Center Horizontally：水平中心點
Trailing：右側
Equal Widths：等寬
Equal Heights：等高
Aspect Ratio：等比
最后兩個是操作的提醒：只按 CTRL 連一次線只能添加一個屬性，
同時按住 CTRL + Shift，可以選擇多個屬性。
