サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2 id="はじめに">はじめに</h2>

<p>はじめまして、CTO室事業支援チームの松本(<a href="https://twitter.com/keijumt" target="_blank">@keijumt</a>)です。</p>

<p>DarkTheme対応にはリソース設計とリソース利用を適切に行うことが重要です。</p>

<p>リソースの設計や利用を疎かにすると、特定の色を変更したい場合などに工数が多く必要になったり修正漏れなどが発生したりする可能性があります。</p>

<p>今回は、そういったことを防ぐためにはどのようなリソース設計にするべきか、また、実際にリソースを利用する時に気をつけることなどをご紹介します。</p>

<h2 id="DarkTheme対応について">DarkTheme対応について</h2>

<h3 id="方針">方針</h3>

<p>DarkTheme対応を行うにあたり、今回は&nbsp;<a href="https://github.com/material-components/material-components-android" target="_blank">Material Component</a>&nbsp;を利用します。バージョンは現時点で1.3.0です。</p>

<p>大まかな対応としては&nbsp;<code>values</code>&nbsp;と　<code>values-night</code>&nbsp;リソースディレクトリにthemes.xmlを作成し、それぞれにMDCから提供されているDayNightテーマを継承したテーマを作成します。</p>

<p>実装の流れとしては以下になります。</p>

<ol>
	<li><code>values</code>&nbsp;と&nbsp;<code>values-night</code>&nbsp;リソースディレクトリを用意する</li>
	<li>それぞれにリソースディレクトリにthemes.xmlを作成する</li>
	<li><code>values/themes.xml</code>&nbsp;に&nbsp;<code>Theme.MaterialComponents.DayNight</code>&nbsp;を継承したベーステーマを定義する</li>
	<li><code>values/themes.xml</code>&nbsp;にベーステーマを継承したDayModeのテーマを作成し色の設定を行う</li>
	<li><code>values-night/themes.xml</code>&nbsp;にベーステーマを継承したNightModeのテーマを作成し色の設定を行う</li>
	<li>4,5で作成したDay,Nightのテーマを継承し、同じ命名でそれぞれの&nbsp;<code>themes.xml</code>&nbsp;に定義する</li>
	<li>AndroidManifestのtheme属性に6で定義したテーマを設定する</li>
	<li>Viewからのカラーリソースへのアクセスは基本的にtheme属性で行う</li>
</ol>

<p><code>colors.xml</code>&nbsp;を&nbsp;<code>values</code>&nbsp;と&nbsp;<code>values-night</code>&nbsp;に用意して対応を行う方法もありますが今回は利用しません。</p>

<p>理由としては以下があります。</p>

<ol>
	<li><code>colors.xml</code>&nbsp;はアプリ内で登場する全ての色を定義したい</li>
	<li><code>colors.xml</code>&nbsp;でDarkTheme対応を行おうとすると、&nbsp;<code>themes</code>&nbsp;で扱うような名前を定義する必要があり二重管理となる</li>
	<li>MaterialThemingを利用すると&nbsp;<code>themes.xml</code>&nbsp;を定義する手法になる</li>
</ol>

<p>重要なこととして、基本的にViewからのカラーリソースへのアクセスは&nbsp;<code>Theme</code>&nbsp;経由で行います。</p>

<p>今回の手法は&nbsp;<code>MaterialTheming</code>&nbsp;を利用しているため、Viewからのカラーリソース参照で&nbsp;<code>colors.xml</code>&nbsp;で定義したものにアクセスするとDarkTheme対応ができません。</p>

<p>また 「基本的に」 としているのは後述するTipsでCustomThemeAttributeを作らない場合のDarkTheme対応では&nbsp;<code>Theme</code>&nbsp;経由でカラーリソースにアクセスしない場合があるためです。</p>

<h3 id="リソース設計">リソース設計</h3>

<p>次にリソース設計です。</p>

<h4 id="colorsxml">colors.xml</h4>

<p>プロジェクトで利用する色を&nbsp;<code>values/colors.xml</code>&nbsp;に定義します。</p>

<p>この時の命名としては&nbsp;<code>colorPrimary</code>&nbsp;や&nbsp;<code>backgroundColor</code>&nbsp;といった抽象的な名前ではなく&nbsp;<code>純粋な色の名前</code>&nbsp;を定義します。</p>

<p><code>blue_500</code>&nbsp;や&nbsp;<code>orange_200</code>&nbsp;といった名前などが適切です。</p>

<p>理由としては、DayMode, NightModeを考慮したThemeから参照されるので抽象的な名前ではなく、色本来の具体的な名前のほうが良いためです。</p>

<p><a href="https://developer.android.com/studio/releases#4-1-0" target="_blank">AndroidStudio 4.1.0</a>&nbsp;でプロジェクトテンプレートがDarkTheme対応されましたが、&nbsp;<code>colors.xml</code>&nbsp;には色本来の名前が定義されています。</p>

<p><code>colors.xml</code>&nbsp;の段階ではDarkTheme対応は行わないので、Day,Nightで色が切り替わってほしいViewからは直接参照しないようにします。</p>

<h4 id="themesxml">themes.xml</h4>

<p><code>themes.xml</code>&nbsp;は&nbsp;<code>values/themes.xml</code>&nbsp;と&nbsp;<code>values-night/themes.xml</code>&nbsp;の2つを作成しDayModeとNightModeを考慮した色を定義します。</p>

<p>Themeは以下のものを作成します。</p>

<ul>
	<li>具体的な色定義を含まないベースとなるTheme</li>
	<li>DayModeを考慮したTheme</li>
	<li>NightModeを考慮したTheme</li>
	<li>Day, Nightを考慮したThemeで共通の名前のTheme</li>
</ul>

<p>Themeは継承関係を持つことが可能で、親Themeで定義されているAttributeを受け継ぐことや子Themeで特定のAttributeを上書きすることも可能です。</p>

<p>この関係を利用することでそれぞれのThemeで必要最低限のリソース定義にすることを意識します。</p>

<p>Themeの設計は以下になります。</p>

<p style="text-align:center"><img alt="" height="553" src="https://image.dmm-corp.com/r2u3tq8stkoham2z2ltr2yavf6ir" width="800" /></p>

<p><code>Base.Theme.AppName</code>&nbsp;は&nbsp;<code>Theme.MaterialComponents.DayNight.*</code>&nbsp;を継承したThemeです。</p>

<p>これには具体的な色以外の定義を行います。</p>

<p>TextAppearanceやShapeAppearanceなどを定義します。</p>

<p><code>Theme.AppName</code>&nbsp;はベースThemeを継承し、DayModeを考慮したThemeです。colorPrimaryやcolorBackgroundなど具体的な色定義を行います。</p>

<p><code>Theme.AppName.Night</code>&nbsp;: ベースThemeを継承し、NightModeを考慮したThemeです。 DayModeを考慮したTheme同様にNightModeを考慮し、具体的な色定義を行います。</p>

<p><code>Theme.AppName.DayNight</code>&nbsp;: DayMode, NightModeを考慮したThemeを共通の名前にしたThemeです。AndroidManifestのthemeに設定します。DayMode, NightModeが切り替わった時にそれぞれのThemeが参照されるようにするために共通の名前にします。</p>

<p>他の設計として&nbsp;<code>Theme.AppName.Night</code>&nbsp;定義で&nbsp;<code>Base.Theme.AppName</code>&nbsp;を継承せずに&nbsp;<code>Theme.AppName</code>&nbsp;を継承し、具体的な色定義をDayMode時との差分のみ定義するという方法もあります。</p>

<p>しかしこの設計だと&nbsp;<code>Theme.AppName</code>&nbsp;を更新した際にNightMode時にも反映されるため、意図しない挙動になる可能性があることから採用していません。</p>

<p><code>res/values/themes.xml</code></p>

<pre>
<code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;

  &lt;!-- 具体的な色定義を含まないベースTheme --&gt;
  &lt;style name="Base.Theme.AppName" parent="Theme.MaterialComponents.DayNight.NoActionBar"&gt;
    &lt;item name="textAppearanceHeadline1"&gt;...&lt;/item&gt;
    &lt;item name="textAppearanceHeadline2"&gt;...&lt;/item&gt;

    &lt;item name="shapeAppearanceSmallComponent"&gt;...&lt;/item&gt;
    &lt;item name="shapeAppearanceMediumComponent"&gt;...&lt;/item&gt;
  &lt;/style&gt;

  &lt;!-- DayModeのTheme --&gt;
  &lt;style name="Theme.AppName" parent="Base.Theme.AppName"&gt;
    &lt;item name="colorPrimary"&gt;@color/blue_500&lt;/item&gt;
    &lt;item name="colorSecondary"&gt;@color/orange_400&lt;/item&gt;
  &lt;/style&gt;

  &lt;!-- DayModeのThemeと同じ名前のTheme --&gt;
  &lt;style name="Theme.AppName.DayNight" parent="Theme.AppName" /&gt;

&lt;/resources&gt;</code></pre>

<p><code>res/values-night/themes.xml</code></p>

<pre>
<code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;

  &lt;!-- NightModeのTheme --&gt;
  &lt;style name="Theme.AppName.Night" parent="Base.Theme.AppName"&gt;
    &lt;item name="colorPrimary"&gt;@color/blue_400&lt;/item&gt;
    &lt;item name="colorSecondary"&gt;@color/orange_300&lt;/item&gt;
  &lt;/style&gt;

  &lt;!-- NightModeのThemeと同じ名前のTheme --&gt;
  &lt;style name="Theme.AppName.DayNight" parent="Theme.AppName.Night" /&gt;

&lt;/resources&gt;</code></pre>

<p><code>AndroidManifest.xml</code></p>

<pre>
<code>&lt;application android:theme="@style/Theme.AppName.DayNight" /&gt;</code></pre>

<h2 id="Tips">Tips</h2>

<h3 id="ColorStateList">ColorStateList</h3>

<p>ColorStateListは便利な使い方が可能です。</p>

<p>色定義でalpha値を扱う際に以下のようにcolors.xmlに定義するとalpha値が16進数で分かりづらいことや、ベースとなる色が変わった際に全てのalpha値が反映されたcolorを変更する必要があります。</p>

<pre>
<code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;color name="black"&gt;#212121&lt;/color&gt;
    &lt;color name="black_alpha_80"&gt;#36212121&lt;/color&gt;
    &lt;color name="black_alpha_50"&gt;#80212121&lt;/color&gt;
    &lt;color name="black_alpha_30"&gt;#4D212121&lt;/color&gt;
&lt;/resources&gt;</code></pre>

<p>ColorStateListからは定義した色を参照可能なので上記で定義したblackを参照し、alpha値を設定するとベースとなるblackの色が変更された際に修正部分を必要最低限にできます。</p>

<p><code>res/color/black_alpha_80</code></p>

<pre>
<code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  &lt;item android:color="@color/black" android:alpha="0.8" /&gt;
&lt;/selector&gt;</code></pre>

<p>また、ColorStateListのcolorの参照先としてはThemeAttributeを参照可能です。</p>

<p>TextLegibilityの考慮時などに使うと便利です。</p>

<p><code>res/color/color_on_primary_emphasis_high_type.xml</code></p>

<pre>
<code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  &lt;item android:color="?attr/colorPrimary" android:alpha="0.87" /&gt;
&lt;/selector&gt;</code></pre>

<h3 id="CustomThemeAttributeを作らない時の対応">CustomThemeAttributeを作らない時の対応</h3>

<blockquote>
<p>基本的にViewからのカラーリソースへのアクセスはTheme経由で行います。</p>
</blockquote>

<p>と記載しましたが大規模なアプリになると&nbsp;<code>colorPrimary</code>&nbsp;や&nbsp;<code>colorSecondary</code>&nbsp;などデフォルトで用意されているThemeAttributeだけでは対応できないケースがほとんどです。</p>

<p><code>colorBackgroundSecondary</code>&nbsp;のようなアプリ全体で汎用的に使われるものなどの場合はCustomThemeAttributeとして定義し、<code>特定の画面のみにある特定の色</code>&nbsp;などAttributeに定義するメリットが少ないものは定義を避けたいです。</p>

<p>こういったケースには&nbsp;<code>ColorStateList</code>&nbsp;を利用するとスコープを最小限にとどめて必要最低限の対応ができます。</p>

<p><code>res/color/color_favorite.xml</code>&nbsp;と&nbsp;<code>res/color/color_favorite.xml</code>&nbsp;を作成し、Day, Nightを考慮した色を定義します。</p>

<pre>
<code>&lt;!-- res/color/favorite.xml --&gt;
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  &lt;item android:color="@color/pink_500" /&gt;
&lt;/selector&gt;

&lt;!-- res/color-night/favorite.xml --&gt;
&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  &lt;item android:color="@color/pink_300" /&gt;
&lt;/selector&gt;</code></pre>

<p>Viewからは&nbsp;<code>@color/favorite</code>&nbsp;を参照することで、CustomThemeAttributeを作成せずにDarkTheme対応を行ったうえで実装が可能です。</p>

<p>注意点としては&nbsp;<code>ColorStateList</code>&nbsp;はAPI29未満でbackgroundとして設定するとクラッシュします。</p>

<p>この問題の回避方法としては、&nbsp;<code>backgroundTint</code>&nbsp;を利用することにより全てのAPIバージョンで正常に動作するようになります。</p>

<p><code>res/drawable/rectangle.xml</code></p>

<pre>
<code>&lt;shape&gt;
  &lt;solid android:color="#FF00FF" /&gt;
&lt;/shape&gt;</code></pre>

<pre>
<code>&lt;View 
  ...
  android:background="@color/rectangle"
  android:backgroundTint="@color/favorite" /&gt;</code></pre>

<p><code>rectangle.xml</code>&nbsp;には万が一設定が間違えていた時にすぐに気付けるようにマゼンタピンクなど派手な色を設定することをおすすめします。</p>

<h3 id="リソースファイルの肥大化">リソースファイルの肥大化</h3>

<p><code>themes.xml</code>&nbsp;に全てのthemeAttributeを定義するとかなり肥大化します。リソースは適宜分割して定義することがおすすめです。</p>

<table style="width:700px;">
	<thead>
		<tr>
			<th style="text-align: center; vertical-align: middle;">ファイル名</th>
			<th style="text-align: center; vertical-align: middle;">概要</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>themes.xml</td>
			<td>色のThemeAttributeを定義+その他xmlファイルを参照しAttributeを設定</td>
		</tr>
		<tr>
			<td>styles.xml</td>
			<td>Viewの属性を定義</td>
		</tr>
		<tr>
			<td>types.xml</td>
			<td>TextAppearanceを定義</td>
		</tr>
		<tr>
			<td>shapes.xml</td>
			<td>ShapeAppearanceを定義</td>
		</tr>
		<tr>
			<td>motions.xml</td>
			<td>アニメーションの時間などを定義</td>
		</tr>
		<tr>
			<td>attrs.xml</td>
			<td>カスタムAttributeを定義</td>
		</tr>
	</tbody>
</table>

<h2 id="おわりに">おわりに</h2>

<p>今回はDarkTheme対応を見据えたリソース設計をご紹介しました。</p>

<p>リソース設計次第で機能開発や機能修正などのやりやすさが変わってくるため、プロジェクト初期にしっかり行うことがおすすめです。</p>


DarkTheme対応のリソース設計

シェア

関連する求人

関連する記事