Edited at
iOSDay 9

Swift 3時代のUIColorとそれを扱う便利なライブラリを作りました

More than 1 year has passed since last update.


概要


  • Xcode 8 / Swift 3 での UIColor の指定について


  • UIColorを簡単に指定できるライブラリ (CSS3ColorsSwift) をつくりました


Swift バージョンによる UIColorの違い

Swift 3 以降 多くのクラスのメソッドやプロパティが変更になりました。

UIColor の特定の色を指定するタイププロパティも変更され、名前に冗長さがなくなりました。


Swift 2

view.backgroundColor = UIColor.whiteColor()


Swift 3

view.backgroundColor = UIColor.white

// UIColorは省略可能
view.backgroundColor = .white

クラス名の省略は Swift 2 でも可能でしたが、宣言が class funcclass var になったことで()も必要ないため、読みやすくなります。


自由に色を設定するための幾つかの方法


RGBa指定のよくやるやつ

extension UIColor {

convenience init(hex: UInt, alpha: CGFloat = 1.0) {
let red: CGFloat = CGFloat((rgb & 0xFF0000) >> 16) / 255.0
let green: CGFloat = CGFloat((rgb & 0x00FF00) >> 8) / 255.0
let blue: CGFloat = CGFloat(rgb & 0x0000FF) / 255.0
self.init(red: red, green: green, blue: blue, alpha: alpha)
}
}

UIColor(hex: 0x00ff00) // green


Color Literal

color_literal.gif

Xcode 8ではColor Literalという仕組みで 色を見た目にわかりやすく設定できるようになりました。

Color Literalについては こちらのコラム で詳しく紹介されていて参考になります。


ライブラリを作りました

CSS3ColorsSwift

RGBaの指定ではパッと見た目にわかりづらい。Color Literalは微妙な違いがわからないし、設定方法が面倒。

そう思ってCSS3で定義されている X11 Colors を簡単に設定できるようにするライブラリを作りました。

UIColorextensionになっていて、131色定義しています。 (実際の色数より少ない理由は、下記の『注意点』で説明しています)

uicolor_extension_mini.png


使い方

CocoaPods, Carthage でインストールできるのでREADMEを御覧ください。

view.backgroundColor = .lightGreen


注意点

UIColor にデフォルトで定義されているものは二通りの対応をしています。



  • red, blue など名前もカラーコードも一致するものは、このライブラリに含めませんでした。


  • green, orange など名前は一致するが違うカラーコードの場合は、タイププロパティ名の後ろにCSS3を付けています。

名前
カラーコード

.green
#00FF00 ■

.greenCSS3
#008000 ■

名前空間を利用すれば同じ名前を使うこともできましたが、UIColor.NameSpace.green のように長く入力したくなかったのでこのようにしました。


Xcode Snippet

UIColorの名前空間を侵すようなことをしたくないという人のために、色の名前でColor Literalが入力しやすくするXcodeのSnippetファイルを作っておきました。

こちらは、CSS3の色とUIColorで定義されている色も合わせて146色あります。

codesnippet.gif


インストール方法

# bash, zsh

$ git clone https://github.com/WorldDownTown/CSS3ColorsSwift.git && cp CSS3ColorsSwift/XcodeSnippets/*.codesnippet ~/Library/Developer/Xcode/UserData/CodeSnippets/

# fish
$ git clone https://github.com/WorldDownTown/CSS3ColorsSwift.git; and cp CSS3ColorsSwift/XcodeSnippets/*.codesnippet ~/Library/Developer/Xcode/UserData/CodeSnippets/


さいごに

issue でも Pull Rquest でも構いません。コントリビュート待っています。

https://github.com/WorldDownTown/CSS3ColorsSwift