iOSの色系ライブラリ決定版? Chameleon

一人でアプリを作る時に、いわゆるビジュアルのデザインや色使い周りが適当になっちゃう人の救世主的なライブラリを見つけたので紹介。

github.com

Chameleonでは何ができるのか?

いい感じの色を簡単にアプリに設定できる

提供する機能

• 100% Flat & Gorgeous
  • 厳選された24のフラットなカラーがある
• Flat Color Schemes
  • カラースキームを決める時に使える
• Contrasting Text
  • 背景色に合わせた文字色を勝手に選んでくれる
• Themes
  • １行のコードでいい感じの色合いをアプリに設定できる
• Colors From Images
  • 画像からカラースキームを抽出できる
• Gradient Colors
  • グラデーションをカラー
    • 方向もある

動作環境

• Xcode6.3以降
• ObjC -> iOS7
• Swift -> iOS8

導入

CocoaPodsとCarthageの両方に対応しています。 今回はCarthageでインストール。

$ echo 'github "ViccAlexander/Chameleon"' > Cartfile
$ carthage update --platform iOS

これで準備完了。

使ってみる

グローバルテーマを使う

setGlobalThemeUsingPrimaryColorを利用するとコードを一行書くだけで、コンポーネント群の色を一括指定することができます。

Chameleon.setGlobalThemeUsingPrimaryColor(FlatMint(), withSecondaryColor: FlatBlue(), andContentStyle: UIContentStyle.Contrast)
self.view.backgroundColor = FlatYellow()

上記はメインカラーをFlatMint()、セカンダリカラーをFlatBlue、ビューの背景色をFlatYellowに指定しています。

フラット間出てますね！

メインとセカンダリのカラー指定は、特定のコンポーネントに作用して色を変更するようです。

コードを読んだ感じ、下記コンポーネント郡はセカンダリ指定時に色が変更されるようです。

1. UIButton
2. UIProgressView
3. UISlider
4. UISwitch

ちなみにContentStyleをContrastにすると、テキスト系コンポーネントの色を見やすい色に勝手にしてくれて便利でした。 ただし、よしなにしてくれるのは指定した色がChameleonが提供しているFlat & Gorgeousな色の場合のみのようです。

補色を使う

Chameleonには補色を返す機能があります。

上記のグローバルテーマでセカンダリカラー等で補色を返してくれるComplementaryFlatColorOf()を使うといい感じになりそうでした。

let mainColor = FlatPink()
let complementaryColor = ComplementaryFlatColorOf(mainColor)
Chameleon.setGlobalThemeUsingPrimaryColor(mainColor, withSecondaryColor: complementaryColor, andContentStyle: .Contrast)

こちらに関しては、下記のようにFlat & Gorgeous以外の色でも利用可能でした。

let mainColor = UIColor.redColor() // 赤色
let complementaryColor = ComplementaryFlatColorOf(mainColor) // 青緑色

色抽出を使う

Chameleonには下記のように、画像からカラースキーマを抽出する機能もあります。

let averageColor = AverageColorFromImage(UIImage("someImageName")!)

画像コンテンツの色ベースでナビゲーションの色を替えるみたいなアプリを見たことがある気がするので、似たようなことをいくつかやってみました。

ナビゲーションバーの色がいい感じに変わってる気がします、が、素材のか違いがよくわからないですね。

違いを見るために赤系も入れてみました。

Storyboard用アドオン

Storyboard用のパレットがこちらからダウンロードできるので、気に入った人は使ってみると良いかと思われます。

小並感

アプリの色設定をこれで一本化する前提なら結構使えるかなと思います。実際にアプリを作りたいなぁ。

一方、機能が盛りだくさんでただのUIColorクラス拡張ではないので、色指定をHexでやりたいくらいの思いの方にはオススメできなさそうです。

あくまでも、色やデザイン周りを簡単に設定したかったり、とりあえずモックアップを作る時とかに使える感じかなぁ。