2023/3/7

【Swift】16進数(hexadecimal)で色(UIColor)を指定する方法！#FFFFFF形式

この記事からわかること

Swiftで16進数(hexadecimal)で色(UIColor)を指定する方法
カラーオブジェクトのカラーコードを文字列で取得する方法
16進数をRGBに変換するには？
Swift UIの場合

index

[open]

Swiftのカラーオブジェクトは16進数に対応していない
16進数で指定できるようにする方法
16進数のカラーコードを取得するプロパティの実装
Swift UIのColor構造体の場合
Swift UI：16進数のカラーコードを取得

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

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

posted withアプリーチ

参考文献：Messenger Clone - Real-time iOS Chat with Firebase Firestore written in Swift

Swiftのカラーオブジェクトは16進数に対応していない

Swiftではカラーを指定する方法としてRGB(光の三原色)やHSL(色相/彩度/輝度)の値によって指定する方法が用意されていますが、WebデザインやCSSなどで多用する#FFFFFF形式(16進数)で指定することはできません。

今回はUIColorを拡張して16進数を使って色指定ができる方法をまとめていきたいと思います。

16進数で指定できるようにする方法

イニシャライザを拡張して増やすことで16進数での指定がしやすいようになっています。

extension UIColor {
    convenience init(hexString: String, alpha: CGFloat = 1.0) {
        // 不要なスペースや改行があれば除去
        let hexString: String = hexString.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines)
        // スキャナーオブジェクトの生成
        let scanner = Scanner(string: hexString)

        // 先頭(0番目)が#であれば無視させる
        if (hexString.hasPrefix("#")) {
            scanner.charactersToBeSkipped = CharacterSet(charactersIn: "#")
        }

        var color:Int64 = 0
        // 文字列内から16進数を探索し、Int64型で color変数に格納
        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)
    }

}

おすすめ記事：【Swift】Scannerクラスとは？文字列の解析や探索方法！

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

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

16進数のカラーコードを取得するプロパティの実装

任意のカラーオブジェクトの16進数表記でのカラーコードを取得するプロパティの実装は以下のようになります。

func toHexString() -> String {
    var r:CGFloat = 0
    var g:CGFloat = 0
    var b:CGFloat = 0
    var a:CGFloat = 0

    getRed(&r, green: &g, blue: &b, alpha: &a)

    let rgb:Int = (Int)(r*255)<<16 | (Int)(g*255)<<8 | (Int)(b*255)<<0

    return String(format:"#%06x", rgb)
}

UIColor(ciColor: .cyan).toHexString() // #00ffff

Swift UIのColor構造体の場合

extension Color {
    init(hexString: String, alpha: CGFloat = 1.0) {
        // 不要なスペースや改行があれば除去
        let hexString: String = hexString.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines)
        // スキャナーオブジェクトの生成
        let scanner = Scanner(string: hexString)

        // 先頭(0番目)が#であれば無視させる
        if (hexString.hasPrefix("#")) {
            scanner.charactersToBeSkipped = CharacterSet(charactersIn: "#")
        }

        var color:Int64 = 0
        // 文字列内から16進数を探索し、Int64型で color変数に格納
        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,opacity: alpha)
    }
}

Swift UI：16進数のカラーコードを取得

func toHexString() -> String {
    var r:CGFloat = 0
    var g:CGFloat = 0
    var b:CGFloat = 0
    var a:CGFloat = 0

    let uicolor = UIColor(cgColor: self.cgColor!)
    uicolor.getRed(&r, green: &g, blue: &b, alpha: &a)

    let rgb:Int = (Int)(r*255)<<16 | (Int)(g*255)<<8 | (Int)(b*255)<<0

    return String(format:"#%06x", rgb)
}