サトリクのこだわりのモノ紹介

【Swift5/Xcode】【チートシート】Swiftでカラーを指定する方法をまとめてみました。

サトリク

どうも、サトリクです。

この記事では、Swift5でのカラー指定方法について、徹底解説していきたいと思います。

Swiftのカラー指定方法は、本当にたくさんあります!現状全て解説するので、自分が一番使いやすいカラー指定方法を見つけ出してください!

 

先ほども言った通り、カラー指定の方法は、以下のようにたくさんあります。

一つ一つ丁寧に解説して行きます。

  1. storyboardでカラー指定する方法
  2. UIColorのプロパティでカラー指定する方法
  3. UIColorでRGB(CGFloat型)でカラー指定する方法
  4. UIColorを無理やりRGBでカラー指定する方法
  5. UIColorを16進数のカラーコードでカラー指定する方法
  6. UIColorをRGBでカラー指定する方法
  7. カラーリテラルを使ってカラー指定する方法
  8. Assets.xcassetsで色を管理し、カラー指定する方法

サトリク

今回の説明では、ボタンの背景の色を変えていきます。

環境

item Version
Swift 5.1.3
Xcode 11.3

storyboardでカラー指定する方法

おそらく一番簡単なのがこの方法です。

これは誰でもわかる方法なのですが、一応解説します。

storyboardでカラーを指定する方法

①ボタンを選択
をクリック
③Backgroundを選択する。

そうすると、このような、ウィンドウが開き、色を指定することができます。

storyboardからのカラー指定のウィンドウ

使いたい色がない場合は、一番下のcustomを選択すると、自由に色を指定できます。

customを押すと以下のように、色々と自由に決めることができます!

 

storyboardでボタンの背景の色を変更する画像

変更すると、このように色が変わります。

やはり、これが一番簡単です。

色を変更する必要のない要素 (ボタンやラベル)の色指定は、この方法でいいと思います。

が、これでは処理や場合によって色を変更することはできません

そこで、これ以降は、コードで色の指定する方法をメインで紹介していきます。

UIColorのプロパティでカラー指定する方法

これは、コード上で指定する方法の中で一番簡単な方法です。

まずは、ボタンとコードを紐付けます。

controlを押しながら、ドラッグ&ドロップ

紐付けたら、viewDidLoad() (など)に、以下のコードを書くだけです。

細かくいうと、

ボタン(btn)の背景(backgroundColor)に、元からある色(UIColor)の赤(red)を入れてるだけです。

ちなみに、最初のUIColorは省略できますので、なるべく省略しましょう。

❌Before
⭕️After

これだけで色を変えることができます。とても簡単です。

元からある色(プロパティ)は、以下のように、15種類もあります。

UIColorプロパティ カラーコード 実際の色
UIColor.black #000000
UIColor.darkGray 暗い灰色 #555555
UIColor.gray 灰色 #808080
UIColor.lightGray 明るい灰色 #AAAAAA
UIColor.white #FFFFFF
UIColor.red #FF0000
UIColor.green #00FF00
UIColor.blue #0000FF
UIColor.cyan 水色(シアン) #00FFFF
UIColor.yellow 黄色 #FFFF00
UIColor.magenta ピンク(マゼンタ) #FF00FF
UIColor.orange 橙色(オレンジ) #FF8000
UIColor.purple #810081
UIColor.brown 茶色 #996633
UIColor.clear 指定なし

15種類ありますが、この方法では、自分の好きな色に指定できません

次は、コード上で自分の好きな色を指定する方法をご紹介します。

UIColorでRGB(CGFloat型)でカラー指定する方法

次は、自分の好きな色を入れる方法をご紹介します。

では、僕のブログのメインカラー#4887BFを指定したいと思います。

カラーコードの#4887BFをRGBに変換します。いちいち計算するのはめんどくさいので、#4887BFで検索します。

Googleでカラーを検索する画像 

そうすると、RGBが簡単にわかります

R:72, G:135, B:191ですね。

そして、これをCGFloat型という型に変換します。

変換の仕方は、RとGとBを255で割ります

R:72 / 255 = 0.28235294117

G:135 / 255 = 0.5294117647

B:191 / 255 = 0.74901960784

これを以下のように、四捨五入してviewDidLoad() (など)書きます。

ブログのヘッダーのカラーをボタンの背景にした画像

そうすると、指定できます!

こんな感じです。

サトリク

ブログとほぼ同じ色に指定することができました!

このように、RGBをCGFloat型に変換してUIColorに代入することで、自分の好きな色に指定できます。

が、しかし、この方法では、毎回毎回計算しなければいけませんし、四捨五入して入れてるので、ごくわずかですが、指定したい色と違います。(四捨五入せずに入れてもいいけど長くなる。)

では、次は、この方法を利用して、もっとUIColorの指定が楽な方法をご紹介します。

UIColorを無理やりRGBでカラー指定する方法

これは、先ほどと同じ方法ですが、少し代入の仕方を変えます

先ほど、72 / 255 = 0.28235294117このような計算をして、CGFloat型に入れる値を出しましたが、

今回は、この計算ごと突っ込みます。

サトリク

こんな感じです。

これだと意外と楽ですよね。

しかし、まだ楽したい。。これじゃぱっと見何色かわからないし、255を毎回書くのがだるいですよね。。

16進数のカラーコード(#FFFFFF)のみで入れる方法はないのでしょうか。

あります!

UIColorを16進数のカラーコードでカラー指定する方法

さあ、これがコードでの指定の最終形態です。

#4887BFこの16進数のカラーコードを入力するだけで、色の指定ができるようにしましょう。

やり方は簡単です。

まずは、クラスファイルを作成しましょう。

Swift Fileを選んで、Nextを押してください。

クラスを作成する画像

UIColorHexという名前をつけて、Createを押してください。クラス作成の画像

そして、以下のコードをコピペしてください。

コピペの画像

サトリク

こんな感じ!

あとは、このように指定するだけです。

alphaも指定したい場合は、以下のように記述すればできます。

サトリク

素晴らしいですね!

僕はこのやり方が一番おしゃれで楽だと思います。

UIColorをRGBでカラー指定する方法

デザイナーによっては、16進数のカラーコードではなく、RGBで送ってくる場合があるかもしれません。

その場合、コードも16進数のカラーコードではなく、RGBで指定しましょう。

先ほどのように、Swift FileをUIColorRGB.swift(任意)という名前で、クラスを作成し、以下のコードをコピペしましょう。

あとは、このように指定するだけです。

alphaも指定したい場合は、以下のように記述すればできます。

カラーリテラルを使ってカラー指定する方法

次は、少し裏技のようなカラー指定方法をご紹介します。

指定する箇所に、Colorと打つと、Color Literalというのが候補に出てくるので、enterを押して選択しましょう。

ColorLiteralの画像

そうすると、なんとコード上に、色のタイルみたいなものが表示されました!

これをダブルクリックしてみてください!ColorLiteralできた!

ダブルクリックすると、以下のような、パレットが出てきます。

さらに、Otherを押せば、storyboardのカラー指定みたいに、色を自由に変えることができます。

ColorLiteralで自由に色を選択する画像

サトリク

最初これを見たとき、Xcodeってすげーって感心しました笑

 

コード上にこんなタイルみたいなものが出てくるなんてビビりますよね。笑

この方法はわかりやすく、簡単ですごいのですが、デメリットもあります。。

 

 

デメリット

黒を指定した場合、背景と混在してわかりにくい。

同じ色の場合、区別がつきにくい。

など、デメリットもあります。

サトリク

これは、人それぞれの好みですね!

ただ、開発者が複数人いる時は、あらかじめ書き方を揃えておいたほうがいいですね。

Assets.xcassetsで色を管理し、カラー指定する方法

これが最後に紹介するカラー指定の方法です。

①左側のNavigatorから、Assets.xcassetsというフォルダを選択します。

②+ボタンを選択します。

 

New Color Setを選択する画像
左のようなウィンドウが出てきますので、

New Color Setを選択してください。

そうすると、真ん中らへんにタイルが表示されるので、そのタイルの色を変更しましょう。

タイルに名前をつける。(ここでは、MainColor)

Show Color Panelを選択

③好きなカラーを指定 Assets.xcassetsでカラー指定の画像

上記の設定が完成したら、指定したいコードに戻って、以下のような、コードを書きます。

※MainColorは自分がつけた名前を入れる

これで、先ほど設定した色が表示されます。

 

サトリク

これのいい点は色を管理できるところです。

アプリで使っている色は、Assets.xcassetsを見ればすぐにわかりますからね。

この方法も意外と好きですね笑

まとめ

ここまで、たくさんの色指定の方法をご紹介してきました。

自分が一番やりやすい方法を見つけてみてください!

一つ注意して欲しい点が、なるべく書き方を統一することです。

この色では、この色指定方法を使い、この色ではこの色指定方法みたいな感じで、やり方がバラバラだと、可読性が失われます。そのため、やりやすい方法を見つけたら、なるべくその方法のみでコーディングを行ってください!

以上、色指定のチートシートでした!