Edited at

[iOS]iOS11以降の色の定義方法(設計提案)

iOS11からAssetsに色が定義できるように成りました

https://developer.apple.com/library/archive/releasenotes/DeveloperTools/RN-Xcode/Chapters/Introduction.html#//apple_ref/doc/uid/TP40001051-CH1-SW904

説明は皆様がわかりやすくされてるので割愛します

スクリーンショット 2018-11-06 15.50.32.png

スクリーンショット 2018-11-06 15.50.27.png

スクリーンショット 2018-11-06 15.53.37.png


本題 コードから利用する

デフォでも十分シンプルです

UIColor(named:"keyColor")

しかしこうするととても気持ちいいです

enum Theme: String {

case keyColor = "keyColor"
case subKeyColor = "subKeyColor"

var color:UIColor {
return UIColor(named: self.rawValue)!
}
var cgColor:CGColor {
return color.cgColor
}
}

// 利用
func hoge() {
backgroundColor = Theme.keyColor.color
layer.borderColor = Theme.subKeyColor.cgColor
}

typoも怖くないです

切り替えも簡単そうです


所感

以前からこう書きたかった☺️


(以下追記)


別のアイディア(UIColorのextension)

こういう書き方もできそうですが、こっちの方が良いですかね?

extension UIColor {

static var keyColor = UIColor(named: "keyColor")!
static var subKeyColor = UIColor(named: "subKeyColor")!
}

// 利用
override func viewDidLoad() {
super.viewDidLoad()

view.backgroundColor = UIColor.keyColor
view.backgroundColor = .keyColor

view.layer.backgroundColor = UIColor.subKeyColor.cgColor
}


別のアイディア(階層化して整理しやすくする)

「UITableViewのデフォルトのbackgroundColor」とかを定義したい場合


enum Theme: String {
case keyColor = "keyColor"
case subKeyColor = "subKeyColor"

enum TableView: String {
case backgroundColor = "tableView.background"
}
}

fileprivate extension RawRepresentable where RawValue == String {
var color:UIColor {
return UIColor(named: self.rawValue)!
}
var cgColor:CGColor {
return color.cgColor
}
}

// 利用側
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = Theme.TableView.backgroundColor.color
view.layer.backgroundColor = Theme.TableView.backgroundColor.cgColor
}


複合させてみる

ちょっとやり過ぎな感じがありますが


extension UIColor {
static var keyColor = Theme.keyColor
static var subKeyColor = Theme.subKeyColor
}

動的にアプリ全体の色テーマが変わるようなアプリなら有効かな? と思いましたが、そもそもその場合はColorSetの恩恵がほとんどないですね


追記:ColorLiteral

そういえばColorLiteralってありましたね

何故か使ってません

参考

https://medium.com/swift-column/color-literal-6223850f7e2c