LoginSignup
9
4

More than 3 years have passed since last update.

UIColorとcolor assetとSwiftUIのColorを一緒に使う

Last updated at Posted at 2019-10-27

SwiftUIではUIColorは使いません。

UIKitではUIColorを使います。

別の手段で作るとしても、色の定義は1つにしたいものです。

ということで、それぞれのcolorの利用方法を確認し、
両方で利用出来るようにするには何が一番いいかなを考えてみたいなと思います。

またついでにダークモードの対応も考えてみることにします。

UIKitのUIColor

本当色々あると思いますが、ある程度効率がよく、ライブラリーなど使わないとすると下記のような方法が思い浮かびます。

  • UIColorにextensionをはやす
  • Color Assetを定義したものを使う

SwiftUIのColor

こちらは実績はないのであくまでこうすればいいだろうというものにはなりますが、基本UIColorとそんなに変わらないと思っております。
なので基本方針は同じ

  • Colorにextension生やす
  • Color Assetを定義したものを使う
Color("myBlack")
  • google検索してなにか他に精製方法はないか確認する

SwiftUIとColorの相互の変換

UIColorからColorを求める

Color(UIColor.red)

ColorからUIColorを求める

extension UIColor {
    var color: Color {
        return Color(self)
    }
}

enumにする

enum MyColor {
    case black

    var name: String {
        switch self {
        case .black: return "myBlack"
        }
    }
    var color: Color {
        return Color(name)
    }
    var uiColor: UIColor? {
        return UIColor(named: name)
    }
}

swift enumは色々な活用方法があって好きです。
iOS11以上であれば、color assetが使えるので上のようにとても簡単な方法で色の定義をすることができます。
color assetを利用すると簡単にダークモードの対応もできるのでおすすめです。

もしcolor assetが使えない場合は

enum MyColor {
    case black
    // dark modeの対応
    private func light(_ light: UIColor, dark: UIColor) -> UIColor {
        if #available(iOS 13, *) {
            return UIColor { (traitCollection: UITraitCollection) -> UIColor in
                switch traitCollection.userInterfaceStyle {
                case .unspecified, .light:
                    return light
                case .dark:
                    return dark
                @unknown default:
                    return light
                }
            }
        } else {
            return light
        }
    }

    // ここで色を定義
    var uiColor: UIColor {
        switch self {
        case .black:
            return light(UIColor(red: 1, green: 0, blue: 0.5, alpha: 1),
                         dark: UIColor(red: 1, green: 1, blue: 0.5, alpha: 1))
        }
    }

    // color
    var color: Color {
        return Color(uiColor)
    }
}

という形で定義することもおすすめします。

では、また!

9
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
4