• 2023/3/7
• 3分

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

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

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

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)
    }

}

実際に使用する際は以下のように引数にそのまま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)
}

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

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