SwiftJsonThemeManager
示例
要运行示例项目,请克隆仓库,然后首先从 Example 目录运行 pod install
。
要求
- Swift 4.2 或更高版本
- iOS 10
安装
SwiftJsonThemeManager 通过 CocoaPods 提供。要安装它,只需将以下行添加到您的 Podfile 中:
pod 'SwiftJsonThemeManager'
Swift JSON Theme Manager
这是一个库,让您通过 JSON 结构和扩展轻松配置。为了使其工作,您需要使用或创建自己的扩展。
使用JSON文件的一个优点是它可以在多个平台上使用,因为两者都能够加载这个JSON文件。你可以为了让设计创建配置的生成器在你的后端中实现,你只需下载即可。你可以将其集成到CI环境中以远程下载此文件,甚至可以创建单元测试以确保值没有发生变化!
这是它的工作原理:1 - 安装库并启动;2 - 调整并创建你的json主题;3 - 创建你的扩展,始终从UIViewController
开始;4 - 在你的UIViewController
内部,使用以下方式启动/应用主题:
override func viewDidLoad() {
super.viewDidLoad()
applyUIAppearance()
}
使用方法
-
import SwiftJsonThemeManager
-
在AppDelegate中这样初始化你的主题库:
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Initialize the Swift JSON Theme Manager with the default one
_ = ThemeManager.currentTheme
return true
}
- 创建你的
JSON
主题,你需要至少一个命名为DefaultTheme.json
并填写的内容,按照以下模式:
为了使之工作,我们至少需要一个definedStyle
键,例如:
{
"definedStyle": {
"titleFont": ["normal", "medium"],
"titleColor": ["#74597F", 1],
"titleTextColor": ["#D84E6C", 1],
"textColor": ["#5FD7EF", 1],
"textStyleNormalLarge": ["normal", "extraLarge"],
"textStyleNormalLargeColor": ["#ABB1D9", 1],
"primaryDarkColor": ["#91C6B4", 1],
"backgroundColor": ["#EF4423", 1]
}
}
你需要一个文本大小键textSizes
{
"textSizes": {
"extraSmall": 13,
"small": 16,
"medium": 20,
"large": 25,
"extraLarge": 35
}
}
您需要一个文本样式键textStyles
{
"textStyles": {
"normal": "SourceSansPro-Regular",
"bold": "SourceSansPro-Semibold",
"italic": "SourceSansPro-It",
"boldItalic": "SourceSansPro-SemiboldIt",
"custom": "plasmatic"
}
}
最后一个是imageStyle
{
"imageStyle": {
"touchIDImage": "TouchID",
"faceIDImage": "FaceID",
"horse": "horse"
}
}
这些都是最低要求,请注意,字典中的值只是示例,DefaultTheme
文件所需要的是这些键,例如:
{
"definedStyle": {
"titleFont": ["normal", "medium"],
"textColor": ["#5FD7EF", 1],
"textStyleNormalLarge": ["custom", "large"]
},
"textSizes": {
"medium": 20,
"large": 25
},
"textStyles": {
"normal": "SourceSansPro-Regular",
"custom": "plasmatic"
},
"imageStyle": {
"touchIDImage": "TouchID"
}
}
这是一个创建基本JSON文件的示例。
- 要使用和应用主题,这很容易,你可以在代码中直接使用并将其值设置到变量中,例如:
let theme = ThemeManager.currentTheme
self.myLabel.font = theme.getThemedFont(name: "titleFont")
self.myLabel.textColor = themeManager.getThemeColor(name: "textColor")
或者你可以按照预期的方法创建,即使用扩展利用颜色模式来使用在项目中。为此,我为你创建了一个Xcode模板,你可以在Xcode面板中使用它轻松创建,要安装模板,你可以使用Python脚本。在终端中输入以下命令,您需要确保与Python文件在同一文件夹中:
python SetupThemeExtension.py
- 如果成功,你只需打开Xcode -> 新建 -> 文件... -> 在底部你会看到‘Theme Extension’。
在这里你需要设置3个变量:1 - 扩展名称,2 - 继承自,例如,如果是你的第一个文件应该是用于UIViewController的;3 - 枚举类型名称,为了更容易管理,我们设置为创建一个具有给定名称的枚举,现在请输入将用于枚举类型的名称;
假设你命名为
- 扩展名称:UIViewControllerExtension
- 继承自:UIViewController
- 枚举类型名称:ViewControllerType
你将有一个像这样的文件
// Made with Swift Json Theme Manager Template by Felipe Garcia
//
// UIViewControllerExtension.swift
// SwiftJsonThemeManager
//
// Created by Felipe Florencio Garcia.
// Copyright © 2019 Felipe Florencio Garcia. All rights reserved.
//
import SwiftJsonThemeManager
// This will be your unique Id to your associatedObject, this is important to be unique for each extension
// as the `identifierUIViewControllerExtensionName` var created below is a runtime variable, in order to not
// mix with any other variable / extension, always make sure it's unique
public var customUIViewControllerExtensionId: UInt8 = 0
// Your Enum of type, here you can manage to have / use a type to each kind template that you will use, just
// like our sample project that we use some custom types in order to set the properties that we want to that type
public enum ViewControllerType: String {
// Add your types here
case none
}
extension UIViewController {
// ATENTION to have your custom key, always need to be unique for each extension
// Tip: Create a file that have all the key's so you have sure neve have duplicated
// This is the variable that you set to your view controller, or the type of the extension
// that you created, for example, 'UIView', 'UILabel', and so, to have a identifier that we
// can check and according to this set a color, font, or any customization that you want
@IBInspectable var identifierUIViewControllerExtensionName: String {
get {
return associatedObject(base: self, key: &customUIViewControllerExtensionId, initialiser: { () -> NSString in
return ""
}) as String
}
set {
associateObject(base: self, key: &customUIViewControllerExtensionId, value: newValue as NSString)
}
}
// AS the name say, it's the variable name identifier, is the variable that we use to see what is the name that we
// used to identify this specific view controller.
public var viewViewControllerType: ViewControllerType {
get {
return ViewControllerType(rawValue: identifierUIViewControllerExtensionName) ?? .none
}
set {
identifierUIViewControllerExtensionName = newValue.rawValue
}
}
}
extension UIViewController: ThemedView {
// This is the method that need to be called in order to apply the theme
// WE can set a new THEME that can be specific just to one view if you want
// If by some reason we want to avoid a specific type we can set the array of
// itens that we want to avoid, so if match we just return and don't continue
// trying to apply any theme configuration
public func applyUIAppearance(with theme: Theme? = nil, avoid thisViews: [Any]? = nil) {
// If is the type UIViewController use this function to register to update
// any view controller that you use in your project, can be used to any kind
// of view too, but is recomended to use with UIViewController only
ThemeManager.registerForThemeUpdates(self)
// Check if I should not try to apply template to this view
if let list = thisViews {
let isMyType = list.compactMap({ $0 as? UIViewController })
if isMyType.first(where: { view in return view.isEqual(self) }) != nil {
return
}
}
let theme = theme ?? ThemeManager.currentTheme
switch viewViewControllerType {
default: break
}
// SAMPLE
// switch viewType {
// case .simpleView:
// backgroundColor = theme.getThemeColor(name: "button.textColor")
// case .simpleViewColored:
// backgroundColor = theme.getThemeColor(name: "titleColor")
// case .notThemed:
// return
// default: break
//}
// You can use this in order to apply theme to all subviews, if you create a extension
// to your UIView for example, this will loop inside all your subview, and can apply
// a custom theme color configuration that you set, look at our sample project to
// If your type is UIView use this in order to apply to all subviews
// self.subviews.forEach {
// $0.applyUIAppearance(with: theme, avoid: thisViews)
// }
// When you want to have a custom implementation only to that class use this
if let aSelf = self as? CustomTheme { aSelf.customTheme(theme) }
}
}
这是一个模型,说明了您如何使用,如果您想查看示例项目,您将很容易看到如何使用。
使用此方法调用所有您的视图控制器的优点是轻松更改主题而无需重新加载视图本身。因为对于您使用的每个视图控制器,使用applyUIAppearance()我们将注册视图控制器,当我们要更新视图布局时,我们只需要设置一个新的主题,一旦我们设置了屏幕上的视图,它将自动重新加载。查看我们的SecondViewController
示例项目。
作者
Felipe Garcia, [email protected]
许可
SwiftJsonThemeManager遵循MIT许可。更多信息请参阅LICENSE文件。