FrameLayoutKit

一个超快速且易于使用的 iOS 布局库。 FrameLayoutKit 支持复杂的布局，包括通过简单直观的操作数语法进行链式布局和嵌套布局。

它简化了 UI 创建过程，从而使代码更简洁且更易于维护。

为什么选择它？

对自动布局约束噩梦说“不”

自动布局	FrameLayoutKit

安装

FrameLayoutKit 可通过 Swift Package Manager (推荐) 和 CocoaPods 获取

无论使用哪种方式，请务必在您需要使用它的地方导入项目

import FrameLayoutKit

Cocoapods

FrameLayoutKit 可以作为 CocoaPod 安装。要安装，请将其包含在您的 Podfile 中。

pod "FrameLayoutKit"

Swift Package Manager

建议使用 Swift Package Manager 安装 FrameLayoutKit。

点击 File（文件）
Add Packages...（添加包...）
指定 FrameLayoutKit 的 git URL。

https://github.com/kennic/FrameLayoutKit.git

示例

FrameLayoutKit 工作方式的一些示例

源代码

结果

let frameLayout = HStackLayout()
frameLayout + VStackLayout {
   ($0 + earthImageView).alignment = (.top, .center)
   ($0 + 0).flexible() // add a flexible space
   ($0 + rocketImageView).alignment = (.center, .center)
}
frameLayout + VStackLayout {
   $0 + [nameLabel, dateLabel] // add an array of views
   $0 + 10 // add a space with a minimum of 10 pixels
   $0 + messageLabel // add a single view
}.spacing(5.0)

frameLayout
   .spacing(15)
   .padding(top: 15, left: 15, bottom: 15, right: 15)
   .debug(true) // show dashed lines to visualize the layout

源代码

结果

let frameLayout = VStackLayout {
  ($0 + imageView).flexible()
  $0 + VStackLayout {
     $0 + titleLabel
     $0 + ratingLabel
  }
}.padding(top: 12, left: 12, bottom: 12, right: 12)
 .distribution(.bottom)
 .spacing(5)

源代码

结果

let posterSize = CGSize(width: 100, height: 150)
let frameLayout = ZStackLayout()
frameLayout + backdropImageView
frameLayout + VStackLayout {
 $0 + HStackLayout {
  ($0 + posterImageView).fixedSize(posterSize)
    $0 + VStackLayout {
      $0 + titleLabel
      $0 + subtitleLabel
    }.padding(bottom: 5).flexible().distribution(.bottom)
  }.spacing(12).padding(top: 0, left: 12, bottom: 12, right: 12)
}.distribution(.bottom)

源代码

结果

let buttonSize = CGSize(width: 45, height: 45)
let cardView = VStackLayout()
  .spacing(10)
  .padding(top: 24, left: 24, bottom: 24, right: 24)

cardView + titleLabel
(cardView + emailField).minHeight = 50
(cardView + passwordField).minHeight = 50
(cardView + nextButton).fixedHeight = 45
(cardView + separateLine)
  .fixedContentHeight(1)
  .padding(top: 4, left: 0, bottom: 4, right: 40)
cardView + HStackLayout {
 ($0 + [facebookButton, googleButton, appleButton])
  .forEach { $0.fixedContentSize(buttonSize) }
}.distribution(.center).spacing(10)

两种代码语法

常规语法	链式语法
frameLayout.distribution = .center frameLayout.spacing = 16 frameLayout.isFlexible = true	frameLayout .distribution(.center) .spacing(16) .flexible()

DSL 语法

在 FrameLayoutKit 中，DSL（领域特定语言）语法提供了一种更具声明性和可读性的方式来定义布局，非常类似于 SwiftUI。此语法尤其用于 VStackView、HStackView 和 ZStackView。这些视图支持 DSL，允许您直接添加标准 UIKit 视图，或者使用 Item(view) 对它们进行自定义，以更好地控制大小和位置。它通过提供类似 SwiftUI 的声明性方法来简化创建和管理布局的过程，从而使您的代码更具可读性且更易于维护。

let titleLabel = UILabel()
let descriptionLabel = UILabel()
let actionButton = UIButton()

let vStackLayout = VStackView {
    titleLabel
    descriptionLabel
    SpaceItem(20) // Adds a space of 20 points
    Item(actionButton).minWidth(120) // Customizes the button's minimum width
}

整体结构

基准测试

FrameLayoutKit 是最快的布局库之一。

请参见：布局库基准测试项目

待办事项

作者

Nam Kennic, namkennic@me.com

许可证

FrameLayoutKit 在 MIT 许可证下可用。有关更多信息，请参见 LICENSE 文件。