无聊 UI 代码的解决方案
你是否苦于丑陋的布局代码和无聊的 UICollectionViewController 脚本?是的,我们都经历过。我不是唯一写过像 来自地狱的野兽 一样混乱的视图设置函数的人。
现在,有一个解决这个问题的方法: LBTATools。
我想要用这个库解决 3 个主要问题
- 使用 UIStackView 将所有内容排列成一行。
- 快速创建垂直和水平列表,但跳过无聊的 cell 注册、numItemsForSection、cellForItemAt 代码。
- 一行代码生成 UILabel、UIButton、UIView 等。
此库包含可扩展和类,可加快客户工作的开发。希望您可以利用这些技术中的某些。
1. 垂直和水平堆叠
布局通常可以分解为一些组合的水平和垂直 UIStackViews。以下示例展示了如何使用 stack 和 hstack 来实现常见的布局模式。
示例 1:简单垂直布局
stack(imageView, nameLabel)
示例 2:先水平后垂直居中对齐
hstack(imageView,
stack(nameLabel, messageLabel, spacing: 4),
spacing: 16, alignment: .center)
// The key is to use stackView.alignment = .center
示例 3:嵌套层叠与 layoutMargins。
stack(imageView,
stack(titleLabel,
descriptionLabel,
UIView(),
exploreLabel, spacing: 16)).withMargins(.allSides(16)
// Using stackView.layoutMargins allows for easy padding manipulation
2. 快速简单的 ListController
编写 iOS 应用几乎总是涉及列表,很多列表。其中大多数将是垂直的,但水平列表也很常见。仅适用于单一单元格类型的列表。
Tinder 消息列表示例
使用 LBTAListController,您只需几行代码即可构建此通用模式。首先,让我们将视图简化为一个垂直列表和一个包含水平列表的头部
现在构建此列表非常简单
class GreenCell: LBTAListCell<UIColor> {
override var item: UIColor! { didSet { backgroundColor = item }}
}
class SimpleListController: LBTAListController<GreenCell, UIColor, SimpleHeader> {
override func viewDidLoad() {
super.viewDidLoad()
items = [.green, .green, .green, .green]
}
// sizing methods
}
头部还包含一个 ListController 组件
class SimpleHeader: UICollectionReusableView {
class BlueCell: LBTAListCell<UIColor> {
override var item: UIColor! { didSet { backgroundColor = item }}
}
class HeaderHorizontalController: LBTAListController<BlueCell,
UIColor> {
override func viewDidLoad() {
super.viewDidLoad()
items = [.blue, .blue, .blue, .blue]
}
}
let blueCellsHorizontalController = HeaderHorizontalController(scrollDirection: .horizontal)
override init(frame: CGRect) {
super.init(frame: frame)
stack(blueCellsHorizontalController.view)
}
required init?(coder aDecoder: NSCoder) {
fatalError()
}
}
运行此存储库中的示例项目,以查看代码的全部内容。LBTAListController 使用泛型的力量来处理动态单元格和头部类。
3. 一线 UI 元素
创建 UI 元素的一个主要问题是我们在设置阶段必须设置的属性数量。以下是我们要避免的一个非常常见且不美观的代码块
let nameLabel: UILabel = {
let label = UILabel()
label.text = "Name"
label.textColor = .black
label.textAlignment = .center
label.font = .boldSystemFont(ofSize: 16)
label.numberOfLines = 2
return label
}()
总共是 9 行代码,当创建多个标签、按钮等时,会变得失去控制。所以,让我们用一个简单的线条来完成这个任务
let nameLabel = UILabel(text: "Name", font: .boldSystemFont(ofSize: 16), textColor: .black,
textAlignment: .center, numberOfLines: 2)
上述所有参数都是可选的,这意味着您也可以使用
let nameLabel = UILabel(text: "Name", numberOfLines: 2)
创建 UIButtons 也属于这个类别的“编程地狱”,所以让我们用一个一条指令来完成它
let nextButton = UIButton(title: "Next", titleColor: .white, font: .boldSystemFont(ofSize: 18),
backgroundColor: .white, target: self, action: #selector(handleNext))
视频教程
虽然这个库非常易于使用,但我明白大家想要一些视觉示例,所以下面是一些视频教程
安装 - Cocoapods
CocoaPods 是一个易于使用的依赖管理器。要安装 LBTATools,只需将以下行添加到您的 Podfile
pod 'LBTATools'
不,我不打算为 SPM 或任何其他系统编写这个
作者
布莱恩·万 @buildthatapp YouTube
许可
LBTATools 在 MIT 许可下可用。有关更多信息,请参阅 LICENSE 文件。