[iOS][Swift3.0] 色にまつわる便利機能を備えたChameleon

今回は、色にまつわる便利機能を備えたChameleonというライブラリを試してみました。 色々な機能があるのですが、いくつか挙げてみると、

フラットカラーパレット

フラットデザインに使える24種類以上のlight/darkな色定義があります。

カラースキーム

類似色、補色、トライアド配色なカラースキームが取得できます。

最適な文字色を取得する

背景の色などから読みやすい文字の色を取得できます。

テーマの設定

1行のコードで簡単にコンポーネントの色を設定できます。

画像から色を抽出

画像から色を抽出したり、平均色を取得できます。

グラデーションカラー

簡単にグラデーションを表示することができます。また、グラデーションの種類も選べます。

このような機能が使えるようです。ライセンスはMITです。
※ 上記の画像は全て公式のREADMEから引用させていただきました。

ViccAlexander/Chameleon

検証環境

今回は下記環境で試しています。

Xcode	8.2.1
Swift	3.0.2
CocoaPods	1.0.0

準備

導入

CocoaPodsで追加します。

use_frameworks!
target "ターゲット名"
    pod 'ChameleonFramework/Swift', :git => 'https://github.com/ViccAlexander/Chameleon.git'
end

post_install do |installer|
    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |configuration|
            configuration.build_settings['SWIFT_VERSION'] = "3.0"
        end
    end
end

利用例

Chameleonのインポート

各機能を使用するために下記をインポートします。

import ChameleonFramework

フラットカラーを使う

インポートを行うと定義されたカラー定義を使う事が出来ます。UIColor.flatXXXという（XXX部分は色の名前）定義になります。

各色にはライトとダークが存在し、定義の末尾にDarkが付いていると暗めの色になります。

// Flatカラーを取得する
let lightColor = UIColor.flatMint
let darkColor = UIColor.flatMintDark

ランダムな色を取得する

UIColor.randomFlat または RandomFlatColor() でランダムにフラットカラーを取得することができます。

// ランダムにFlatカラーを取得する
let random1Color = UIColor.randomFlat
let random2Color = RandomFlatColor()

また、ライトorダークの中からランダムに取得するには、UIColor(randomFlatColorOf:UIShadeStyle) または　RandomFlatColorWithShade(UIShadeStyle) を使います。UIShadeStyle　は.lightまたは.darkを設定します。

// ライトなランダムFlatカラーを取得する
let lightRandom1Color = UIColor(randomFlatColorOf: .light)
let lightRandom2Color = RandomFlatColorWithShade(.light)
// ダークなランダムFlatカラーを取得する
let darkRandom1Color = UIColor(randomFlatColorOf: .dark)
let darkRandom2Color = RandomFlatColorWithShade(.dark)

補色を取得する

補色とは、色相環で正反対に位置する色のことです。

UIColor(complementaryFlatColorOf: UIColor) または ComplementaryFlatColorOf(UIColor) で補色を取得することができます。

// 補色を取得する
let complementary1Color = UIColor(complementaryFlatColorOf: .red)
let complementary2Color = ComplementaryFlatColorOf(.red)

明暗色を取得する

.lighten(byPercentage: CGFloat)で明るくした色、.darken(byPercentage: CGFloat)で暗くした色を取得することができます。引数は適用するパーセンテージです。

// 元の色
let defaultColor = UIColor.flatSkyBlue
// 明るくした色
let lightenColor = UIColor.flatSkyBlue.lighten(byPercentage: 0.5)
// 暗くした色
let darkenColor = UIColor.flatSkyBlue.darken(byPercentage: 0.5)

カラースキームを取得する

　カラースキームを取得するには、

let colorList = ColorSchemeOf(.triadic, color: .flatTeal, isFlatScheme: true)

を使います。第一引数にスキームの種別、第二引数に基準となる色、第三引数はフラットカラーを使うかどうかを指定します。スキームの種別は下記の通りです。

類似的

.analogousを指定します。

補色的

.complementaryを指定します。

トライアド配色的

.triadicを指定します。

トライアド配色とは、色相環上で、120度間隔の位置の3つの色相を用いた配色です。

読みやすい文字色を取得する

UIColor(contrastingBlackOrWhiteColorOn: UIColor, isFlat: Bool) または ContrastColorOf(UIColor, returnFlat: Bool) で指定した色（背景色）から黒or白の色を取得できます。

// 文字の色を取得する
label1.backgroundColor = UIColor.flatYellow
label2.backgroundColor = UIColor.flatMint
label1.textColor = UIColor(contrastingBlackOrWhiteColorOn: label1.backgroundColor!, isFlat: true)
label2.textColor = UIColor(contrastingBlackOrWhiteColorOn: label2.backgroundColor!, isFlat: true)
// 以下でもOK
label1.textColor = ContrastColorOf(label1.backgroundColor!, returnFlat: true)
label2.textColor = ContrastColorOf(label2.backgroundColor!, returnFlat: true)

プロパティのisFlatをtrueにするとflatWhite or flatBlack、falseにすると白（#ffffff）or黒（#000000）が取得できるようです。

任意の色をFlatカラーにする

.flatten()でフラットカラーでない色を最も近いフラットカラーにすることができます。

// Flatカラーを取得する
let flatColor = UIColor.green.flatten()

グラデーション

UIColor(gradientStyle: withFrame: andColors:)または GradientColor(_ gradientStyle: frame: colors:)でグラデーションにすることができます。
グラデーションスタイルは

• leftToRight
• radial
• topToBottom

から選べます。現時点でradialは２色でしか作れない（それ以上は無視される）制限があります。

// グラデーションにする
view1.backgroundColor = UIColor(gradientStyle: .radial, withFrame: view1.frame, andColors: [.flatPowderBlue, .flatBlue])
view2.backgroundColor = UIColor(gradientStyle: .leftToRight, withFrame: view2.frame, andColors: [.flatPowderBlue, .flatBlue, .flatNavyBlue])
view3.backgroundColor = UIColor(gradientStyle: .topToBottom, withFrame: view3.frame, andColors: [.flatPowderBlue, .flatBlue, .flatNavyBlue])

// 以下でもOK
view1.backgroundColor = GradientColor(UIGradientStyle.radial, frame: view1.frame, colors: [.flatPowderBlue, .flatBlue])
view2.backgroundColor = GradientColor(UIGradientStyle.radial, frame: view2.frame, colors: [.flatPowderBlue, .flatBlue, .flatNavyBlue])
view3.backgroundColor = GradientColor(UIGradientStyle.radial, frame: view3.frame, colors: [.flatPowderBlue, .flatBlue, .flatNavyBlue])

カラーコードから色を生成する

カラーコードの文字列から色を生成するには、UIColor(hexString: String) または　HexColor(String) を使います

// Hexコードから色を生成する
let hex1Color = UIColor(hexString: "#336699")
let hex2Color = HexColor("#336699")

UIColorからカラーコード文字列を取得する

.hexValue()でカラーコードの文字列を取得することができます。

// Hexコードを取得する
print(UIColor.red.hexValue()) // #FF0000

画像から色を抽出する

画像から色を抽出するには、ColorsFromImage(_ image: UIImage, withFlatScheme: Bool) -> [UIColor]を使います。

// 画像から抽出した色の配列を取得する
let colorList = ColorsFromImage(image, withFlatScheme: true)

下記は画像から取得した色でグラデーションを作成して背景に適用しています。

画像から平均色を取得する

画像から色を抽出するには、UIColor(averageColorFrom: UIImage)を使います。

// 画像の平均色を取得する
let color = UIColor(averageColorFrom: image)

下記は画像の平均色を背景に適用しています。

コンポーネントのテーマ色を一括で管理する

コンポーネントの色を統一するには、

setThemeUsingPrimaryColor(.flatMint, with: .contrast)

と、します。第一引数は色、第二引数はContentStyleとして、.contrast、.light、.darkから選びます。.lightを選ぶと文字色は白に、.darkを選ぶと黒になります。.contrastを選ぶとテーマカラーによって文字の色を自動で選択します。

また、セカンダリーカラーを設定するには

setThemeUsingPrimaryColor(.flatMint, withSecondaryColor: .flatLime, andContentStyle: .contrast)

とします。下記画像では抹茶色の部分がセカンダリーカラーです。

ナビゲーションバーの下線を消す

通常ナビゲーションバーには下記画像のように下線があります。

navigationController?.hidesNavigationBarHairline = true

と、１行追加するだけで下線を消すことができます。

さいごに

いろいろな機能がありますが、個人的には画像から平均色を取得するのが面白いなと思いました。画像によって背景やナビゲーションバーの色が変わったりすると良い感じかもしれません。