FAAutoLayout
FAAutoLayout 是一个紧凑的 Auto Layout 库,用于 iOS。它基于 NSLayoutConstraint 构建,扩展了 UIView 的功能,使开发者能够以编程方式直观地创建约束,就像在使用界面构建器时一样。
这个轻量级的库是针对喜欢在不需要使用 storyboard 或 XIB 文件的情况下创建界面的用户设计的,有助于减少定义布局约束时的样板代码。
命名旨在使习惯于使用界面构建器添加约束的开发者快速采用库。有关更多详细示例,请参阅 用法 部分。
要求
使用 FAAutoLayout
所需的最低要求如下:
- iOS 8.0
- Xcode 8
- 兼容 Obj-C 和 Swift
安装
CocoaPods
您可以使用CocoaPods将FAAutoLayout
添加到您的项目中。要安装它,只需在您的Podfile
中指定它即可。
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!
target 'TargetName' do
pod 'FAAutoLayout', '~> 0.4.1'
end
在Podfile中指定新的依赖项后,只需运行pod install
以确保安装库的最新版本。
Carthage
Carthage是一个去中心化的依赖项管理器,它构建您的依赖项并为您提供二进制框架。
要使用Carthage将FAAutoLayout
集成到Xcode项目中,请在您的Cartfile
中指定它。
github "fabioameida/FAAutoLayout" ~> 0.4.1
运行carthage update
以构建框架,并将构建好的FAAutoLayout.framework
拖到您的Xcode项目中。
使用方法
要将库导入到项目中,只需将以下行添加到Swift文件中:
import FAAutoLayout
如果您有一个想要添加到UIViewController并使其填充所有边界的视图,您只需 انجام volgende步骤
let backgroundView = UIView()
backgroundView.backgroundColor = .lightGray
self.view.addSubview(backgroundView)
// with only one line of code all the 4 needed constraints are automatically added to the view
backgroundView.fillContainer()
对于添加固定宽度和高度并位于视图左上角的视图
let topLeftView = UIView()
topLeftView.backgroundColor = .blue
backgroundView.addSubview(topLeftView)
topLeftView.constrainLeadingSpaceToContainer()
topLeftView.constrainTopSpaceToContainer(10)
topLeftView.constrainWidth(150)
topLeftView.constrainHeight(45)
如果我们想在同一层级的两个视图之间定义关系(例如,共享同一superview
),我们可以定义它们之间的一个水平间隔约束
let topRightView = UIView()
topRightView.backgroundColor = .red
backgroundView.addSubview(topRightView)
topRightView.constrainHorizontalSpacing(toView: topLeftView, constant: 20)
topRightView.constrainTopSpaceToContainer(10)
topRightView.constrainTrailingSpaceToContainer(30)
topRightView.constrainEqualHeight(toView: topLeftView, constant: 0, relation: .equal, priority: UILayoutPriorityRequired, multiplier: 2)
请注意,在先前的示例中,高度不是一个固定值,而是使用第一个视图的高度和一个乘数来计算的。
始终可以将添加的约束存储起来以便稍后更改。
let heightConstraint = topLeftView.constrainHeight(45)
// (...)
heightConstraint.constant = 80
在上面的示例中,很多约束都是与容器视图相关的。但是,也可以将这些关系创建在其他在容器视图层叠链中位于上方的视图中。
// container view that will sit below topLeftView
let containerView1 = UIView()
containerView1.backgroundColor = .green
backgroundView.addSubview(containerView1)
containerView1.constrainWidth(200)
containerView1.constrainHeight(200)
containerView1.constrainVerticalSpacing(toView: topLeftView, constant: 100)
containerView1.constrainLeadingSpaceToContainer(10)
// view that will adapt to containerView1
let containerView2 = UIView()
containerView2.backgroundColor = .black
containerView1.addSubview(containerView2)
containerView2.fillContainer(40)
// view that that despite being inside containerView2, will adapt to containerView1
let containerView3 = UIView()
containerView3.backgroundColor = .orange
containerView3.alpha = 0.5
containerView2.addSubview(containerView3)
// here, even though containerView2 is the container for containerView3, we can make a relation to containerView1 since it the the superview of containerView2
containerView3.fill(view: containerView1, constant: 20)
最终结果将类似于以下图像
在某些情况下,我们需要创建我们的视图以便在程序中,因为它们的数量可能动态取决于一些业务逻辑。在下面的示例中,您可以看到两个允许您通过单个函数调用将约束添加到UIView数组中的UIView
类方法
let dynamicNumberOfViews = 5
var dynamicViews = [UIView]()
for _ in 0..<dynamicNumberOfViews {
let newView = UIView()
newView.backgroundColor = .blue
dynamicViews.append(newView)
self.view.addSubview(newView)
// add constraints
newView.constrainHeight(50)
newView.constrainTopSpaceToContainer(15)
}
// as you can see here, these methods are not called on some UIView instance but are UIView class methods
UIView.constrainEqualWidth(dynamicViews)
UIView.constrainEqualHorizontalSpacing(dynamicViews, constant: 30)
dynamicViews.first?.constrainLeadingSpaceToContainer(15)
dynamicViews.last?.constrainTrailingSpaceToContainer(15)
这将创建一个类似以下 viewers
所有这些示例都可以在“Examples”项目仓库中找到。
结构
您可以添加的约束类型主要有以下几种
- 前端
- 后端
- 顶部
- 底部
- 宽度
- 高度
- 中心(中间/垂直/水平)
- 填充
- 间距(垂直/水平)
在几乎所有的方法中,您都可以指定多个参数,如 constant
(常数)、multiplier
(乘数)、relation
(关系)或 priority
(优先级)。然而,为了便于代码阅读并避免模板代码,一般规则是所有参数都有 默认值。
这意味着对于大多数常规情况,例如,如果要将视图的顶部约束到容器上,您可以这样做:
myView.constrainTopSpaceToContainer()
但如果你想要添加边距,也可以指定一个常数
myView.constrainTopSpaceToContainer(20)
然而,如果你想指定其他参数,例如 NSLayoutRelation
或 UILayoutPriority
,你也可以在仅仅一行中这样做
myView.constrainTopSpaceToContainer(20, relation: .greaterThanOrEqual, priority: UILayoutPriorityRequired, multiplier: 0.7)
作者
如果您想联系我,请在twitter上找到我: @fabioacalmeida
许可证
FAAutoLayout 依据 MIT 许可证提供。有关更多信息,请参阅 LICENSE 文件。