Stylish 1.0.2

Stylish 1.0.2

×

由Thomas Hazlett维护。

Stylish 1.0.2

  • 由
  • ThomasHaz

Stylish

CI Status Version License Platform

示例

要运行示例项目，请克隆存储库，然后首先从示例目录运行pod install。

需求

安装

Stylish可以通过CocoaPods获取。要安装它，只需将以下行添加到您的Podfile中

pod 'Stylish'

作者

Thomas Hazlett为CocoaPods打包

原始代码库由Daniel Hall编写

许可

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

故事板样式表

Stylish是一个库，让您可以通过代码或JSON创建样式表，以控制您的UIView、UILabel、UIButton等各种属性，以及您自己创建的任何自定义视图的属性。

然而，真正的魔法发生在故事板中，您可以直接在Interface Builder的检查器中为视图、标签、按钮等分配一个或多个样式，并立即在故事板中看到应用到的样式的实时预览。由于Stylish使用@IBDesignable在设计时应用样式，因此无需在模拟器或设备上编译或运行应用程序。

首次提供创建和应用样式和主题的单解决方案，这些样式和主题在每个运行的应用程序和故事板中渲染。因此，您在设计时看到的将通过最终匹配用户在应用程序中看到的内容。

  • 享受到真实样式系统的全部好处：在一个地方更新一个样式，使用该样式的每个视图都将更新。现在，它们在运行时和在故事板中都更新。
  • 随时更改全局样式表，应用程序将立即更新以反映新的主题。
  • Stylish完全可自定义和可扩展，但附带了对从JSON解析样式表的完整实现。您的应用程序甚至可以通过网络加载更新的样式表，并将其缓存为新的默认主题，即使应用已部署，您也可以根据用户、年份等调整对象的的外观或其他属性。
  • Stylish让您可以从Xcode中快速测试和迭代设计：您可以直接从故事板apply或remove多个样式，并立即看到它们在设备上的外观。或者，在一个窗口中更新您的JSON样式表，同时另一个窗口使用更改自动更新故事板。

示例项目

要查看Stylish的实际操作效果，请从本存储库下载“StylishExample”文件夹，并在最新版本的Xcode中打开它。在Interface Builder中打开“Main.Storyboard”，然后稍等一会儿，未设置样式的标签、按钮和视图将突然在Xcode中以完全样式化的形式显示。

现在，转到MainViewController.swift，并在覆盖prepareForInterfaceBuilder()的UIView扩展中，将行Stylish.stylesheet = Graphite()更改为Stylish.stylesheet = Aqua()。然后返回Main.storyboard，并观察场景外观完全改变，而无需编写任何代码或甚至编译应用程序。

回到MainViewController.swift文件中，并将同行的代码从 Stylish.stylesheet = Aqua() 修改为 Stylish.stylesheet = JSON()。现在再次查看Main.storyboard文件，整个场景将根据从JSON加载的新Stylesheet进行转换。

此时，您可以在Xcode中打开stylesheet.json文件，并开始修改样式表中的一些颜色、字体或其他值，然后返回Main.storyboard文件以在Interface Builder中实时观看您所做的更改。

或者，您可以从头创建一个新的Storyboard，添加视图、标签、按钮和图像，然后使用检查器添加来自示例项目的已定义样式到这些视图，并立即观察它们立即生效。要在Storyboard中设置样式，请选择要设置样式的视图，并前往Xcode右侧面板的属性检查器标签页。这是您通常设置颜色、透明度、字体等的地方。在顶部，您将看到一个可以填写的新字段，称为“styles”。

这些字段仅适用于符合“Styleable”协议且为“@IBDesignable”的视图类。遗憾的是，无法通过扩展添加“@IBDesignable”，因此对于纯UIKit组件，您必须将它们的自定义类设置为Stylish的版本：StyleableUIView、StyleableUILabel、StyleableUITextField、StyleableUITextView、StyelableUIButton 和 StyleableUIImageView。

  • 您将一些Styleable组件放入空白Storyboard后，试着将这些样式添加到按钮或普通视图中：PrimaryBackgroundColor、SecondaryBackgroundColor 或 Rounded。

  • 对于按钮，添加样式：DefaultButton

  • 对于标签，尝试以下样式：HeaderText、BodyText、ThemeTitle 或 HighlightedText

在Stylish中，样式不接受继承，但它们是可累积的，因此您可以通过以逗号分隔它们的名称将多个样式分配给一个视图，例如：PrimaryBackgroundColor, Rounded 将首先应用到视图上的“PrimaryBackgroundColor”样式，然后它将应用“Rounded”样式。如果“Rounded”定义了一些属性值，这些值与“PrimaryBackgroundColor”定义的相同属性的值不同，那么“Rounded”中的值将重写之前值，因为它在样式列表中位于“PrimaryBackgroundColor”之后。这种方法为您提供了对组合和重用任何给定视图的样式的精确控制。

要查看如何将自定义视图做成Stylish的、在Storyboard中的可实时预览的示例，请查看“ProgressBar.swift”中的示例。

最后，您可以通过打开“Aqua.swift”或“Graphite.swift”文件，并遵循这两个文件中的说明和注释来尝试创建一些自己的定义样式。

创建样式

简单样式如下所示

struct RoundedGray : Style {
let propertyStylers = [
cornerRadius.set(value:  20.0),
backgroundColor.set(value: .gray)
]
}

它将像这样添加到Stylesheet中，并带有如下的样式名称

class MyStylesheet : Stylesheet {
let styles: [String: Style] = [
"RoundedGray": RoundedGray(),
"AnotherStyleName": AnotherStyle()
]
}

或者，相同的Stylesheet和Style可以用JSON的形式创建

{
"styles": [
{
"styleName": "RoundedGray",
"styleProperties": {
"cornerRadius": 20.0,
"backgroundColor": "#CCCCCC"
}
}

要将此样式应用到Storyboard中的视图，确保视图已设置为实现可样式化协议（例如StyleableUIView）的自定义类，然后在画布上选择它，前往Xcode右侧面板中的“属性检查器”，并将字符串RoundedGray添加到标签为“样式”的顶部字段中，并确保您已按照前面所述并在示例项目中显示的方式，在重写prepareForInterfaceBuilder()的UIView扩展方法中设置Stylish.stylesheet = MyStylesheet()。当您按下返回/Enter键时，视图将立即在画布上更新。

术语

样式：指的是将应用于目标对象特定属性的一组属性调整器或值。在CSS中的概念相同。

样式表：将名称化样式组合在一起的集合，形成主题。例如，名为“Default”的样式表可能定义名为“Header”，“Body”，“Highlighted”等样式。在这个样式表中，“Body”样式可能为任何目标的fontSize属性定义了16磅的值。还可能有一个名为“Large Type”的样式表，它也定义了名为“Header”，“Body”和“Highlighted”的样式。但在“Large Type”样式表中，“Body”样式为fontSize属性定义了28磅的值。当“Default”样式表处于活动状态时，带有“Body”样式的标签将设置为16磅的字体大小，而当“Large Type”样式表处于活动状态时，字体大小为28磅。因此，视图与固定的样式名称相关联，而样式表定义了同一组名称化样式的不同值集。

可样式化：类必须符合以参与可样式化过程的协议。可样式化提供了一些实现了Styleable以及IBDesignable（见下文）的常见UIKit组件的版本。这些是：StyleableUIView、StyleableUILabel、StyleableUITextField、StyleableUITextView、StyleableUIButton和StyleableUIImageView。

@IBDesignable：可以添加到任何UIView子类中的属性，表示应该将其渲染到Storyboard画布上。

扩展可样式化

可样式化已被设计为允许开发者通过添加额外的可样式化组件（包括自定义组件）来扩展它。包含在本仓库中的StylishExample应用程序中的ProgressBar组件就是如何这样做的例子。这个过程，简而言之，包括

  1. 为每个想要能够样式化的属性创建新的PropertyStyler类型。这些类型包含一个propertyKey，用于指示在JSON样式表中如何标识属性，以及一个静态的apply函数，该函数描述了如何在目标对象上设置正确类型的值。

  2. 在您的自定义类型上实现Styleable协议，这通常只是添加以下属性定义的问题

`{ 
@IBInspectable public var styles: String = "" {
didSet {
Stylish.applyStyleNames(styles, to: self)
}
}
  1. 通常，就是这样了。虽然Styleable没有为SpriteKit或SceneKit提供预构建的Styleable类型，但它足够通用，可以很容易地扩展以样式化这类对象。

帮助

如果您有任何问题或需要帮助在项目中定制或使用Stylish，请在此仓库中提交一个issue，或者访问Daniel的仓库

快乐样式化！