iOS 高效灵活地配置可复用视图组件的主题

 

本文首发于 Ficow Shen's Blog，原文地址： iOS 高效灵活地配置可复用视图组件的主题。

 

内容概览

• 前言
• 如何配置主题？
• 如何更高效地配置主题？
• 面向协议/接口的方案

 

 

前言

 

在开发可视化应用的过程中，配置控件的样式是最常见的工作内容。请问读者是否遇到过这样的需求：在多个项目中复用多种可视化控件，而且这些控件可以配置颜色、字体等可视化元素？

本文主要针对控件数量较大，而且需要配置的控件属性较多的这种需求对主题配置方案进行探索，希望能够给读者带来些许启发。

 

 

如何配置主题？

 

大家最熟悉的方式就是给控件添加 控制样式的属性，然后 让调用方去设置控件的样式属性 以实现自定义样式的需求。

public final class ReusableComponent: UIView {
    private let titleLabel = UILabel()

    // 暴露一个颜色配置属性，供调用方更改文本颜色
    public var titleColor: UIColor = .darkGray {
        didSet {
            titleLabel.textColor = titleColor
        }
    }
}

let component = ReusableComponent()
component.titleColor = .red

在控件数量较少、样式属性也较少的情况下，直接设置样式属性的方式是非常简单高效的。

 

如果控件数量大、样式属性较多、使用范围广甚至需要在多个项目中使用时，如何实现简单高效的样式配置呢？请看以下示例代码，并思考这个问题。

public final class ReusableComponent: UIView {
    private let titleLabel = UILabel()
    private let descriptionLabel = UILabel()
    private let confirmButton = UIButton()

    public var titleColor: UIColor = .darkGray {
        didSet {
            titleLabel.textColor = titleColor
        }
    }

    public var titleFont: UIFont = .systemFont(ofSize: 20) {
        didSet {
            titleLabel.font = titleFont
        }
    }

    public var descriptionColor: UIColor = .gray {
        didSet {
            descriptionLabel.textColor = descriptionColor
        }
    }

    public var descriptionFont: UIFont = .systemFont(ofSize: 14) {
        didSet {
            descriptionLabel.font = descriptionFont
        }
    }

    public var confirmTitleColor: UIColor = .darkGray {
        didSet {
            confirmButton.setTitleColor(confirmTitleColor, for: .normal)
        }
    }

    public var confirmTitleFont: UIFont = .systemFont(ofSize: 16) {
        didSet {
            confirmButton.titleLabel?.font = confirmTitleFont
        }
    }
}

let component = ReusableComponent()
component.titleColor = .black
component.titleFont = .systemFont(ofSize: 19)
component.descriptionColor = .lightGray
component.descriptionFont = .systemFont(ofSize: 13)
component.confirmTitleColor = .black
component.confirmTitleFont = .systemFont(ofSize: 15)

请看上面的示例代码，这里仅仅配置几个样式属性就已经需要写很多行代码。如果需要大面积修改这种配置，我们很容易就漏掉某个属性。怎么办？

 

 

 

public final class ReusableComponent: UIView {

    public struct Theme {
        let titleColor: UIColor
        let titleFont: UIFont
        let descriptionColor: UIColor
        let descriptionFont: UIFont
        let confirmTitleColor: UIColor
        let confirmTitleFont: UIFont
    }

    public static let defaultTheme = Theme(titleColor: .darkGray,
                                           titleFont: .systemFont(ofSize: 20),
                                           descriptionColor: .gray,
                                           descriptionFont: .systemFont(ofSize: 14),
                                           confirmTitleColor: .darkGray,
                                           confirmTitleFont: .systemFont(ofSize: 16))

    public var theme: Theme = defaultTheme {
        didSet {
            titleLabel.textColor = theme.titleColor
            titleLabel.font = theme.titleFont
            descriptionLabel.textColor = theme.descriptionColor
            descriptionLabel.font = theme.descriptionFont
            confirmButton.setTitleColor(theme.confirmTitleColor, for: .normal)
            confirmButton.titleLabel?.font = theme.confirmTitleFont
        }
    }

    private let titleLabel = UILabel()
    private let descriptionLabel = UILabel()
    private let confirmButton = UIButton()
}

let component = ReusableComponent()
let theme = ReusableComponent.Theme(titleColor: .black,
                                    titleFont: .systemFont(ofSize: 19),
                                    descriptionColor: .lightGray,
                                    descriptionFont: .systemFont(ofSize: 13),
                                    confirmTitleColor: .black,
                                    confirmTitleFont: .systemFont(ofSize: 15))
component.theme = theme

为控件定义一个主题类型并定义一个主题属性，调用方不用担心漏掉某个配置项。而且，调用方甚至可以定义一个全局的主题对象，在需要使用的时候直接赋值即可。

但是，我们依然要为每一个控件实例进行样式配置。您可以设想一下，如果您需要对 ReusableComponent1, ReusableComponent2, ... , ReusableComponentN 这些控件进行主题配置，您就需要定义超级多的主题类型。 而且，调用方需要确切知晓控件里面的主题类型，然后在配置主题的时候去初始化一个主题类型的实例并传给控件实例。

那么，有没有什么办法更简单、灵活、高效呢？

 

 

如何更高效地配置主题？

 

每次用到控件都去指定主题的方式极其低效，我们先要想方设法优化这个问题。How?

public final class ReusableComponent: UIView {

    // ...

    public static var theme: Theme = defaultTheme

    public var theme: Theme = ReusableComponent.theme {
        didSet {
            titleLabel.textColor = theme.titleColor
            titleLabel.font = theme.titleFont
            descriptionLabel.textColor = theme.descriptionColor
            descriptionLabel.font = theme.descriptionFont
            confirmButton.setTitleColor(theme.confirmTitleColor, for: .normal)
            confirmButton.titleLabel?.font = theme.confirmTitleFont
        }
    }

    // ...
}

ReusableComponent.theme = ReusableComponent.Theme(titleColor: .black,
                                                  titleFont: .systemFont(ofSize: 19),
                                                  descriptionColor: .lightGray,
                                                  descriptionFont: .systemFont(ofSize: 13),
                                                  confirmTitleColor: .black,
                                                  confirmTitleFont: .systemFont(ofSize: 15))
let component = ReusableComponent()
print(component.theme)

一般来说，应用内使用的控件的主题风格都是统一的。所以，更多的实际场景是我们需要对控件类型进行统一的样式配置。

在ReusableComponent类型上增加一个静态变量，这样只需要在使用控件前，对控件进行统一配置即可。如果稍后需要对某个控件实例进行定制，只需要修改控件实例的theme属性即可。这解决了配置效率低下的问题。

如果控件是定义在一个公用库里面，有多个项目需要用到库中的控件，那么直接暴露控件内部定义的主题类型给调用方将是一件非常不妙的事情。我们应该尽可能少地暴露公用库中的内容，以达到高度的封装效果。这样，以后可能会发生的内部变动就不担心会受到下游调用方的约束。

那么，怎么封装呢？

 

 

面向协议/接口的方案

 

如果您长期使用Swift开发语言，面向协议编程的概念您一定听说过。灵魂拷问又来了，究竟怎样的编程方式才是面向协议编程呢？

public protocol ReusableComponentTheme {
    var titleColor: UIColor { get }
    var titleFont: UIFont { get }
    var descriptionColor: UIColor { get }
    var descriptionFont: UIFont { get }
    var confirmTitleColor: UIColor { get }
    var confirmTitleFont: UIFont { get }
}

public final class ReusableComponent: UIView {

    struct Theme: ReusableComponentTheme {
        var titleColor: UIColor { .darkGray }
        var titleFont: UIFont { .systemFont(ofSize: 20) }
        var descriptionColor: UIColor { .gray }
        var descriptionFont: UIFont { .systemFont(ofSize: 14) }
        var confirmTitleColor: UIColor { .darkGray }
        var confirmTitleFont: UIFont { .systemFont(ofSize: 16) }
    }

    public static var theme: ReusableComponentTheme = Theme()

    public var theme: ReusableComponentTheme = ReusableComponent.theme {
        didSet {
            titleLabel.textColor = theme.titleColor
            titleLabel.font = theme.titleFont
            descriptionLabel.textColor = theme.descriptionColor
            descriptionLabel.font = theme.descriptionFont
            confirmButton.setTitleColor(theme.confirmTitleColor, for: .normal)
            confirmButton.titleLabel?.font = theme.confirmTitleFont
        }
    }

    private let titleLabel = UILabel()
    private let descriptionLabel = UILabel()
    private let confirmButton = UIButton()
}

struct CustomReusableComponentTheme: ReusableComponentTheme {
    var titleColor: UIColor { .black }
    var titleFont: UIFont { .systemFont(ofSize: 19) }
    var descriptionColor: UIColor { .lightGray }
    var descriptionFont: UIFont { .systemFont(ofSize: 13) }
    var confirmTitleColor: UIColor { .black }
    var confirmTitleFont: UIFont { .systemFont(ofSize: 15) }
}

ReusableComponent.theme = CustomReusableComponentTheme()
let component = ReusableComponent()
print(component.theme)

针对控件的主题定义一个协议，然后让主题类型去遵循这个协议。调用方不再知晓控件内部的主题类型，控件内部后续的变动不会导致调用方的编译错误，这样也就实现了调用链上下游的解耦。

如果以后需要对控件内部的样式进行调整，您可以定义新的协议来满足新的需求，而不是去修改旧的协议。这种变更方式与后端接口支持不同版本类似，也比较灵活。

 

以上就是本文的全部内容，希望对您有所启发！