LBTATools 1.0.12

LBTATools 1.0.12

Brian Voong 维护。



LBTATools 1.0.12

Version License Platform

无聊 UI 代码的解决方案

你是否苦于丑陋的布局代码和无聊的 UICollectionViewController 脚本?是的,我们都经历过。我不是唯一写过像 来自地狱的野兽 一样混乱的视图设置函数的人。

现在,有一个解决这个问题的方法: LBTATools

我想要用这个库解决 3 个主要问题

  1. 使用 UIStackView 将所有内容排列成一行。
  2. 快速创建垂直和水平列表,但跳过无聊的 cell 注册、numItemsForSection、cellForItemAt 代码。
  3. 一行代码生成 UILabel、UIButton、UIView 等。

此库包含可扩展和类,可加快客户工作的开发。希望您可以利用这些技术中的某些。

1. 垂直和水平堆叠

布局通常可以分解为一些组合的水平和垂直 UIStackViews。以下示例展示了如何使用 stackhstack 来实现常见的布局模式。

示例 1:简单垂直布局

Example Layout 1

stack(imageView, nameLabel)
示例 2:先水平后垂直居中对齐

Example Layout 2

hstack(imageView,
       stack(nameLabel, messageLabel, spacing: 4),
       spacing: 16, alignment: .center)
// The key is to use stackView.alignment = .center   
示例 3:嵌套层叠与 layoutMargins。

Example Layout 3

stack(imageView,
      stack(titleLabel, 
      	    descriptionLabel, 
      	    UIView(), 
      	    exploreLabel, spacing: 16)).withMargins(.allSides(16)
// Using stackView.layoutMargins allows for easy padding manipulation

2. 快速简单的 ListController

编写 iOS 应用几乎总是涉及列表,很多列表。其中大多数将是垂直的,但水平列表也很常见。仅适用于单一单元格类型的列表。

Tinder 消息列表示例

Tinder Messages List


使用 LBTAListController,您只需几行代码即可构建此通用模式。首先,让我们将视图简化为一个垂直列表和一个包含水平列表的头部

Simplified List Header View

现在构建此列表非常简单

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))

视频教程

虽然这个库非常易于使用,但我明白大家想要一些视觉示例,所以下面是一些视频教程

使用 stack 和 hstack

安装 - Cocoapods

CocoaPods 是一个易于使用的依赖管理器。要安装 LBTATools,只需将以下行添加到您的 Podfile

pod 'LBTATools'

不,我不打算为 SPM 或任何其他系统编写这个

作者

布莱恩·万 @buildthatapp YouTube

许可

LBTATools 在 MIT 许可下可用。有关更多信息,请参阅 LICENSE 文件。