Help us understand the problem. What is going on with this article?

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

More than 3 years have 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away