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

この記事からわかること

  • Swiftにおける指定方法とは?
  • UIKitSwift UIの指定方法
  • UIColorCGColor違い
  • Color構造体とは?
  • RGBとは?
  • HSLとは?

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

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共通で使用できるクラスになっています。

※Core Graphics(コアグラフィックス)とは二次元的な視覚的描画を提供するためのフレームワーク。

おすすめ記事:Core Graphics(コアグラフィックス)とは

ビューに付随しているレイヤー(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)

ここまでのまとめ

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

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

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

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

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


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

パラメータにはCGFloat型(浮動小数点)で指定します。0.0以下が指定された場合は0.01.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】色の指定方法!UIColorやColor構造体の違い

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


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

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

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

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index