PoringKit

PoringKit 是一个用于直接从 JSON 中读取 AshtonUI 样式的样式表管理工具。基于 Fashion。

安装

PoringKit 通过 CocoaPods 提供。要安装它，只需在 Podfile 中添加以下行：

pod "PoringKit"

使用方法

要开始使用 PoringKit，您需要通过调用指定文件名的文件来开始加载。

PoringKit.startStyle("ui.json") // if file is in main bundle
PoringKit.startStyle("ui.json", bundle: bundle) // if file is in specific bundle

更有趣的功能。在开发阶段，PoringKit 提供模拟器的实时更新，以便快速调整 UI 风格。通过更新 JSON 文件并保存，它将在模拟器上实时管理和更新。无需再次重新构建项目。要开始这样做，请通过调用使用 JSON 文件的完整路径来加载 PoringKit。

PoringKit.startLiveStyle("/Users/Awesome/PoringKit/ui.json")

PoringKit 支持 JSON 格式来自定义 UI 元素。使用键来指定元素组（称为 'style'）。

以下 JSON 样式表的示例

{
  "title_text": {
    "font_family": "avanir",
    "font_size": 22,
    "text_color": "dark_gray"
  },
  "primary_button": {
    "tint_color": "dark_gray"
  }
}

在此代码中，将定义样式为 "title_text" 的元素将设置字体名称、字体大小和文本颜色，而将定义样式为 "primary_button" 的元素将设置 tint_color。

样式

要定义元素的样式，您可以通过故事板定义，或者直接在代码中定义

button.styles = "primary_button"

您还可以在单个元素中定义多个样式。使用空格分隔每个样式。

字体

要在样式中使用字体，您需要在字体字典中定义字体值。

{
  "fonts": {
    "avenir": {
      "regular": "AvenirNext-Regular",
      "bold": "AvenirNext-Bold",
    }
  }
}

从上面的示例中。这个样式将知道2种字体样式（常规和粗体）的avenir字体家族。定义字体家族在fonts字典后，您可以使用这些字体家族和字体样式将其应用于每个元素。

{
  "primary_button": {
    "background_color": "white",
    "text_color": "#1092A8",
    "font_family": "avenir",
    "font_style": "bold",
    "font_size": 16
  }
}

这将把AvenirNext-Bold应用到primary_button样式

如果元素中没有定义font_style与font_family，它将使用font_family中的regular样式。您可以通过定义system来使用默认字体家族并使用以下font_style

• 常规
• 粗体
• 斜体
• 黑色
• 加粗
• 浅色
• 中等
• 半粗体
• 超轻

共享样式

共享样式是一种样式，它将应用于继承特定类型的所有元素。例如，如果您想要所有按钮具有相同的字体名称，请在共享样式的按钮中定义字体名称属性。

在这里，PoringKit 在以下列表中支持一些元素

• 视图
• 按钮
• 标签
• 图片视图
• 文本字段
• 文本视图
• 分段控制
• 导航栏
• 工具栏
• 开关
• 页面控制器
• 表格视图
• 集合视图

共享属性

PoringKit 还在以下列表中支持一些共享属性

• 字体家族：用于为定义的样式设置字体家族例如

{
  "shared": {
    "font_family": "avenir",
    "button": {
      "background_color": "white"
    }
  },
  "primary_button": {
    "border_color": "#0155C8",
    "border_radius": 1
  }
}

此样式将应用于所有具有背景颜色为白色的按钮元素。定义为primary_button的元素将具有蓝色（#0155C8）的边框颜色和1的边框半径。并且还有字体族为avenir。

变量

某些样式需要使用相同的值进行配置。您可以使用变量来应用任何重复的值。要执行此操作，您需要在constants字典中定义变量名称和值。要使用此常量，请使用以'$'（美元符号）开头的变量名称。示例如下

{
  "constants": {
    "marin": "#0157C3"
  },
  "monster_title": {
    "tint_color": "$marin"
  }
}

属性类型

PoringKit使用JSON文件自定义ui，某些ui属性不受支持。因此，PoringKit已经创建了许多类型来支持以下列表中的一些ui组件。

颜色

使用Codable表示颜色的字符串。

• 使用DecodableColor类为UIColor提供Decodable扩展，表示颜色，有2种定义颜色的方式：
• 十六进制颜色：十六进制颜色格式（支持6位和8位）例如："#00FF00"，"#FFFFFF50"
• 十六进制颜色 - 短格式：十六进制颜色短格式（支持3位和4位）例如："#AAA"，"#FFFC"
• 预定义颜色：预定义颜色名称。下面列出支持的颜色：
• red
• green
• blue
• light_gray
• dark_gray
• gray
• white
• 黑色
• clear
• cyan
• magenta
• yellow
• orange
• brown
• purple

元素属性

UIView

UIButton / UIBarButton

*UIBarButton 没有文本对齐属性

UILabel

UITextField / UITextView

UIPageControl

UISegmentedControl

UISwitch

UITableView

UICollectionView

UINavigationBar / UIToolBar

UIToolBar 没有字体相关的属性

自定义元素

PoringKit 支持可样式化自定义元素。从将PoringStyleElement协议加入类开始（仅支持UIAppearance类）。接下来，实现apply函数来为这个元素添加样式。在这个函数中将会接收到元素的JSON数据。你可以使用 Swift 4 中的 Codable 来从 JSON 数据提取到 JSON 对象。

class CustomTextField: UITextField, PoringStyleElement {

  func apply(_ styleData: Data) {
    let style = try? JSONDecoder().decode(CustomTextFieldPoringStyle.self, from: styleData)
    text = style?.custom
  }

}

变更日志

• 版本 1.0.0
  • 初始版本。
• 版本 1.2.2
  • 将版本提升至先前支持版本。

作者

• Siwasit Anmahapong @bazaku
• Rawipon Srivibha @phoeniex
• Vadym Markov，@vadymmarkov - 时尚开发者