相对论
相对论提供了一种用于程序性布局的DSL,这使得实现像素级的间距和对齐变得容易。
程序性布局
有四个基本步骤用于程序性地布局视图。
- 创建视图。在
init
或viewDidLoad
中完成。 - 创建视图层次结构 使用
addSubview()
。在init
或viewDidLoad
中完成。 - 设置视图大小。在
layoutSubviews
中完成。 - 定位视图。在
layoutSubviews
中完成。
定位视图
每个视图都有九个锚点,用于对齐。
topLeft | top | topRight |
left | middle | right |
bottomLeft | bottom | bottomRight |
通过将视图上期望的锚点对齐到另一个视图的锚点加上一个偏移量来进行视图定位。使用 -->
将左侧的视图移动到右侧描述的位置。使用 <--
将右侧的视图移动到左侧描述的位置。您还可以通过使用在 ViewPosition.swift 中的 align(to:xOffset:yOffset)
方法显式地对齐视图。
示例
要将视图 a
与视图 b
保持 10 个点距离对齐
a.right --> 10.horizontalOffset + b.left
要将视图 a
与视图 b
保持 10 个点距离对齐
b.right + 10.horizontalOffset <-- a.left
要将视图 a
与其父视图的顶部中心保持 10 个点距离对齐
a.top --> 10.verticalOffset + .top
更多示例,请查看ViewPositionVisualization 组件页面。
UILabels
通过添加针对标签的六个锚点,Relativity 使您能够通过字体的高度和基线轻松对齐 UILabel
。
capLeft | cap | capRight |
baselineLeft | baseline | baselineRight |
如果您的规范要求您的 underlineView
的顶部与标签 a
的基线对齐,则需要以下操作
underlineView.top --> a.baseline
有关可视示例,请查看FontMetricsVisualization 组件页面。
子视图的灵活布局
由于视图需要在各种 iOS 设备尺寸上灵活布局,因此 Relativity 能够轻松地沿一个轴分布子视图。
可以通过在视图之间定位固定和灵活的间距来控制子视图的分布。固定间距表示屏幕上的点。通过将 CGFloatConvertible
(Int
、Float
、CGFloat
或 Double
)类型插入到分布表达式中,或者直接初始化一个 .fixed(CGFloatConvertible)
枚举情况来创建固定间距。灵活间距表示在考虑到子视图和固定间距之后的父视图中剩余空间的比例。您可以通过在 Int
周围加上弹簧 ~
运算符来创建灵活间距,或者直接初始化 .flexible(Int)
枚举情况。一个 ~2~
表示是 ~1~
的两倍空间。视图、固定间距和灵活间距通过双向锚点运算符 <>
相结合。
示例
将子视图 a
、b
和 c
沿着水平轴均匀分布在等距的位置
superview.distributeSubviewsHorizontally() {
a <> ~1~ <> b <> ~1~ <> c
}
使 a
与 b
之间的空间是 b
与 c
之间空间的两倍
superview.distributeSubviewsHorizontally() {
a <> ~2~ <> b <> ~1~ <> c
}
将 a
固定在距离左边界 8 个像素的位置,并在剩余空间内均等地分布 b
和 c
superview.distributeSubviewsHorizontally() {
8 <> a <> ~1~ <> b <> ~1~ <> c
}
将子视图 a
、b
和 c
沿着垂直轴均匀分布在等距的位置,但使子视图对齐在父视图的左侧一半
superview.distributeSubviewsVertically(within: CGRect(x: 0.0, y: 0.0, width: superview.bounds.midX, height: superview.bounds.height)) {
a <> ~1~ <> b <> ~1~ <> c
}
要查看可视化示例,请查看 ViewPositionVisualization 的 playground 页面。
像素取整
Relative 确保您永远不会将框架对齐到非整数像素,因此您不必担心 UI 模糊!我还提供了一套公共的 PixelRounder,供希望用它进行框架尺寸的用户使用。
设置视图大小
Relative 可以轻松根据之前布局的内容之间的空间来设置视图大小。使用 |--|
运算符来确定视图锚点之间的距离。
示例
将视图 b
设置为与视图 a
和 c
之间的空间大小一致
b.bounds.size = a.topRight |--| c.bottomLeft
将视图 b
设置为与视图 a
和 c
之间的空间大小一致,并有 16 个像素的水平内边距
b.bounds.size = a.topRight |--| c.bottomLeft + -16.horizontalOffset
将视图 b
设置为与视图 a
的高度一致,并适合在 a
的父视图右侧
b.bounds.size = CGSize(width: (a.right |--| .right).width, height: a.bounds.height)
要求
- Xcode 10.0 或更高版本。
- iOS 8 或更高版本。
- Swift 4.2 或更高版本。
安装
CocoaPods
使用 Cocoapods 在您的 iOS 项目中安装 Relativity,将以下内容添加到您的 Podfile
中:
platform :ios, '8.0'
pod 'Relativity', '~> 1.0'
Carthage
使用 Carthage 在您的 iOS 项目中安装 Relativity,将以下内容添加到您的 Cartfile
中:
github "dfed/Relativity"
运行 carthage
构建框架,并将构建的 Relativity.framework
拖入您的 Xcode 项目中。
Swift Package Manager
使用 Swift Package Manager 在您的 iOS 项目中安装 Relativity,可以将以下定义添加到您的 Project
依赖项中:
.Package(url: "https://github.com/dfed/Relativity.git", majorVersion: 1, minor: 0),
子模块
要使用 git 子模块,使用以下命令检出子模块:git submodule add [email protected]:dfed/Relativity.git
,将 Relativity.xcodeproj 拖到您的项目中,并将 Relativity 作为构建依赖项添加。
贡献
我很高兴你对 Relativity 感兴趣,并愿意看到你如何发展它。请在提交拉取请求之前阅读贡献指南。
谢谢,祝定位愉快!
著作权归属
向《Peter Westen》致敬,他的灵感催生了这个库的创建。