样式 0.28.0

Styles 0.28.0

×

由 Jakub Petrík 维护。

Styles 0.28.0

  • 由
  • Radim Halfar 和 Jakub Petrik

alt text 插图： Josef Čapek - 7. Povídání o pejskovi a kočičce (7/43)

Styles

工作着的样式框架
一个用于美观应用程序的声明性和类型安全框架。

目录

特性

  • 声明式：你描述样式，框架将做其余的事情
  • 类型安全：类型系统将帮助您描述样式
  • 和 UIAppearance 相容：实际上它是为此而设计的。
  • 作为可设置属性使用：不仅仅是作为 UIAppearance 代理，还可以作为可设置属性使用
  • 支持 UIControl 状态和 UITextField 编辑：你会喜欢它的。
  • 避免使用 NSAttributedString：1只需使用 String。
  • 文本、颜色和图层属性：自定义行高、字间距、圆角？我很喜欢。
  • 支持 Styles 更新：为您的应用程序设计基本样式，并在需要时实时更新。
  • Zeplin 扩展：只需将样式复制到项目中。超级简单。请参阅：[styles-zeplin-extension](https://github.com/inloop/styles-zeplin-extension)

1：在某些情况下。

需求

  • iOS 10.0+
  • Xcode 9.2+
  • Swift 4.1+

示例

完整的特性示例请参阅我们的wiki页面。

文本样式

let h1 = TextStyle(
    .font(.preferredFont(forTextStyle: .largeTitle)),
    .foregroundColor(.black),
    .backgroundColor(.yellow),
    .letterSpacing(1.5),
    .paragraphStyle([
        .alignment(.natural),
        .lineSpacing(2.5)
    ]),
    .strikethrought(TextDecoration(
        style: .thick,
        pattern: .dash
    )),
    .underline(TextDecoration(
        style: .single,
        pattern: .dashDotDot,
        byWord: true,
        color: .red
    ))
)

UILabel.appearance().textStyle = h1
UIButton.appearance().setTextStyle(h1, for: .normal)
let h1 = TextStyle(
    .font(.preferredFont(forTextStyle: .largeTitle)),
    .foregroundColor(.black),
    .backgroundColor(.yellow)
)

myLabel.textStyle = h1

更新文本样式

let footnote = TextStyle(
    .font(.preferredFont(forTextStyle: .footnote))
)

let blueFootnote = footnote.updating(.foregroundColor(.blue))

myLabel.textStyle = blueFootnote
let blueFootnote = TextStyle(
    .font(.preferredFont(forTextStyle: .footnote))
    .foregroundColor(.blue)
)

let redFootnote = blueFootnote.updating(.foregroundColor(.red))

myLabel.textStyle = redFootnote

组合文本样式

let blueFootnote = TextStyle(
    .font(.preferredFont(forTextStyle: .footnote))
    .foregroundColor(.blue)
)

let yellowBackground = TextStyle(
    .backgroundColor(.yellow)
)

myLabel.textStyle = blueFootnote + yellowBackground
let h1 = TextStyle(
    .font(.preferredFont(forTextStyle: .largeTitle)),
    .letterSpacing(1.5),
    .paragraphStyle([
        .alignment(.natural),
        .lineSpacing(2.5)
    ]),
    .strikethrought(TextDecoration(
        style: .thick,
        pattern: .dash
    )),
    .underline(TextDecoration(
        style: .single,
        pattern: .dashDotDot,
        byWord: true,
        color: .red
    ))
)

let blue = TextStyle(
    .foregroundColor(.blue)
)

let yellowBackground = TextStyle(
    .backgroundColor(.yellow)
)

let secret = TextStyle(
    .writingDirectionOverrides([
        .rightToLeftOverride
    ])
)

let title = h1 + blue + yellowBackground

myLabel.textStyle = title
secretMessageLabel.textStyle = h1 + secret

文本效果

let bigRed: TextStyle = ...
let bigGreen: TextStyle = ...
let smallCyan: TextStyle = ...

let bigRedFirstWord = TextEffect(
    style: bigRed,
    matching: First(occurenceOf: "Styles")
)

let bigGreenLastWord = TextEffect(
    style: bigGreen,
    matching: Block { $0.range(of: "awesome") }
)

let everyOtherTildaCyan = TextEffect(
    style: smallCyan,
    matching: Regex("~.*?(~)")
)

let tint = TextStyle(
    .foregroundColor(.red)
)

let logo: UIImage = ...
let logoBeforeCompanyName = TextEffect(image: logo, style: tint, matching: First(occurenceOf: "INLOOPX"))

let styleWithEffects = TextStyle(
    .font(.preferredFont(forTextStyle: .body)),
    .backgroundColor(.yellow),
    effects: [
        bigRedFirstWord,
        bigGreenLastWord,
        everyOtherTildaCyan,
        logoBeforeCompanyName
    ]
)

视图样式

let pill = ViewStyle(
     .cornerRadius(10),
     .borderWidth(3),
     .borderColor(.red),
     .opacity(0.8)
)

UILabel.appearance().viewStyle = pill
let red = ViewStyle(
    .backgroundColor(.red),
    .tintColor(.red),
    .borderColor(.red),
    .borderWidth(0.5),
    .shadow(Shadow(
        color: .red,
        offset: UIOffset(horizontal: 0, vertical: 8),
        radius: 16
    ))
)

let blue = ViewStyle(
    .borderColor(.blue),
    .borderWidth(0.5),
    .shadow(.none)
)

UITextField.appearance().setViewStyle(red, for: .editing)
UITextField.appearance().setViewStyle(blue, for: .inactive)
UITextView.appearance().setViewStyle(red, for: .editing)
UITextView.appearance().setViewStyle(blue, for: .inactive)
let blue = ViewStyle(
    .borderColor(.blue),
    .borderWidth(0.5),
    .cornerRadius(10)
)

myButton.viewStyle = blue

图层属性

如果您为特定状态的UITextView或UITextField设置了任何[.borderColor, .borderWidth, .cornerRadius, .opacity, .shadow]属性，则样式需要在内部匹配这些属性。如果不这样做，样式就会无效，因为当状态改变时，图层属性不会被重置。您需要自己定义样式。以下是一个产生断言错误的例子，第二个代码段是有效的配置。

let redBorder = ViewStyle(
	.borderColor(.red),
	.borderWidth(1.5)
)

let roundedCorners = ViewStyle(
	.cornerRadius(10)
)

UITextField.appearance().setViewStyle(redBorder, for: .editing)
// It throws an assertion error
// because rounded corners is missing .borderColor & .borderWidth 
UITextField.appearance().setViewStyle(roundedCorners, for: .inactive)
let redRoundedBorder = ViewStyle(
	.borderColor(.red),
	.borderWidth(1.5),
	.cornerRadius(10)
)

let redFlatBorder = ViewStyle(
	.borderColor(.red),
	.borderWidth(1.5),
	.cornerRadius(0)
)

UITextField.appearance().setViewStyle(redRoundedBorder, for: .editing)
UITextField.appearance().setViewStyle(redFlatBorder, for: .inactive)

更新ViewStyle

let app = ViewStyle(
    .borderWidth(0.5),
    .cornerRadius(10)
)

let blue = app.updating(.borderColor(.blue))
let app = ViewStyle(
    .borderWidth(0.5),
    .cornerRadius(radius: 10)
)

let thick = app.updating(.borderWidth(3))

组合ViewStyle

let app = ViewStyle(
    .borderWidth(0.5),
    .cornerRadius(10)
)

let semiVisible = ViewStyle(
    .opacity(0.5)
)

myLabel.viewStyle = app + semiVisible
let app = ViewStyle(
    .borderWidth(0.5),
    .cornerRadius(10)
)

let semiVisible = ViewStyle(
    .opacity(0.5)
)

let blue = ViewStyle(
    .backgroundColor(.blue)
)

let labelStyle = app + semiVisible + blue

myLabel.viewStyle = labelStyle

切换样式

let prettySwitchStyle = SwitchStyle(
    .onTintColor(.red),
    .tintColor(.blue),
    .thumbTintColor(.yellow)
)

// style only one switch
mySwitch.switchStyle = prettySwitchStyle

// style all switches
UISwitch.appearance().switchStyle = prettySwitchStyle

安装

CocoaPods

CocoaPods是Cocoa项目的一个依赖管理器。您可以使用以下命令安装它

$ gem install cocoapods

构建Styles需要CocoaPods 1.1+。

要使用CocoaPods将Styles集成到您的Xcode项目中，请在您的Podfile中指定它

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'Styles', :git => 'https://github.com/inloop/Styles.git'
end

然后，运行以下命令

$ pod install

Carthage

Carthage 是一个去中心化的依赖关系管理器，用于构建您的依赖项并提供二进制框架。

您可以使用以下命令使用 Homebrew 安装 Carthage：

$ brew update
$ brew install carthage

要使用 Carthage 将样式集成到您的 Xcode 项目中，请在您的 Cartfile 中指定它。

github "inloop/Styles"

运行 carthage update 构建框架，并将构建的 Styles.framework 拖入您的 Xcode 项目。

贡献

欢迎参与！🖖

许可协议

Styles 在 MIT 许可协议下可用。有关更多信息，请参阅 LICENSE 文件。

作者
❤️ 在 INLOOPX 工作