ViewElements 0.1.7

ViewElements 0.1.7

×

由 Wirawit Rueopas 维护。

ViewElements 0.1.7

  • 由
  • Wirawit

ViewElements

Version License Platform

一个用于在 iOS 应用中管理和重用 UIView 的框架。

// 0. Subclass TableModelViewController
class ViewController: TableModelViewController {

  override func setup() {
  
    // 1. Create a Row, this is a built-in label element, support multiple lines by default
    let titleRow = Row(ElementOfLabel(props: "Hello!"))

    // 2. You can customize
    let messageRow = Row(ElementOfLabel(props: "This is awesome").styles({ (lb) in
        lb.textColor = .black
        lb.font = UIFont.systemFont(ofSize: 12)
        lb.textAlignment = .center
        lb.numberOfLines = 1
    }))
    messageRow.backgroundColor = .gray
    messageRow.layoutMarginStyle = .each(vertical: 4, horizontal: 12)
    messageRow.rowHeight = 44
        
    // 3. For a custom element, you will need to declare type of props in MyCustomView, it can be anything, like a tuple.
    let customProps = ("Wow", "This", "Is so flexible!")
    let customRow = Row(ElementOf<MyCustomView>(props: customProps))
    ...

    // 4. To create a section header
    let header = SectionHeader(ElementOfLabel(props: "Easy header"))

    // 5. Building up Section
    let section = Section(header: header, footer: nil, rows: [titleRow, messageRow, ...])

    // 6. Building up Table
    let table = Table(sections: [section]])

    // 7. Then it works from this moment on!
    self.table = table
  }
}

特性

  • 一旦设置视图，即可在任何地方使用🎉例如：
    • 行（UITableViewCell）
    • 分区头，分区脚（UITableHeaderFooterView）
    • tableHeaderView
  • 内置键盘避免功能
  • 解决这些问题
    • 隐藏尾部分隔符（默认行为）
    • 分隔符样式
    • 自动布局（如果您创建自定义视图，则必须自行设置正确的自动布局）
    • 居中 tableview 的内容（如果可能的话，禁用滚动）
    • 在 cell 显示后自动更新 estimatedRowHeight

安装

将其添加到 Podfile 中：

pod 'ViewElements'

概述

大多数 iOS UI 都可以通过 UITableView 解决。此框架将各种视图抽象为易于使用的视图模型，如 Row、SectionHeader、SectionFooter，您可以将这些模型组合起来快速构建一个 UITableView。

元素

ViewElement为UIView的表示提供了一个通用抽象，称为元素。元素包含Props，这是一种用于配置视图的数据结构。此框架已经提供了基本的UIKit元素，如UILabel、UIImageView、UIButton、UITextField、UIActivityIndicatorView。（你会惊讶于仅通过将这些基本元素堆叠在一起就能完成多少事情。）

然后，可以通过将元素封装在ElementContainers中在表格视图中使用元素。

  • Row(element)
  • SectionHeader(element)
  • SectionFooter(element)
  • TableHeaderView(element)。

大多数容器默认使用自动布局。但如果你事先知道高度，可以在这些容器上设置rowHeight。

组件

元素行填充整个单元格水平方向，如果你需要放置两个元素并排放置怎么办呢？

你可以使用组件将元素水平堆叠，这是Element的一个子类。它可以用于Element可以使用的任何地方。组件要求你返回一个由StackProps组成的层次结构——UIStackView的抽象。

内部为每个StackProps创建UIStackView并将它们嵌套在一起。

PS：虽然栈视图解决了许多自动布局问题，但如果组件非常复杂，请考虑从nib文件中创建元素。

PS2：目前组件不支持像React那样在视图树中更改，组件仅作为将元素通过嵌套组合在一起的方式。

限制

目前，此框架适合创建静态页面，例如，内容没有状态/交互。最终，它只是UITableView。对于高度灵敏的页面（具有许多手势），请考虑其他选项。

路线图

  1. 我正在尝试将此与RxSwift结合使用，它允许我们在创建数据驱动页面（例如，任何类型的输入表单，具有响应性）时使用ViewElements。我们的想法是在propsType中使用Rx配置块，而不是固定的、有状态变量，如String。例如（响应式）-> [Disposable]。
  2. 支持UICollectionView

然后你可以在元素创建时设置所有你的Rx东西。不过，你需要自己实现RxLabel，并在那里管理DisposeBag。

入门

1. 创建一个与该框架一起使用的视图

  • 创建一个子类BaseNibView的UIView nib（用于程序化创建UIView，子类BaseView）
  • 定义PropsType
  • 实现设置/更新函数

(...进行中，目前请先查看示例)

示例

查看'ViewElements/Examples'。

替代方案

你可以考虑这些替代品，可能比这个框架更优雅哦

  • Eureka，用于表单构建
  • SwiftForms，用于表单构建
  • Leego，通用，与该框架非常相似，但尚未深入研究
  • BrickKit，功能非常通用，用collection view构建，应该是这样

那么为什么是ViewElements呢？

使用简单易懂（希望是这样）。没有太多魔法。如果你知道如何使用UITableView，那么你就可以立刻开始。