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

概要

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に動作するプロジェクトがあります。


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。