iOS 中的 Auto Layout 用于在屏幕上排列和布局视图非常好。通过 Interface Builder 使用它相当容易,但当你想通过代码来布局子视图时,这个过程变得相当繁琐。尽管使用视觉格式语言使其变得稍微容易一些,但 NSLayoutContraint
类并没有提供易于使用的接口。此框架提供了一组高级、直观且易于使用的 API,用于创建和使用 Auto Layout 约束。
Layout
类此框架的核心元素是 Layout
类。它不仅提供了一套直观且易于使用的方法来创建 Auto Layout 约束,而且还有助于您管理这些约束。一个 Layout
类的实例绑定到一个顶级视图,并可用于为该视图及其所有子视图创建约束。
Layout
实例和管理约束//This instance will be used to create and manage auto layout constraints for rootView and all of its subives.
let layout = Layout(view: rootView)
//Create constraints ...
//Install all constraints
layout.installConstraints()
//Uninstall all constraints but keep them
layout.uninstallConstraints()
//Activate all constraints
layout.activateConstraints()
//Deactivate all constraints
layout.deactivateConstraints()
//Clear all constraints i.e. uninstall and remove.
layout.clearConstraints()
创建约束的每个方法都返回它创建的约束,因此如果稍后需要操作任何特定的约束,可以这样做。请查阅具体方法的文档以获取更多详细信息。
以下方法用于创建设置大小、高度和宽度的约束。
setForView(view: UIView, size: CGSize)
setForView(view: UIView, width: CGFloat, height: CGFloat)
setForView(view: UIView, height: CGFloat)
setForView(view: UIView, width: CGFloat)
setForView(view: UIView, heightLessOrEqual: CGFloat)
setForView(view: UIView, heightGreaterOrEqual: CGFloat)
setForView(view: UIView, widthLessOrEqual: CGFloat)
setForView(view: UIView, widthGreaterOrEqual: CGFloat)
以下方法用于创建相对于另一个视图设置视图大小、高度或宽度的约束。
makeWidthOfView(view: UIView, equalTo: UIView, offset: CGFloat = 0)
makeHeightOfView(view: UIView, equalTo: UIView, offset: CGFloat = 0)
makeSizeOfView(view: UIView, equalTo: UIView, offsetWidth: CGFloat = 0, offsetHeight: CGFloat = 0)
makeWidthOfView(view: UIView, greaterOrEqualTo: UIView, offset: CGFloat = 0)
makeHeightOfView(view: UIView, greaterOrEqualTo: UIView, offset: CGFloat = 0)
makeWidthOfView(view: UIView, lessOrEqualTo: UIView, offset: CGFloat = 0)
makeHeightOfView(view: UIView, lessOrEqualTo: UIView, offset: CGFloat = 0)
//Following two method will make width or height of a view relative to another view i.e
//half, double, 3/4 etc.
makeWidthOfView(view: UIView, relativeTo: UIView, multiplier: CGFloat)
makeHeightOfView(view: UIView, relativeTo: UIView, multiplier: CGFloat)
以下方法将一个视图沿轴或边缘与另一个视图对齐。
alignCenterOfView(view: UIView, withView: UIView, offsetX: CGFloat = 0, offsetY: CGFloat = 0)
alignCenterWithSuperview(view: UIView, offsetX: CGFloat = 0, offsetY: CGFloat = 0)
alignCenterWithSuperview(views: [UIView], offsetX: CGFloat = 0, offsetY: CGFloat = 0)
verticallyAlignView(view: UIView, withView: UIView, offset: CGFloat = 0)
verticallyAlignWithSuperview(view: UIView, offset: CGFloat = 0)
verticallyAlignWithSuperview(views: [UIView], offset: CGFloat = 0)
horizontallyAlignView(view: UIView, withView: UIView, offset: CGFloat = 0)
horizontallyAlignWithSuperview(view: UIView, offset: CGFloat = 0)
horizontallyAlignWithSuperview(views: [UIView], offset: CGFloat = 0)
alignTopOfView(view: UIView, withView: UIView, offset: CGFloat = 0)
alignBottomOfView(view: UIView, withView: UIView, offset: CGFloat = 0)
alignLeadingOfView(view: UIView, withView: UIView, offset: CGFloat = 0)
alignTrailingOfView(view: UIView, withView: UIView, offset: CGFloat = 0)
以下方法将一个视图相对于另一个视图放置。
placeView(view: UIView, below: UIView, spacing: CGFloat = 0)
placeView(view: UIView, above: UIView, spacing: CGFloat = 0)
placeView(view: UIView, leftOf: UIView, spacing: CGFloat = 0)
placeView(view: UIView, rightOf: UIView, spacing: CGFloat = 0)
使用以下方法将视图的边缘固定到其父视图的边缘或边距。
pinToTopEdgeOfSuperview(view: UIView, offset: CGFloat = 0)
pinToTopMarginOfSuperview(view: UIView, offset: CGFloat = 0)
pinToBottomEdgeOfSuperview(view: UIView, offset: CGFloat = 0)
pinToBottomMarginOfSuperview(view: UIView, offset: CGFloat = 0)
pinToLeadingEdgeOfSuperview(view: UIView, offset: CGFloat = 0)
pinToLeadingMarginOfSuperview(view: UIView, offset: CGFloat = 0)
pinToTrailingEdgeOfSuperview(view: UIView, offset: CGFloat = 0)
pinToTrailingMarginOfSuperview(view: UIView, offset: CGFloat = 0)
以下方法创建将给定视图以特定方式填充父视图的约束。
fillWidthOfSuperview(view: UIView, respectMargin: Bool = true)
fillHeightOfSuperview(view: UIView, respectMargin: Bool = true)
fillTopOfSuperview(view: UIView, respectMargin: Bool = true)
fillBottomOfSuperview(view: UIView, respectMargin: Bool = true)
fillLeadingSideOfSuperview(view: UIView, respectMargin: Bool = true)
fillTrailingSideOfSuperview(view: UIView, respectMargin: Bool = true)
fillSuperview(view: UIView, respectMargin: Bool = true)
如果您想使用视觉格式语言创建一些约束,可以按照以下方法操作
//Use this special initializer to initialize Layout object
let layout = Layout(view: rootView, viewMap:["rootView": rootView, "subview1": subview1, "subview2": subview2])
layout.createWithVisualFormat(“V:|-[subivew1]-|”)
通过扩展 AutoLayout
类来使用自动布局创建自定义视图。以下示例展示了如何使用自动布局创建自定义视图。
class PinSuverviewView : AutoLayoutView {
var topLabel = UILabel.instanceWithAutoLayout()
var bottomLabel = UILabel.instanceWithAutoLayout()
var leadingLabel = UILabel.instanceWithAutoLayout()
var trailingLabel = UILabel.instanceWithAutoLayout()
/**
Initialize your view and its subviews here. This method will be called
from initializer so you do not need to call it manually
*/
override func initializeView() {
super.initializeView() //Do not forget to call super method.
backgroundColor = UIColor.whiteColor()
//Initialize all the views here
topLabel.textAlignment = .Center
//Lot more initialization.
addSubview(topLabel)
addSubview(bottomLabel)
addSubview(leadingLabel)
addSubview(trailingLabel)
}
/**
Add all the constraints in this method. Use the `Layout` object that
is passed to it to create and add constraints.
*/
override func addConstraints(layout: Layout) {
layout.pinToTopMarginOfSuperview(topLabel, offset: 10)
layout.horizontallyAlignView(topLabel, withView: self)
layout.pinToBottomMarginOfSuperview(bottomLabel)
layout.horizontallyAlignView(bottomLabel, withView: self)
layout.pinToLeadingEdgeOfSuperview(leadingLabel)
layout.verticallyAlignView(leadingLabel, withView: self)
layout.pinToTrailingMarginOfSuperview(trailingLabel)
layout.verticallyAlignView(trailingLabel, withView: self)
}
}
以类似的方式扩展 AutoLayoutTableViewCell
以创建带有自动布局的自定义表格视图单元格。
VerticalLinearLayoutView
和 HorizontalLinearLayoutView
分别以垂直和水平方式排列它们的子视图。这类似于 Android 中的 LinearLayout。
请检查示例代码以获取示例,以及查看文档获取更多详细信息。
在 UIScrollView
中管理子视图和动态调整内容大小相当麻烦。本框架中提供的两个类使您轻松实现,它们是 AutoAdjustContentSizeVerticalScrollView
和 AutoAdjustContentSizeHorizontalScrollView
。可以将它们视为具有滚动功能的线性布局。
请检查示例代码以获取示例,以及查看文档获取更多详细信息。
此时,项目已成为您工作空间的一部分。您需要在目标部分添加对其的引用。
MIT 许可证 (MIT)
版权所有 (c) 2015 abdullah-chhatra
在此特此许可,免费向任何获得本软件及其相关文档文件(以下称为“软件”)副本的人提供许可,以无限制地处理该软件,包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本,并允许向获供软件的人士做出上述行为,但受以下条件约束:
上述版权声明和本许可声明应包含在软件的所有副本或实质性部分中。
本软件供应“现状”,不提供任何形式的质量保证,无论是明示的、暗示的,包括但不限于适销性、特定用途适合性和非侵权性。在任何情况下,作者或版权所有者不对因软件引起的任何索赔、损害或其他责任负责,不论是根据合同、侵权或其他方式,只要与该软件或软件的使用或其他行为有关。