這是一篇我關(guān)于 AutoLayout 的使用以及學(xué)習(xí)的總結(jié)文章。持續(xù)更新。
2016-08-22 更新，修復(fù)了少許 Bug. 變更了函數(shù)名。重寫了一下文檔。
AutoLayout.swift
AutoLayout 封裝庫。
使用函數(shù)式編程簡化純代碼 AutoLayout 的編寫過程，并保持代碼的簡潔。
純 Swift 編寫，輕量，易用。
覺得好用的話，給我點個星星，謝謝。
代碼調(diào)用示例圖
// 上述示例圖的代碼實現(xiàn)
func useAutoLayout() {
let SView: UIView = UIView()
let AView: UIView = UIView()
let BView: UIView = UIView()
SView.addSubview(AView)
SView.addSubview(BView)
// 1
AutoLayout(SView, AView).centerSize()
// 2
AutoLayout(SView, AView).centerSize(0, 0.5)
// 3
AutoLayout(SView, AView).leadingTopTrailing().width(0, 0.5)
// 4
AutoLayout(SView, BView).leadingTopTrailing()
AutoLayout(SView, AView).topTrailingBottom()
.second(BView).width().horizontal(10)
// 5
AutoLayout(SView, AView).size(AView, 50, 50).centerX().centerY(0, 0.5)
AutoLayout(SView, BView).size(BView, 50, 50).centerX().centerY(0, 1.5)
// 6
AutoLayout(SView, AView)
.width(AView, 50)
.aspectRatio(AView)
.add(.CenterX, SEdge: .CenterX, constant: 0, multiplier: 1)
.add(.CenterY, SEdge: .CenterY, constant: 0, multiplier: 0.5)
AutoLayout(SView, BView)
.width(BView, 50)
.aspectRatio(BView)
.add(.CenterX, SEdge: .CenterX, constant: 0, multiplier: 1)
.add(.CenterY, SEdge: .CenterY, constant: 0, multiplier: 1.5)
}
Api
Api 設(shè)計規(guī)則
- 屬性：必須使用的視圖對象以及其設(shè)置方法，以及設(shè)置之后的 layout 對象。
- 方法
- 全自定義方法：可完全自定義 Layout 的方法。
- 單邊，多邊... 按邊數(shù)定義的 Layout 方法，函數(shù)名稱即為要設(shè)置對齊的邊。
參數(shù)基本上都設(shè)置了默認(rèn)值，并省略外部參數(shù)名。
- 屬性
- Views
- weak var view: UIView! /// 父視圖
- weak var first: UIView! /// 添加約束的視圖
- weak var second: UIView? /// 作為對比的視圖
- 初始化，設(shè)置對象
- init(_ view: UIView, _ first: UIView, _ second: UIView? = nil)
- func first(view: UIView) -> AutoLayout
- func second(view: UIView?) -> AutoLayout
- func views(first: UIView, _ second: UIView?) -> AutoLayout
- Constraints
- var _constrants: [NSLayoutConstraint] /// 約束存放數(shù)組
- func clearConstrants() -> AutoLayout
- func constrants(block: ([NSLayoutConstraint]) -> Void) -> AutoLayout
- Views
- 全自定義方法
- func add(FEdge: NSLayoutAttribute, SEdge: NSLayoutAttribute, constant: CGFloat = 0, multiplier: CGFloat = 1, priority: Float = 1000, related: NSLayoutRelation = .Equal) -> AutoLayout
- func layout(FEdge: NSLayoutAttribute, SEdge: NSLayoutAttribute, constant: CGFloat = 0, multiplier: CGFloat = 1, priority: Float = 1000, related: NSLayoutRelation = .Equal) -> NSLayoutConstraint
- 寬高方法
- func width(view: UIView, _ constant: CGFloat, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func height(view: UIView, _ constant: CGFloat, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func aspectRatio(view: UIView, _ constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func size(view: UIView, _ width: CGFloat, _ height: CGFloat, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- 單邊對比方法
- func top(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func bottom(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func leading(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func trailing(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func centerX(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func centerY(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func width(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func height(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- 距離
- func horizontal(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- func vertical(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
- 雙邊對比方法
- 常用
- func center(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- func size(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- func leadingTrailing(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- func topBottom(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- 角落
- func leadingTop(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- func topTrailing(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- func trailingBottom(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- func bottomLeading(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- 常用
- 三邊對比方法
- func bottomLeadingTop(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- func leadingTopTrailing(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- func topTrailingBottom(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- func trailingBottomLeading(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
- 四邊對比方法
- func centerSize(constant: CGFloat = 0, _ multiplier: CGFloat = 1, priority: Float = 1000) -> AutoLayout
- func edge(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
設(shè)計思路
來源
對蘋果 NSLayoutConstraint 類進行封裝。并提供鏈?zhǔn)骄幊谭椒ǎ啙嵳{(diào)用代碼。
NSLayoutConstraint
convenience init(item view1: AnyObject,
attribute attr1: NSLayoutAttribute,
relatedBy relation: NSLayoutRelation,
toItem view2: AnyObject?,
attribute attr2: NSLayoutAttribute,
multiplier multiplier: CGFloat,
constant c: CGFloat)
注意要點：
- 除了自身寬高設(shè)置以外，layoutContraint 都需要添加到父視圖當(dāng)中。
- 所有添加 Autolayout 的視圖都需要把 translatesAutoresizingMaskIntoConstraints 設(shè)置為 false.
- priority 優(yōu)先度需要額外進行設(shè)置。
- multiplier 倍數(shù)，在第一次設(shè)置之后就無法進行更改。
- constant 差額，可進行后期變更。
- 計算公式：
view1.att1 relation view2.attr2 * multiplier + constant
或者
view1.att1 (==, >=, <=) view2.attr2 * mulitiplier + constant
設(shè)計原則
- 調(diào)用模式為鏈?zhǔn)秸{(diào)用，可一次性添加多個約束。
- 函數(shù)調(diào)用使用默認(rèn)值參數(shù)，方便使用時減少常用參數(shù)的重復(fù)設(shè)置。
- 調(diào)用之后可獲取 layoutContraint, 作為后期動畫變動使用。
更新記錄
- 2016-08-19 創(chuàng)建。
我的 GitHub 空間
