StoryboardKit 1.7.0

StoryboardKit 1.7.0

×

由muukii 维护。

StoryboardKit 1.7.0

  • 由
  • Eureka, Inc.

Swift 5.2 cocoapods cocoapods

Storyboard for iOS

Storyboard for iOS 是一个用于提高 UI 开发速度的库。
它使我们能够独立预览 UI 可以显示的每个状态。

此库使我们能够在大型应用程序中无需多次重建的情况下开发 UI，并可以在没有遗漏任何异常情况的情况下全面构建它们。

✨此库受到 Storybook（用于 Web 应用程序开发）的启发。

特性

  • 预览任何组件的每个状态并动态更新
  • 展示任何视图控制器
  • 无限创建嵌套页面
  • 将组件用有组织的印刷体标记
  • 类似 SwiftUI 的声明式语法

基本用法

设置您的书籍配置*

使用此示例组件 MyComponent 进行演示。它只是一个填充紫色颜色的框。

public final class MyComponent: UIView {

  public override func layoutSubviews() {
    super.layoutSubviews()

    backgroundColor = .systemPurple
  }

  public override var intrinsicContentSize: CGSize {
    .init(width: 60, height: 60)
  }
}

Book 表示 Storybook 的根。
Book 可有自己命名的名称，并且我们可以在尾随闭包中声明其中的内容。

💡您需要导入 StorybookKit 模块。
此模块仅提供用于描述书籍的符号。

import StorybookKit

let myBook = Book(title: "MyBook") {
  ...
}

目前我们通过 BookPreview 添加对 MyComponent 的预览。

let myBook = Book(title: "MyBook") {
  BookPreview {
    let myComponent = MyComponent()
    return MyComponent()
  }
}

要显示此书籍，在任何视图控制器上呈现 StorybookViewController。

💡您需要导入 StorybookUI 模块。
此模块提供了显示书籍的功能。

import StorybookUI

let controller = StorybookViewController(book: myBook) {
  $0.dismiss(animated: true, completion: nil)
}

present(controller, animated: true, completion: nil)

添加组件名称

BookPreview 可以有如下的名称标签。

BookPreview {
  let component = MyComponent()
  return component
}
.title("MyComponent")

列出组件的状态

UI组件的状态可能根据某些因素而有所不同。我们可以使用以下方式列出组件的每个状态。

let myBook = Book(title: "MyBook") {
  BookPreview {
    let button = UISwitch()
    button.isOn = true
    return button
  }
  .title("UISwitch on")

  BookPreview {
    let button = UISwitch()
    button.isOn = false
    return button
  }
  .title("UISwitch off")
}

当然，您可以与这些组件进行交互。

动态更新组件的状态

UI组件应具备正确的更新新状态的能力。
例如，根据内容调整大小。

为了检查此行为，《BookPreview》可以有一个按钮来更新组件的某项内容。

BookPreview<UILabel> {
  let label = UILabel()
  label.text = "Initial Value"
  return label
}
.addButton("short text") { (label) in
  label.text = "Hello"
}
.addButton("long text") { (label) in
  label.text = "Hello, Hello,"
}

展示ViewController

当需要检查弹出窗口时，我们使用《BookPresent》声明。

BookPresent(title: "Pop") {
  let alert = UIAlertController(
    title: "Hi Storybook",
    message: "As like this, you can present any view controller to check the behavior.",
    preferredStyle: .alert
  )
  alert.addAction(.init(title: "Got it", style: .default, handler: { _ in }))
  return alert
}

BookPresent(title: "Another Pop") {
  let alert = UIAlertController(
    title: "Hi Storybook",
    message: "As like this, you can present any view controller to check the behavior.",
    preferredStyle: .alert
  )
  alert.addAction(.init(title: "Got it", style: .default, handler: { _ in }))
  return alert
}

高级用法

创建链接到其他页面以进行组织

增加组件数量，页面将出现较长的纵向滚动。
在这种情况下，Storybook为您提供使用《BookNavigationLink》创建另一个页面的选项。

let myBook = Book(title: "MyBook") {
  BookNavigationLink(title: "UISwitch") {
    BookPreview {
      let button = UISwitch()
      button.isOn = true
      return button
    }
    .title("UISwitch on")

    BookPreview {
      let button = UISwitch()
      button.isOn = false
      return button
    }
    .title("UISwitch off")
  }
}

标记

我们可以添加一些描述和标题来明确组件的用途。

let myBook = Book(title: "MyBook") {
  BookNavigationLink(title: "UISwitch") {
    BookPage(title: "UISwitch variations") {

      BookHeadline("This page previews UISwitch's state.")

      BookParagraph("""
Mainly, UISwitch has 2 states that are `on` or `off`.
This page shows you how it presents appearances in each state.
""")

      BookPreview {
        let button = UISwitch()
        button.isOn = true
        return button
      }
      .title("UISwitch on")

      BookPreview {
        let button = UISwitch()
        button.isOn = false
        return button
      }
      .title("UISwitch off")
    }
  }
}

您可以使用以下声明进行标记。

  • BookPage
  • BookSection
  • BookParagraph
  • BookHeadline
  • BookText

分隔声明

随着组件数量的增加和许多描述，Book的声明也包含了大量代码行。
在这种情况下，我们可以使用多个函数来分隔代码。

let myBook = Book(title: "MyBook") {
  uiswitchPage()
}

func uiswitchPage() -> BookView {
  BookNavigationLink(title: "UISwitch") {
    BookPreview {
      let button = UISwitch()
      button.isOn = true
      return button
    }
    .title("UISwitch on")

    BookPreview {
      let button = UISwitch()
      button.isOn = false
      return button
    }
    .title("UISwitch off")
  }
}

创建UI组件模板

为了检查UI组件的外观，该外观根据输入参数而变化，我们可以使用《BookForEach》和《BookPattern》生成这些模板。

BookForEach(data: BookPattern.make(
  ["A", "AAA", "AAAAAA"],
  [UIColor.blue, UIColor.red, UIColor.orange]
)) { (args) in
  BookPreview {
    let (text, color) = args
    let label = UILabel()
    label.text = text
    label.textColor = color
    return label
  }
}

获取更快UI开发的代码结构

尤其是在基于UIKit的应用程序中，构造UI更改需要许多时间。
减少这种时间的最佳方法是为仅包含应用程序使用的UI组件创建一个独立的模块。
并为Storybook创建一个新的应用程序目标来运行。
最后，通过该独立的模块将主应用程序和storybook应用程序连接起来。

当您在调整它们时，只能使用storybook应用程序构建。

  • UIComponent (动态或静态库/框架)
    • MainApp (可执行文件)
    • StorybookApp (可执行文件)

要求

  • iOS 10.0+
  • Xcode 11.4+
  • Swift 5.2+

安装

CocoaPods

CocoaPods 是 Cocoa 项目的依赖管理器。有关使用和安装说明，请访问他们的网站。要使用 CocoaPods 将 Alamofire 集成到您的 Xcode 项目中，请在 Podfile 中指定它。

pod 'StorybookKit'
pod 'StorybookUI'

许可证

Storybook-ios 采用 MIT 许可证发布。