DNAKit 0.0.2

DNAKit 0.0.2

×

由 Shivani Dosajh 维护。

DNAKit 0.0.2

  • 作者
  • Shivani

Swift 5.0 Platform: iOS XCode 11+ iOS 11+ Licence MIT

介绍

一个使用 Swift 编写的 UI 组件库，受 Brad Frost 的原子设计启发。一个包含可重用、可自定义和具有状态交互的 UI 组件的存储库，用于在 Swift 中构建模块化和灵活的 UI 元素。

优势

  • 代码的可重用性
  • 促进模块化，从而减少冗余
  • 提高一致性，增强整体用户体验
  • 使测试和调试变得极其容易。
  • 所有模块之间共享的词汇表

安装

Carthage

CocoaPods

手册

用法

如何使用？

  • 此库可以直接使用，也可以作为模板来构建与您自己的设计系统相关的模式库。
  • 如果您正在考虑创建项目的组件库，或将UI模块化，这可能是一个很好的参考点。
  • 分类是根据原子设计原则进行的，原子是最低级别的设计元素，页面是完全的UI屏幕

基础

  • 库的基础包含一些组件，这些组件将由所有组件在整个库中使用。
  • 这些定义了所有组件和功能都将采用的基本规则。
  • 基础包括跨多个功能共享的图像资产，应用程序的颜色主题，排版，阴影，自定义字体，字符串类型等。

  1. 排版

    排版为应用内显示多个文本类型设置了字体家族、粗细和其他相关属性的基础。

    它有助于通过大小、颜色、额外的细节如行高和分层响应性来构建层次结构。然后，将这些模型应用到系统库（如文章、标题等）组件以及用于其他功能的自定义组件。

    DNAKit使用自定义字体，如果自定义字体不存在，则使用回退字体

    根据内容类型，排版已分隔为两个主要类别，每个类别都有自己的所有文本样式的属性。

    以下是不同文本样式的排版属性。

    样式名称 字体大小 字体粗细 字母间距 行高
    h1 21 中等 -0.12 1
    h2 18 中等 -0.24 1.4
    h3 16 中等 0 1.5
    body大号 16 常规 0 1.5
    body常规 15 常规 0 1.5
    body小号 14 常规 0 1.5
    字幕 12 常规 0 1.2

  2. 颜色方案

    颜色方案包括应用中所有常用颜色。它定义了颜色主题，指定不同图案和行为的不同颜色。请参阅示例应用以获取详细的用例信息。

    针对 iOS 13+ 版本增加了对暗黑模式的支持。可以覆盖定义的颜色以更改任何颜色值，或扩展颜色以添加更多自定义颜色（如果您想继续使用库的颜色）。

  3. DNAAttributedString

  • 支持自定义的属性字符串，以便减少冗余并简化开发过程。

  • 支持字符串插值以自定义样式，如排版、字体、图片、链接、颜色等。

  • 字符串插值使动态定义和修改字符串的自定义属性变得非常容易。

  • 初始化

    可以通过提供字符串字面量或插值字符串进行初始化。

       public init(stringLiteral: String)
   
     public init(stringInterpolation: StringInterpolation)

原子

原子是物质的基本构建块，我们的界面原子是我们所有用户界面的基础构建块。它们不能进一步分解。

  1. 按钮

    按钮是可以接收用户交互并执行与之关联的任何操作的UI控件。

    DNAKit有2个按钮类

    1. DNABaseButton

      基本按钮是一个自定义的UIButton类，它定义了所有常见的按钮类型，并包含与按钮相关联的多个可能的状态和交互。在整个项目中所使用的所有按钮类型都可以与其行为标准化，以及转换等，这大大减少了反复重写相同代码的麻烦，并将调用和管理状态变化和交互简化为一行命令！

      • 初始化

      可以带或不带图像进行初始化

      • 属性

        以下是与DNABaseButton相关联的属性

        • type : DNAButtonType

          类型定义了所有可能的按钮类型，这些类型将被反复使用。按钮类型具有与之关联的视觉属性，例如色调颜色、背景颜色等。库中包含一些预定义的按钮类型，具有以下属性。

        • | 按钮类型 | 色调颜色 | 背景颜色 | 边框颜色| | :--------------: |:-----------------:||:-----------------:||:-----------------:| | abc | 123 | sklkd |aa

          buttonState : DNAButtonState

          按钮状态定义了按钮的不同行为。例如，如果按钮处于禁用状态，则禁用触摸交互

          按钮的默认状态是正常状态

          • 以下为按钮状态
          • 正常
          • 禁用
          • 加载中
          • 高亮

        • 错误

          title : String

        • 按钮标题（可选）

          image : UIImage

        • 按钮图像图标（可选）

          buttonHeight : DNAButtonHeight 为了保持一致性，按钮的高度进行了标准化。您可以通过使用 DNAButtonHeight.custom(<desiredHeight: Int>) 来提供自定义高度 类型 高度
          字体大小 24 11
          中等 34 14
          小 40 14
          大 自定义 14

          有关更多信息，请参阅 DNAButtonHeight

        • action : (DNABaseButton) -> Void 可以通过 action 变量处理按钮接收到的所有点击事件。它是一个可实现的闭包（可选），并在用户点击按钮时被触发

    2. DNAText 按钮

  2. 标签

    自定义标签类，支持显示带预定义字体的文本、处理数值和添加用户交互

    • DNALabel

      高度可定制的标签，支持排版，并且包含接收用户交互的支持

      通过指定字体，定义标题标签可以像这样简单

      let headerLabel = DNALabel(withType: .h1(.product), text: "Hello World")

    • 初始化

      DNALabel 可以用特定的字体初始化

             /**
       Initialize a DNALabel
       - parameter type: Typography of the text
       - parameter text: text string for the label
       */
       init(withType type: Typography, text: String?)
             /**
       Initialize text without typography
       */
       init()

    • 属性

    • textColor: UIColor 文本的着色颜色

    • customAttributedText : `DNAAttributedString`

    • type: Typography

    • 支持用户交互

      为添加和处理用户点击事件，实现以下方法。

    typealias Action = (DNALabel) -> Void
public func action(_ closure: @escaping Action)

    • DNANumericLabel

      DNALabel的子类，用于处理和计算特殊类型的数值；这些包括数量、百分比、差异和带符号的数字

      它接受一个双精度浮点值作为参数，并根据指定的numberType显示处理后的值。数字类型定义了数字的值类型，例如，一个数字可以是百分比或数量

    • 初始化

      使用数字类型初始化，该类型确定如何处理数字值

       ```swift

 public init(withNumberType numType: DNANumberType)
 ```

    • 属性

    • value : Double 要显示的数字值

    • numberType : DNANumberType

      数字值可以是以下类型之一。数字可以是带符号的，即对相应值显示+ / -符号

      要为正数和负数提供不同的颜色，请为颜色变量提供Color.colored值

         public enum DNANumberType {
    /**
     Percentage: Appends % sign at the end of the value
    - color: option to show positive / negetive values in different colors
     - font : font for the number labbel
     - signed : if true appends + / - sign before number value
     */
    case percentage(_ color: Color, font: Font, signed: Bool = false)
    
    /**
    Amount:  Prepends amount with rupee sign
     - color: option to show positive / negetive values in different colors
     - font: font of the value to display
     - unit: appended to the value eg: "cr"
     */
    case amount(_ color: Color, font: Font, unit: String? = nil)
    
    /**
    Number: shows a number value
        - color: option to show positive / negetive values in different colors
        - font: font of the value to display
        - signed : if true appends + / - sign before number value
        */
    case number(_ color: Color, font: Font, signed: Bool = false)
    
    /**
    Change: Shows a up(🔼) image if value is positive and (🔽) if value is negetive
    - color: option to show positive / negetive values in different colors
    - font: font of the value to display
    - signed : if true appends + / - sign before number value
    */
    case change(_ color: Color, font: Font, signed: Bool = false)
    
    }
    
     public enum Color {
           
           // text color positive numbers are set to green, negetive values are set to red
           case colored
           
           // all values set to the label's text color
           case uncolored
           
       }

  3. 文本输入

    1. DNATextField

      具有基于规则的验证的闭环文本字段。

    • 验证

      The text field input can be validated by adding validation rules. 
A validation rule describes what type of input to accept.

      每种规则类型都关联一个文本验证规则和一个错误对象。如果提供的规则被评估后未满足条件，则textField的输入状态进入错误状态，并显示相关的错误信息。

      您可以为文本提供多个规则，如果存在冲突的规则条件，则优先级将根据数组中先添加的规则而定。

      文本验证规则

        public enum TextValidationRule {
      
      case noRestriction
      case nonEmpty
      //Regex string
      case string(String)
      case regularExpression(NSRegularExpression)
      case predicate((String) -> Bool)
      
      public func isValid(_ input: String) -> Bool {
          switch self {
          //There are no restrictions, i.e. any input is valid, including the empty string
          case .noRestriction:
              return true
              
          //The input must be non-empty
          case .nonEmpty:
              return !input.isEmpty
              
          //The substring is part of the string being validated
          case .string(let str):
              return input.evaluate(with: str)
              
          //You can specify a regular expression the input string must match
          case .regularExpression(let regex):
              let fullNSRange = NSRange(input.startIndex..., in: input)
              return regex.rangeOfFirstMatch(in: input, options: .anchored, range: fullNSRange) == fullNSRange
              
          //Yu can pass in a predicate function that determines if the input is valid
          case .predicate(let p):
              return p(input)
          }
      }
      
  }

    • 属性

      DNATextField是UITextField的子类，因此所有UITextField的属性都适用，还有一些额外的属性。 * borderColor : 文本字段的边框颜色为UIColor * typography: Typography用于向文本添加自定义属性 * inputState : DNATextInputState * normal : 没有文本输入时 * disabled : 输入处于非激活状态 * error : 如果输入不正确（基于提供的规则） * focused : 在输入文本时，文本字段处于焦点状态。 * validationRules : TextValidationRuleType可以通过添加文本验证规则类型来验证输入文本。TextValidationRuleType关联一个规则对象和一个错误对象。

          ````swift
    public enum TextValidationRuleType {
    case email
    case phoneNumber
    case custom(TextValidationRule, ValidationError?)
    case nonEmpty
    case name
    case lessThan(maxValue: Int)
    case greaterThan(minValue: Int)

    }
    ````
               
    You can provide custom validation rules 
    
    ````swift
        TextValidationRuleType.custom(TextValidationRule.nonEmpty, ValidationError.custom("Invalid Input Ctring"))
    
     ````

    • validationDelegate : DNATextInputDelegate

            To be notified about the status of input text validation, conform to the validationDelegate.
  
      ````swift
      protocol DNATextInputDelegate {
          
      func didValidateInput<T>(isValid: Bool, error: ValidationError?, input: String?, inputFeild: T)
      }
              
      ````

    • error: ValidationError

           Possible error states for text input
     
     ````swift
    enum ValidationError: Error {

    case invalidEmail
    case invalidPhoneNumber
    case invalidName
    case emptyValue
    case valueTooLow
    case valueTooHigh
    case custom(String)
    
    }
                             
    ````

    1. DNATextView

    支持占位文本和基于规则验证的自定义TextView子类。

    向视图添加验证的过程与DNATextField类似。

    • 属性

    • typography : Typography
    • placeholderText : String
    • inputState : DNATextInputState
    • borderColor : UIColor
    • validationRules : [TextValidationRuleType]
    • validationDelegate : DNATextInputDelegate?
    • error : ValidationError?

分子

分子是由一些UI元素组成的相对简单的组合，这些元素作为一个单元协同工作。例如，一个标签、搜索输入框和按钮可以组合在一起创建一个搜索表单分子。

原子

原子是由分子和/或原子和/或其他原子组成的相对复杂的UI组件。

模板

页面