LoginSignup
14
10

More than 5 years have passed since last update.

Interface Builderとソースコードで共通のカラーパターンを利用する方法

Last updated at Posted at 2017-03-22

概要

iOSにおいて、定義したカラーパターンをInterface Builderからでもソースコードからでも利用する方法です。ソースコードからの利用には、R.swiftを利用します。また、Interface Builderからの利用には、ColorToolsにあるHtml2Clrを利用します。

用語説明

R.swiftとは?

AndroidにおけるRクラスのように、ViewやStoryboard, Stringsなどのリソースをソースコードから利用できるようにしたものです。Identifier等を文字列で使用する必要もなく、タイポによるバグを防ぎます。

Html2Clrとは?

定義したカラーパターンをclrファイルに変換します。clrファイルはMacで読み込むことのできるカラーパターン定義用のバイナリファイルです。

導入手順

1. R.swiftのインストール

R.swiftをインストールします。

2. Html2Clrのインストール

ColorToolsよりHtml2Clrをビルドし、プロジェクトのルートディレクトリ等に実行ファイルを置きます。もしくは、Color-Palette-Pattern@githubより導入してください。

3. カラーパターンの定義

1行につき、16進数RGB 名前の形でカラーパターンを定義し、Xcodeプロジェクトにインポートします。

color

4. R.swift用Run Scriptの定義

ターゲットの[Build Phases]-[左上の+]-[New Run Script Phase]より、ビルド時にR.swiftを起動するようにします。

color

下記はCocoaPodsを利用してR.swiftをインストールした場合のパスになります。パスは実行環境に合わせて変更してください。また、このRun Scriptは必ずCompile Sourcesよりも上に定義する(先に実行する)必要があります。

"$PODS_ROOT/R.swift/rswift" "$SRCROOT/$PROJECT_NAME"

5. clr出力用Run Scriptの定義

4で定義したRun Scriptよりも一つ上に(先に)カラーパターン変化用のRun Scriptを定義します。3で用意したカラーパターンファイルからclrファイルを出力し、~/Library/Colorsにコピーします。Html2Clr等のパスは環境に合わせて書き換えてください。

color

FILE_NAME="mytheme"
# Generate color palette file
"./Html2Clr" "$SRCROOT/$PROJECT_NAME/$FILE_NAME.txt"
# Copy to user's color palette directory
"cp" "$SRCROOT/$PROJECT_NAME/$FILE_NAME.clr" "$HOME/Library/Colors/"

6. ビルド

プロジェクトを一度ビルドし、clrファイルR.generated.swiftを出力します。

7. ファイルのインポート

出力されたclrファイルとR.generated.swiftをプロジェクトにインポートします。

color

8. ビルド

再度ビルドします。これにより、clrファイルを読み取り、R.generated.swiftにcolorの定義が自動生成されます。

9. カラーパターンの編集→ビルド→Xcode再起動

カラーパターンを編集した際には、ビルドをし、その都度Xcodeを再起動する必要があります。これは、Xcodeの起動時に、~/Library/Colorsディレクトリの中にあるclrファイルを読み込むためです。

使い方

ソースコードから使う

R.color.{clrファイル名}の中で定義されています。

color

Interface Builderから使う

Colorsより作成したテーマを選ぶと利用できます。

color

デメリット

ソースコードとInterface Builderから共通したカラーパターンを利用できるようになりましたが、結局のところInterface Builderでは変数のように利用できないため、カラーパターンを変更した場合には、再度Interface Builderから色を設定する必要があります。動的にアプリのカラーテーマを変えたい場合には、やはりソースコードから修正する必要があります。

サンプル

Color-Palette-Pattern@githubに動作するプロジェクトがあります。

14
10
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
14
10