需求由來
在專案開發過程中，設計師調整設計稿是正常的，但如果調整頻率一高，就讓我們開發十分抓狂。
我們來進行一個情景模擬（以 AutoLayout 為例）：
設計師：這個左邊距調多 2 px，這個上邊距調少 2 px，這 2 個 view 之間間距調大點，多 2 px 吧，這個文字字型調大一號。
開發：好的，我馬上調。（我一頓操作，調整約束值，...）
======== 過了 1 天 ==========
設計師：這個樣式有點問題，整體樣式我重新設計了一下，你調一下（給了我最新的設計稿）
開發：這個樣式調整有點大啊，各種約束都不一樣了，你確定要改嗎？
設計師：確定。（我一頓操作，刪除舊約束程式碼，新增新約束程式碼，...）
======== 又過了 1 天 ==========
設計師：這個樣式，老闆看後和之前對比，覺得還是之前樣式好，你換回來吧。
開發：.......
還有一種情況，一個檢視在不同地方顯示的佈局樣式是不一樣的，這種檢視樣式配置是非常繁瑣的，就像我們使用 ObjC 的 decode 和 encode 程式碼一樣，都是必須但又是無腦的（體力活），我就想搞個東西方便配置檢視樣式，從這個過程中解脫出來
方案思考
全域性配置樣式
通過全域性變數進行配置（之前的做法）：
extension View {
// 約束值
struct Constraint {
static let topPadding: CGFloat = 30
static let bottomPadding: CGFloat = 10
static let leftPadding: CGFloat = 43
static let rightPadding: CGFloat = 41
}
// 顏色
struct Color {
static let title = UIColor.red
static let date = UIColor.white
static let source = UIColor.black
}
// 字型
struct Font {
static let title = UIFont.systemFont(ofSize: 16)
static let date = UIFont.systemFont(ofSize: 13)
static let source = UIFont.systemFont(ofSize: 13)
}
}
複製程式碼初始化配置樣式
全域性配置很不方便，沒法在外部修改樣式配置，後來想到可以通過初始化傳入樣式進行配置的：
class ViewStyle {
// 約束值
var topPadding: CGFloat = 30
var bottomPadding: CGFloat = 10
var leftPadding: CGFloat = 43
var rightPadding: CGFloat = 41
// 顏色
var titleColor = UIColor.red
var dateColor = UIColor.white
var sourceColor = UIColor.black
// 字型
var titleFont = UIFont.systemFont(ofSize: 16)
var dateFont = UIFont.systemFont(ofSize: 13)
var sourceFont = UIFont.systemFont(ofSize: 13)
}
class View: UIView {
var style: ViewStyle?
override init(frame: CGRect, style: ViewStyle) {
super.init(frame: frame)
self. style = style
setupSubviews(with: style)
}
fileprivate func setupSubviews(with style: ViewStyle) {
// 樣式配置程式碼
}
}
複製程式碼屬性配置樣式
初始化配置樣式在大部分情況下已經滿足需求了，但因為初始化方法有很多，尤其是使用 xib 載入的時候，不好處理。
因為我那段時間正在學習 RxSwift + ReactorKit 框架使用，發現 ReactorKit 框架中 Reactor 協議抽離檢視內的業務邏輯處理非常巧妙，讓每個檢視繫結各自的處理器處理業務邏輯，我就想檢視的配置不是也可以和 Reactor 協議一樣，每個檢視都繫結一個檢視樣式配置
// MARK: - 檢視可配置協議
public protocol ViewConfigurable: class {
associatedtype ViewStyle
var viewStyle: ViewStyle? { get set }
func bind(viewStyle: ViewStyle)
}
/// 為實現該協議的類新增一個偽儲存屬性（利用 objc 的關聯方法實現），用來儲存樣式配置表
fileprivate var viewStyleKey: String = "viewStyleKey"
extension ViewConfigurable {
var viewStyle: ViewStyle? {
get {
return objc_getAssociatedObject(self, &viewStyleKey) as? ViewStyle
}
set {
objc_setAssociatedObject(self, &viewStyleKey, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
if let style = newValue {
self.bind(viewStyle: style)
}
}
}
}
class View: UIView, ViewConfigurable {
func bind(viewStyle: ViewStyle) {
// 樣式配置程式碼
}
}
複製程式碼最終方案
我構造了一些常用檢視配置項來輔助樣式配置，可自己看情況自定義配置項：
// MARK: - 以下是一些常用配置項
/// View 配置項
class ViewConfiguration {
lazy var backgroundColor: UIColor = UIColor.clear
lazy var borderWidth: CGFloat = 0
lazy var borderColor: UIColor = UIColor.clear
lazy var cornerRadius: CGFloat = 0
lazy var clipsToBounds: Bool = false
lazy var contentMode: UIViewContentMode = .scaleToFill
// 下面屬性用於約束值配置
lazy var padding: UIEdgeInsets = .zero
lazy var size: CGSize = .zero
}
/// Label 配置項
class LabelConfiguration: ViewConfiguration {
lazy var numberOfLines: Int = 1
lazy var textColor: UIColor = UIColor.black
lazy var textBackgroundColor: UIColor = UIColor.clear
lazy var font: UIFont = UIFont.systemFont(ofSize: 14)
lazy var textAlignment: NSTextAlignment = .left
lazy var lineBreakMode: NSLineBreakMode = .byTruncatingTail
lazy var lineSpacing: CGFloat = 0
lazy var characterSpacing: CGFloat = 0
// 屬性表，用於屬性字串使用
var attributes: [String: Any] {
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = self.lineSpacing
paragraphStyle.lineBreakMode = self.lineBreakMode
paragraphStyle.alignment = self.textAlignment
let attributes: [String: Any] = [
NSParagraphStyleAttributeName: paragraphStyle,
NSKernAttributeName: self.characterSpacing,
NSFontAttributeName: self.font,
NSForegroundColorAttributeName: self.textColor,
NSBackgroundColorAttributeName: self.textBackgroundColor
]
return attributes
}
}
/// Button 配置項
class ButtonConfiguration: ViewConfiguration {
class StateStyle<T> {
var normal: T?
var highlighted: T?
var selected: T?
var disabled: T?
}
lazy var titleFont: UIFont = UIFont.systemFont(ofSize: 14)
lazy var titleColor = StateStyle<UIColor>()
lazy var image = StateStyle<UIImage>()
lazy var title = StateStyle<String>()
lazy var backgroundImage = StateStyle<UIImage>()
lazy var contentEdgeInsets: UIEdgeInsets = .zero
lazy var imageEdgeInsets: UIEdgeInsets = .zero
lazy var titleEdgeInsets: UIEdgeInsets = .zero
}
/// ImageView 配置項
class ImageConfiguration: ViewConfiguration {
var image: UIImage?
}
複製程式碼配置樣式大概類似這樣：
/// 樣式配置基類
class TestViewStyle {
lazy var nameLabel = LabelConfiguration()
lazy var introLabel = LabelConfiguration()
lazy var subscribeButton = ButtonConfiguration()
lazy var imageView = ImageConfiguration()
}
/// 樣式一
class TestViewStyle1: TestViewStyle {
override init() {
super.init()
// 樣式
nameLabel.padding.left = 10
nameLabel.padding.right = -14
nameLabel.textColor = UIColor.black
nameLabel.font = UIFont.systemFont(ofSize: 15)
introLabel.lineSpacing = 10
introLabel.padding.top = 10
introLabel.numberOfLines = 0
introLabel.textColor = UIColor.gray
introLabel.font = UIFont.systemFont(ofSize: 13)
introLabel.lineBreakMode = .byCharWrapping
subscribeButton.padding.top = 10
subscribeButton.size.height = 30
subscribeButton.image.normal = UIImage(named: "subscribe")
subscribeButton.image.selected = UIImage(named: "subscribed")
subscribeButton.title.normal = "訂閱"
subscribeButton.title.selected = "已訂"
subscribeButton.titleColor.normal = UIColor.black
subscribeButton.titleColor.selected = UIColor.yellow
subscribeButton.titleFont = UIFont.systemFont(ofSize: 12)
imageView.padding.left = 14
imageView.padding.top = 20
imageView.size.width = 60
imageView.contentMode = .scaleAspectFill
imageView.borderColor = UIColor.red
imageView.borderWidth = 3
imageView.cornerRadius = imageView.size.width * 0.5
imageView.clipsToBounds = true
}
}
/// 樣式二
class TestViewStyle2: TestViewStyle {
override init() {
super.init()
// 樣式
nameLabel.padding = UIEdgeInsets(top: 10, left: 14, bottom: 0, right: -14)
nameLabel.textColor = UIColor.red
nameLabel.font = UIFont.systemFont(ofSize: 17)
introLabel.padding.top = 10
introLabel.numberOfLines = 0
introLabel.textColor = UIColor.purple
introLabel.font = UIFont.systemFont(ofSize: 15)
introLabel.lineBreakMode = .byCharWrapping
introLabel.lineSpacing = 4
subscribeButton.padding.top = 10
subscribeButton.size.height = 30
subscribeButton.image.normal = UIImage(named: "subscribe")
subscribeButton.image.selected = UIImage(named: "subscribed")
subscribeButton.title.normal = "訂閱"
subscribeButton.title.selected = "已訂"
subscribeButton.titleColor.normal = UIColor.black
subscribeButton.titleColor.selected = UIColor.yellow
subscribeButton.titleFont = UIFont.systemFont(ofSize: 12)
imageView.padding.top = 20
imageView.size.width = 60
imageView.contentMode = .scaleAspectFill
imageView.borderColor = UIColor.red
imageView.borderWidth = 3
imageView.clipsToBounds = true
imageView.cornerRadius = imageView.size.width * 0.5
}
}
複製程式碼在檢視中配置大概這樣：
import UIKit
import SnapKit
class TestView: UIView, ViewConfigurable {
fileprivate var nameLabel: UILabel!
fileprivate var introLabel: UILabel!
fileprivate var subscribeButton: UIButton!
fileprivate var imageView: UIImageView!
override init(frame: CGRect) {
super.init(frame: frame)
setupSubviews()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupSubviews()
}
fileprivate func setupSubviews() {
nameLabel = UILabel(frame: self.bounds)
self.addSubview(nameLabel)
introLabel = UILabel(frame: self.bounds)
self.addSubview(introLabel)
subscribeButton = UIButton(type: .custom)
self.addSubview(subscribeButton)
imageView = UIImageView(frame: self.bounds)
self.addSubview(imageView)
}
/// 更新檢視樣式，不要直接呼叫，通過賦值 self.viewStyle 屬性間接呼叫
func bind(viewStyle: TestViewStyle) {
/* 對外可配置屬性 */
// 名字
nameLabel.textColor = viewStyle.nameLabel.textColor
nameLabel.font = viewStyle.nameLabel.font
// 介紹
introLabel.numberOfLines = viewStyle.introLabel.numberOfLines
if let text = introLabel.text {
introLabel.attributedText = NSAttributedString(string: text, attributes: viewStyle.introLabel.attributes)
}
// 訂閱按鈕
subscribeButton.setTitleColor(viewStyle.subscribeButton.titleColor.normal, for: .normal)
subscribeButton.setTitleColor(viewStyle.subscribeButton.titleColor.selected, for: .selected)
subscribeButton.setImage(viewStyle.subscribeButton.image.normal, for: .normal)
subscribeButton.setImage(viewStyle.subscribeButton.image.selected, for: .selected)
subscribeButton.setTitle(viewStyle.subscribeButton.title.normal, for: .normal)
subscribeButton.setTitle(viewStyle.subscribeButton.title.selected, for: .selected)
subscribeButton.titleLabel?.font = viewStyle.subscribeButton.titleFont
// 頭像
imageView.layer.borderColor = viewStyle.imageView.borderColor.cgColor
imageView.layer.borderWidth = viewStyle.imageView.borderWidth
imageView.layer.cornerRadius = viewStyle.imageView.cornerRadius
imageView.clipsToBounds = viewStyle.imageView.clipsToBounds
imageView.contentMode = viewStyle.imageView.contentMode
// 更新檢視佈局，不同佈局約束關係直接切換
if let viewStyle1 = viewStyle as? TestViewStyle1 {
updateLayoutForStyle1(viewStyle1)
} else if let viewStyle2 = viewStyle as? TestViewStyle2 {
updateLayoutForStyle2(viewStyle2)
}
}
fileprivate func updateLayoutForStyle1(_ viewStyle: TestViewStyle1) {
imageView.snp.remakeConstraints { (make) in
make.left.equalTo(self.snp.left).offset(viewStyle.imageView.padding.left)
make.top.equalTo(self.snp.top).offset(viewStyle.imageView.padding.top)
make.width.equalTo(viewStyle.imageView.size.width)
make.height.equalTo(self.imageView.snp.width)
}
nameLabel.snp.remakeConstraints { (make) in
make.top.equalTo(self.imageView.snp.top)
make.left.equalTo(self.imageView.snp.right).offset(viewStyle.nameLabel.padding.left)
make.right.equalTo(self.snp.right).offset(viewStyle.nameLabel.padding.right)
}
introLabel.snp.remakeConstraints { (make) in
make.top.equalTo(self.nameLabel.snp.bottom).offset(viewStyle.introLabel.padding.top)
make.left.equalTo(self.nameLabel.snp.left)
make.right.equalTo(self.nameLabel.snp.right)
}
subscribeButton.snp.remakeConstraints { (make) in
make.top.equalTo(self.imageView.snp.bottom).offset(viewStyle.subscribeButton.padding.top)
make.left.equalTo(self.imageView.snp.left)
make.right.equalTo(self.imageView.snp.right)
make.height.equalTo(viewStyle.subscribeButton.size.height)
}
}
fileprivate func updateLayoutForStyle2(_ viewStyle: TestViewStyle2) {
imageView.snp.remakeConstraints { (make) in
make.centerX.equalTo(self.snp.centerX)
make.top.equalTo(self.snp.top).offset(viewStyle.imageView.padding.top)
make.width.equalTo(viewStyle.imageView.size.width)
make.height.equalTo(self.imageView.snp.width)
}
subscribeButton.snp.remakeConstraints { (make) in
make.left.equalTo(self.imageView.snp.left)
make.right.equalTo(self.imageView.snp.right)
make.centerX.equalTo(self.imageView.snp.centerX)
make.top.equalTo(self.imageView.snp.bottom).offset(viewStyle.subscribeButton.padding.top)
make.height.equalTo(viewStyle.subscribeButton.size.height)
}
nameLabel.snp.remakeConstraints { (make) in
make.top.equalTo(self.subscribeButton.snp.bottom).offset(viewStyle.nameLabel.padding.top)
make.left.equalTo(self.snp.left).offset(viewStyle.nameLabel.padding.left)
make.right.equalTo(self.snp.right).offset(viewStyle.nameLabel.padding.right)
}
introLabel.snp.remakeConstraints { (make) in
make.top.equalTo(self.nameLabel.snp.bottom).offset(viewStyle.introLabel.padding.top)
make.left.equalTo(self.nameLabel.snp.left)
make.right.equalTo(self.nameLabel.snp.right)
}
}
}
複製程式碼外面使用起來就很簡單，切換不同佈局快捷方便：
class ViewController: UIViewController {
fileprivate var testView: TestView!
override func viewDidLoad() {
super.viewDidLoad()
// 初始化
testView = TestView(frame: CGRect(x: 0, y: 100, width: self.view.frame.size.width, height: 200))
// 配置樣式
testView.viewStyle = TestViewStyle1()
self.view.addSubview(testView)
// 更換樣式配置
testView.viewStyle = TestViewStyle2()
}
}
複製程式碼Demo 原始碼在這：ViewStyleProtocolDemo
有什麼問題可以在下方評論區提出，寫得不好可以提出你的意見，我會合理採納的，O(∩_∩)O哈哈~，求關注求贊