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

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

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

環境

storyboardでカラー指定する方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

btn.backgroundColor = UIColor.red

細かくいうと、

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

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

btn.backgroundColor = UIColor.red

btn.backgroundColor = .red

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

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

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

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

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

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

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

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

そうすると、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() (など)書きます。

btn.backgroundColor = UIColor(red: 0.28, green: 0.53, blue: 0.75, alpha: 1.0)

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

こんな感じです。

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

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

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

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

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

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

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

btn.backgroundColor = UIColor(red: 72/255, green: 135/255, blue: 191/255, alpha: 1.0)

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

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

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

あります！

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

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

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

やり方は簡単です。

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

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

UIColorHexという名前をつけて、Createを押してください。

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

import UIKit

extension UIColor {
    convenience init(hex: String, alpha: CGFloat = 1.0) {
        let v = Int("000000" + hex, radix: 16) ?? 0
        let r = CGFloat(v / Int(powf(256, 2)) % 256) / 255
        let g = CGFloat(v / Int(powf(256, 1)) % 256) / 255
        let b = CGFloat(v / Int(powf(256, 0)) % 256) / 255
        self.init(red: r, green: g, blue: b, alpha: min(max(alpha, 0), 1))
    }
}

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

btn.backgroundColor = UIColor(hex: "4887BF")

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

btn.backgroundColor = UIColor(hex: "4887BF", alpha: 0.5)

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

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

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

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

import UIKit

extension UIColor {

    convenience init(_ red: Int, _ green: Int, _ blue: Int, _ alpha: Int = 255) {
        let rgba = [red, green, blue, alpha].map { i -> CGFloat in
            switch i {
            case let i where i < 0:
                return 0
            case let i where i > 255:
                return 1
            default:
                return CGFloat(i) / 255
            }
        }
        self.init(red: rgba[0], green: rgba[1], blue: rgba[2], alpha: rgba[3])
    }
}

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

btn.backgroundColor = UIColor(72, 135, 191)

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

btn.backgroundColor = UIColor(72, 135, 191, 0.7)

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

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

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

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

これをダブルクリックしてみてください！

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

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

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

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

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

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

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

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

左のようなウィンドウが出てきますので、

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

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

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

②Show Color Panelを選択

③好きなカラーを指定 

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

btn.backgroundColor = UIColor(named: "MainColor")

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

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

まとめ

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

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

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

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

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

あなたにおすすめの記事

【Swift5/Xcode】画面遷移のチートシート。Segueを画面遷移とSegueを使わない画面遷移を徹底解説 【2021年版】Swift5/Xcode/OSアプリ開発のオススメ参考書・本・書籍まとめ。初心者から上級者まで！

iOSエンジニア必見

【17選】MacBook Pro/Air周辺機器のオススメのまとめ。〜作業を効率的かつおしゃれに〜