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

UIColor 1000色分のライブラリーと型安全な仕組みを作った

More than 3 years have passed since last update.

いちいち #FF00FF とか書いて、あーでもない、こーでもないと言いながらUIColorを作る日々にオサラバ!

(注記: RGB入力をサボる仕組みに過ぎないので、高度な色管理とかは全然ありません)

そーす

github.com

要旨

p1.png

使い方

オブジェクト生成 (危険)

sRGBもしくは16進数6桁のリテラルを使って Color 構造体を作ります。RGBは 0...255、16進数は 0x0...0xFFFFFF、アルファ値は 0...1.0 にそれぞれ収まる値で指定してください。

なお Color 構造体はゆとり世代のため、イニシャライザに red: 256 とか alpha: 100 などの無理難題を指定するとnilを投げ返します。

(Doubleで指定する仕組みは)ないです

import ColorPack

// init? (RGB)
Color(red: 100, green: 200, blue: 50)
Color(red: 100, green: 200, blue: 50, alpha: 0.3)
Color(red: 100, green: 200, blue: 350)            // nil
Color(red: 100, green: 200, blue: 50, alpha: 1.3) // nil

// init? (Hex)
Color(hex: 0xFFcc44)
Color(hex: 0xFFcc44, alpha: 0.6)

"FFFFFF" などの文字列から変換したい場合は Int(hoge, radix: 16) でなんとか頑張ってください。

オブジェクト生成 (安全)

失敗するかもしれないイニシャライザーは嫌だなあ… というケースのために、列挙型しか受け付けないファクトリもあります。RGBは .d0 ~ .d255、Hexは .x00 ~ .xFFを引数に取ります。

// init (type safe: RGB, Hex, Web safe)
Color.RGB(red: .d0, green: .d100, blue: .d180)
Color.Hex(red: .x77, green: .xC2, blue: .xF9)

UIColor / NSColor に変換

toUIColor または toNSColor を通じてオブジェクトを変換できます。

Color(red: 100, green: 200, blue: 50, alpha: 0.3)?.toUIColor

色ライブラリー

今回の本題はこちら。

UIColorもいくつかの色をプロパティとして提供していますが、率直に申し上げてショボいんですよね。ちょっとでも色を使おうと思ったら、いちいちネットで検索して自分で作らないといけません。

ガチガチの設計書に基づいて着色する時はまだしも、「ちょっとここ色つけたいなー」という程度の動機しかないとき、これは非常にめんどくさいです。そして赤と青でベタ塗りされたドギツイ色のUIサンプルが量産されます。

で、これじゃちょっとなあ… とテンション下がったので1000色ほど並べてみました。

プロパティを取ってくるだけで、あの色もこの色も使えます。

// CSS4: 148 colors
CSS4Colors.beige.toUIColor
CSS4Colors.dimGray.toUIColor
CSS4Colors.rebeccaPurple.toUIColor

// web safe colors: 216
WebSafeColors.x0000CC.toUIColor
WebSafeColors.x00CC33.toUIColor
WebSafeColors.xFF0099.toUIColor

// 'crayon' set: 48
CrayonColors.aluminum.toUIColor
CrayonColors.banana.toUIColor
CrayonColors.flora.toUIColor

// japanese colors: roughly 700
JapaneseColors.ao.toUIColor
JapaneseColors..toUIColor
JapaneseColors.sabionando.toUIColor
JapaneseColors.錆御納戸.toUIColor

殆ど日本の色による水増しじゃねーか!という抗議は現在受け付けておりません。ご了承ください。

日本の色に関しては「ローマ字つづりの変数」と「漢字そのままの変数」をどちらも用意してあるので、サジェストで色を探すと愉しいかもしれません。なお「変数が700個」ではなく「色が700色」ですので、変数としては計1400個くらいあります。

それが何の役に立つのかというと、そこは正直、ちょっとその… 国際交流ですとか…?

付記

Frameworkの作り方が分かりにくすぎて涙がこぼれました。おしまい。

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