[iOS] Storyboard (2) --入門:約束篇

Storyboard 系列文章
[iOS] Storyboard (1) -- 入門:API 篇
[iOS] Storyboard (2) --入門:約束篇
[iOS] Storyboard (3) -- 使用:常用Tips
[iOS] Storyboard (4) -- 實踐:問題總結
[iOS] Storyboard (4) -- 實踐:UIScrollView
[iOS] Storyboard (4) -- 實踐:UICollectionView

一個完整的 Storyboard 大概是這個樣子:

主要分為三個紅框區域和三個籃框工具條:

  1. 控件列表及層級關系
  2. UI 效果
  3. 屬性設置、Frame布局約束等
  4. 視圖模式切換
  5. Autolayout 布局約束
  6. 設備選擇

這里的第一部分和第二部分很簡單,第一部分是每個控制器內所包含的視圖層級關系,多個控制器會依次并列顯示在這里;第二部分是我們主要的工作區域,添加控件,也是最終的 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 InAlignAdd New ConstrainsResolve Auto Layout Issues

Update Frames:更新約束

經常使用
在修改了某個控件的約束后,如果視圖沒有立即變化,可在修改結束后,點擊這個按鈕,進行更新;

PS:需要注意,該按鈕大部分時間下是灰色不可點擊的,只有在約束有更新,并切選中的視圖是其父視圖的時候,才會變為可點擊的黑色;

Embed In:嵌入

常使用


可以看到我們可以將選中的視圖,嵌入到某些視圖/視圖控制器中;

Align:對齊

主要是需要將多個視圖對齊時使用

屏幕快照 2019-01-16 下午2.48.21.png

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; 然后, 運行模擬器, 切換橫豎屏, 就會看到不同的布局

完成后就是這個樣子 ??


橫豎屏不同的UI布局

連線添加約束

除了使用上面的面板來為控件添加約束,還有一種方式是連線:
選中控件,按住 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,可以選擇多個屬性。

參考文章

iOS 10可視化編程之約束篇
iOS Storyboard約束詳解(附gif圖)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。