Auto Layout(NSLayoutConstraint)
Auto Layout(NSLayoutAnchor)
Auto Layout(Storyboard)
1 NSLayoutAnchor
- 對比NSLayoutConstraint和NSLayoutAnchor
- 建立NSLayoutAnchor
2 NSLayoutAnchor的子類
- 相關子類
- 擷取子類
3 實戰演練
- 效果圖模型
- 代碼實作
- 效果圖
1 NSLayoutAnchor
前面講到了NSLayoutConstraint限制UI界面。但是通過實際操作，這樣的寫法特别繁瑣特别麻煩。今天向大家介紹NSLayoutAnchor，這種寫法很簡潔大方。它會生成一個NSLayoutConstraint供你使用。
NSLayoutAnchor是IOS9推出的。
1.1 對比NSLayoutConstraint和NSLayoutAnchor
還記得NSLayoutConstraint建立限制時，如下所示。
NSLayoutConstraint(item: subview,
attribute: .Leading,
relatedBy: .Equal,
toItem: view,
attribute: .LeadingMargin,
multiplier: 1.0,
constant: 0.0).active = true
然後我們用NSLayoutAnchor建立同樣的限制。
subview.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor).active = true
一對比是否感覺使用NSLayoutAnchor更酸爽。
1.2 建立NSLayoutAnchor
使用建立限制有如下幾種方式
/* These methods return an inactive constraint of the form thisAnchor = otherAnchor.
*/
public func constraintEqualToAnchor(anchor: NSLayoutAnchor!) -> NSLayoutConstraint!
public func constraintGreaterThanOrEqualToAnchor(anchor: NSLayoutAnchor!) -> NSLayoutConstraint!
public func constraintLessThanOrEqualToAnchor(anchor: NSLayoutAnchor!) -> NSLayoutConstraint!
/* These methods return an inactive constraint of the form thisAnchor = otherAnchor + constant.
*/
public func constraintEqualToAnchor(anchor: NSLayoutAnchor!, constant c: CGFloat) -> NSLayoutConstraint!
public func constraintGreaterThanOrEqualToAnchor(anchor: NSLayoutAnchor!, constant c: CGFloat) -> NSLayoutConstraint!
public func constraintLessThanOrEqualToAnchor(anchor: NSLayoutAnchor!, constant c: CGFloat) -> NSLayoutConstraint!
建立NSLayoutAnchor限制的口訣和建立NSLayoutConstraint的口訣是一樣的，都是“前右下後左上”。即
- 左邊的View對應self，右邊的View對應anchor；
- 下面的View對應self，上面的View對應anchor。
2 NSLayoutAnchor的子類
2.1 相關子類
多數情況下，我們設定限制時是操作NSLayoutAnchor的子類。
- NSLayoutYAxisAnchor: Y軸限制。
- NSLayoutXAxisAnchor：X軸限制。
- NSLayoutDimension：界面限制，如寬和高。
這裡不在詳細介紹，開發過程中看看API就知道。
2.2 擷取子類
蘋果對view進行了擴充，便于大家設定限制的時候，擷取NSLayoutAnchor的子類。
extension UIView {
/* Constraint creation conveniences. See NSLayoutAnchor.h for details.
*/
@available(iOS , *)
public var leadingAnchor: NSLayoutXAxisAnchor { get }
@available(iOS , *)
public var trailingAnchor: NSLayoutXAxisAnchor { get }
@available(iOS , *)
public var leftAnchor: NSLayoutXAxisAnchor { get }
@available(iOS , *)
public var rightAnchor: NSLayoutXAxisAnchor { get }
@available(iOS , *)
public var topAnchor: NSLayoutYAxisAnchor { get }
@available(iOS , *)
public var bottomAnchor: NSLayoutYAxisAnchor { get }
@available(iOS , *)
public var widthAnchor: NSLayoutDimension { get }
@available(iOS , *)
public var heightAnchor: NSLayoutDimension { get }
@available(iOS , *)
public var centerXAnchor: NSLayoutXAxisAnchor { get }
@available(iOS , *)
public var centerYAnchor: NSLayoutYAxisAnchor { get }
@available(iOS , *)
public var firstBaselineAnchor: NSLayoutYAxisAnchor { get }
@available(iOS , *)
public var lastBaselineAnchor: NSLayoutYAxisAnchor { get }
}
3 實戰演練
3.1 效果圖模型
我們要實作和NSLayoutConstraint實戰演練一樣的效果圖。
一個黃View和一個綠View在不同的螢幕上顯示同樣的效果。
通過觀察我們寫出如下僞代碼。
- Yellow View.Leading = Superview.Leading + 20.0
- Yellow View.Top = Top Layout Guide.Bottom + 20.0
- Bottom Layout Guide.Top = Yellow View.Bottom + 20.0
- Green View.Trailing = Superview.Trailing + 20.0
- Green View.Top = Top Layout Guide.Bottom + 20.0
- Bottom Layout Guide.Top = Green View.Bottom + 20.0
- Green View.Leading = Yellow View.Trailing + 30.0
- Yellow View.Width = Green View.Width
3.2 代碼實作
在代碼實作的時候，UIView是預設禁止限制的，你要通過。
将該屬性設為false時，則代表啟用限制。
下面是核心代碼的實作。
//
// YJAutoLayoutAnchorVC.swift
// UI
//
// CSDN:http://blog.csdn.net/y550918116j
// GitHub:https://github.com//Blog
//
// Created by yangjun on //
// Copyright © 年 陽君. All rights reserved.
//
import UIKit
/// NSLayoutAnchor 是IOS9推出的，優化NSLayoutConstraint
class YJAutoLayoutAnchorVC: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 添加View
// 黃View
let yellowView = UIView()
yellowView.backgroundColor = UIColor.yellowColor()
self.view.addSubview(yellowView)
// 綠View
let greenView = UIView()
greenView.backgroundColor = UIColor.greenColor()
self.view.addSubview(greenView)
// 開啟AutoLayout
yellowView.translatesAutoresizingMaskIntoConstraints = false;
greenView.translatesAutoresizingMaskIntoConstraints = false;
// 設定限制
/* 限制僞代碼
Yellow View.Leading = Superview.Leading + 20.0
Yellow View.Top = Top Layout Guide.Bottom + 20.0
Bottom Layout Guide.Top = Yellow View.Bottom + 20.0
Green View.Trailing = Superview.Trailing + 20.0
Green View.Top = Top Layout Guide.Bottom + 20.0
Bottom Layout Guide.Top = Green View.Bottom + 20.0
Green View.Leading = Yellow View.Trailing + 30.0
Yellow View.Width = Green View.Width
*/
// yellow限制
yellowView.leadingAnchor.constraintEqualToAnchor(self.view.leadingAnchor, constant: ).active = true
yellowView.topAnchor.constraintEqualToAnchor(self.topLayoutGuide.bottomAnchor, constant: ).active = true
self.bottomLayoutGuide.topAnchor.constraintEqualToAnchor(yellowView.bottomAnchor, constant: ).active = true
// green限制
greenView.topAnchor.constraintEqualToAnchor(self.topLayoutGuide.bottomAnchor, constant: ).active = true
self.view.trailingAnchor.constraintEqualToAnchor(greenView.trailingAnchor, constant: ).active = true
self.bottomLayoutGuide.topAnchor.constraintEqualToAnchor(greenView.bottomAnchor, constant: ).active = true
// green和yellow的共有限制
greenView.leadingAnchor.constraintEqualToAnchor(yellowView.trailingAnchor, constant: ).active = true // 間距
greenView.widthAnchor.constraintEqualToAnchor(yellowView.widthAnchor, constant: ).active = true // 等寬
// 列印所有限制
for constraint in self.view.constraints {
print(constraint)
}
greenView.widthAnchor.constraintEqualToConstant(<#T##c: CGFloat##CGFloat#>)
}
}
3.3 效果圖
運作項目後，在不同的螢幕上都可以看到如下效果圖，還可以旋轉螢幕。
豎屏
橫螢幕
其他
源代碼
Swift
參考資料
NSLayoutAnchor Class Reference
Auto Layout Guide
文檔修改記錄
| 時間 | 描述 |
|---|---|
| 2015-12-19 | 博文完成 |
版權所有
CSDN：http://blog.csdn.net/y550918116j
GitHub：https://github.com/937447974/Blog