7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Swift】Color指定の方法まとめ

Posted at

SwiftにおけるColor Chooser

色の指定を行う方法としていくつか考えられるので,メモがわりに残しておきます.

開発環境

Swift 4
Xcode 11.1

UIColorのプロパティ指定

Swift初心者用の参考書などにもよく載っている方法がこちらです.

// 背景を赤色に変更
view.backgroundColor = UIColor.red
view.backgroundColor = .red

UIColorの後ろにredやblueなどを指定することでそれに対応する色を指定することができます.
UIColorを省略することもでき,その場合には2行目の書き方になります.

しかし,この書き方では,プロパティに設定されているデフォルトの色を指定することが基本になるため,開発者が意図するような色を指定できない場合もあります.

UIColorでRGB指定

やはり,開発者として嬉しいのはRGBで色を指定できることでしょう.
UIColorでも次のようにRGBを指定できます.

// RGBを指定
view.backgroundColor = UIColor(red: 0.1, green: 0.5, blue: 1.0, alpha: 1.0)

しかし,この方法では,RGBとalpha値は全てCGFloat型で指定しなければならず,色の指定が難しくなります.

そこで,次のように分数表記にし,分子に任意のRGB値を指定することで,RGBの設定値をわかりやすくすることができます.

// 分数表記にすることでRGBを指定
view.backgroundColor = UIColor(red: 30/255, green: 144/255, blue: 255/255, alpha: 1.0)

この指定の方が,メンテナンスなどもしやすいと思います.

Color Literal

Color Literalを使用することで,コードで色を指定する際にColor Pickerで指定することができます.
この指定方法はXcode8で追加されましたが,Xcode11でも使用することができます.

使い方としてはまず,カラー指定の際にColorと入力することでColor Literalがsuggestされるのでこちらを選択します.

image.png

すると,以下のように指定した色が可視化されるようになります.
(以下は白を指定している状態)

image.png

この白くなっている部分をダブルクリックすることでColor Pickerをコード内に表示することができます.
image.png

このまま色を指定することもできますが,Other...をクリックすると,見慣れたColor Pickerを開くことができます.

image.png

この方法が見やすいと思う人も,そうでない人もいると思います.
自分はRGBの方が扱いやすいと思ってしまいますが,Color Literalの方が子供とかは喜びそうだなとか思ったりもしました.

まとめ

今回は色の指定の仕方をまとめてみましたが,実際にはデザイナーから指定された画像をペタッと貼る場合も多いかと思いますのでどれほど参考になるかわかりませんが,Swiftでの色指定の際に少しでも力に慣れれば幸いです.

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?