• 2023/2/7
• 4分

【Swift】色の指定方法！UIColorやColor構造体の違い

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Swiftにおける色の指定方法

Swiftでは色を管理するクラスや構造体が複数用意されています。iOSアプリ開発で使用するフレームワークによって主に使用するカラーオブジェクトが異なります。

UIKit•••UIColorクラス,CGColorクラスなど

Swift UI•••Color構造体など

あくまで「主に使用するのは」であって各クラスの定義元は異なります。またMacOSアプリの場合はNSColorを主に使用します。

UIColorクラスとは？

公式リファレンス：UIColorクラス

class UIColor : NSObject

UIColorクラスは主にUIKit(iOS専用フレームワーク)で使用されているカラーオブジェクトです。定義されているUI部品(UILabelなど)の文字色や背景色などを変更するために使用されます。

label.backgroundColor = UIColor.orange
label.textColor = UIColor.white

色味だけでなく透明度なども操作することができます。

CGColorクラスとは？

公式リファレンス：CGColorクラス

class CGColor

CGColorクラスはCore Graphicsフレームワークによって内部的に使用される基本的なカラーオブジェクトです。こちらはiOS/Mac共通で使用できるクラスになっています。

ビューに付随しているレイヤー(CALayer)などはCGColor型での指定が必要になります。

label.layer.backgroundColor = CGColor(red: 0.8, green: 0.3, blue: 0.5, alpha: 1)

おすすめ記事：【Swift】CALayerクラスとは？UIVewとの違いとアニメーションの実装

Color構造体とは？

公式リファレンス：CGColorクラス

@frozen  struct Color

Color構造体は主にSwift UIを使用している場合に使用されるカラーオブジェクトです。

Text("Hello, world!")
    .foregroundColor(Color.orange)

Swift UIでは簡単にColorを選択できるPicker Viewを実装することが可能です。

ここまでのまとめ

• UIColorクラス•••UIKit
• CGColorクラス•••Core Graphics
• NSColorクラス•••AppKit(Mac OS用)
• Color構造体•••SwiftUI

カラーオブジェクト間の相互変換

各カラーオブジェクトは相互に変換できるように定義されています。

UIKit

例えばUIColorはcgColorプロパティからCGColor型を参照できます。

let uiColor = UIColor.orange
uiColor.cgColor

Swift UI

例えばColor構造体はイニシャライザを使用してColor型にキャストすることができます。

#if os(iOS)
    let linkColor = Color(uiColor: .link)
#elseif os(macOS)
    let linkColor = Color(nsColor: .linkColor)
#endif

色の表現方法

Swiftに限った話ではありませんが色の表現方法には複数あります。Swiftでもそれらを使用してカラーオブジェクトを生成できます。

色の表現方法

• RGB
• HSL

RGB

RGBはR(Red)、G(Green)、B(Blue)の光の3原色を組み合わせて色を表現する方法です。各数値は8ビット(256諧調)で指定でき256×256×256=16,777,216色(24ビット)が表現可能です。

Swiftでは各カラーオブジェクトのイニシャライザにRGBに任意の値を渡すことで色を表現できるようになっています。

UIColor
init(
    red: CGFloat,
    green: CGFloat,
    blue: CGFloat,
    alpha: CGFloat
)

パラメータにはCGFloat型(浮動小数点)で指定します。0.0以下が指定された場合は0.0に1.0以上が指定された場合は1.0に自動で変換されます。alphaは透明度です。

UIColor(red: 0.8, green: 0.2, blue: 0.5, alpha: 1)
// Color構造体にも似たようなイニシャライザが用意されている
Color(red: 0.8, green: 0.2, blue: 0.5, opacity: 1)

浮動小数点型で指定する必要があるのでCSSなどのように0〜255までの数値で指定したい場合は以下のようにすれば便利です。

UIColor( red: 179/255, green: 75/255, blue: 75/255, alpha: 1)

公式リファレンス：Color creation

HSL色空間

HSL色空間とは色相(Hue)、彩度(Saturation)、輝度(Lightness)の組み合わせで表現する方法です。RGBでは色を3つの値で表現していましたがHSLでは1つの要素(色相)で色を決定します。残りの2つ(彩度/輝度)で鮮やかさと明るさを調整することで色味を変化させています。

色相

色相とは色相環で見た時の角度で色を決定します。例えば赤なら0°、緑は120°、青は240°になります。

SwiftではHSLの値からカラーオブジェクトを作成するイニシャライザが用意されています。

UIColor
init(
    hue: CGFloat,
    saturation: CGFloat,
    brightness: CGFloat,
    alpha: CGFloat
)

UIColor(hue: 0, saturation: 0.7, brightness: 0.8, alpha: 1)

Color(hue: 0, saturation: 0.7, brightness: 0.8)

16進数(#FFFFFF形式)で指定する

Swiftのカラーオブジェクトは16進数に対応していないので自力で実装する必要があります。

extension UIColor {
    convenience init(hexString: String, alpha: CGFloat = 1.0) {
        let hexString: String = hexString.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines)
        let scanner = Scanner(string: hexString)

        if (hexString.hasPrefix("#")) {
            scanner.charactersToBeSkipped = CharacterSet(charactersIn: "#")
        }

        var color:Int64 = 0
        scanner.scanHexInt64(&color)

        let mask:Int = 0x000000FF
        let r = Int(color >> 16) & mask
        let g = Int(color >> 8) & mask
        let b = Int(color) & mask

        let red   = CGFloat(r) / 255.0
        let green = CGFloat(g) / 255.0
        let blue  = CGFloat(b) / 255.0

        self.init(red:red, green:green, blue:blue, alpha:alpha)
    }

}

実際に使用する際は以下のように引数にそのまま16進数のカラーコードを渡すことで色を指定することができます。

UIColor(hexString: "#e7e7e7")
UIColor(hexString: "e7e7e7") // #がなくてもOK

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。