Android Kotlin基礎講座 10.1:スタイルとテーマ

タスク：スタイルを使う

テーマはデフォルトフォントや原色のような一般的な設定をアプリに適用するのに適していきます。
属性は特定のビューをスタイリングしたり、それぞれの画面ごとに指定したいマージンやパッディング、位置制約のようなレイアウト情報を追加するのに適しています。

スタイルヒエラルキーを表したピラミッドの真ん中にはstyleがありましたね。スタイルは再利用可能な選択したビューに適用できる属性のグループです。このタスクではタイトルと見出しに対してスタイルを使っていきます。

ステップ1：スタイルを作成する

1. res/values/styles.xmlを開いてください。
   
2. 以下のように<resources>タグ中に<style>タグを使って新規スタイルを定義してください。

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

スタイル名を付けるときは、意味のある名前を考えることが重要です。そのスタイルが何用なのかに基づいて考えるべきで、そのスタイルが影響を与えるプロパティに基づいて考えるべきではありません。

例えば、このスタイルをLargeFontGreyなどでなく、Titleと名付けるべきです。そうすればこのスタイルはアプリ内のどこでもタイトルに対して使われるのだなと一目でわかります。慣例的に、TextAppearanceスタイルはTextAppearance.Nameで呼ばれ、今回の場合はTextAppearance.Titleになります。

スタイルはテーマと同じように親を持ちます。今回はテーマを継承するのではなく、スタイルがスタイルを継承します。(TextAppearance.MaterialComponents.Headline6)　このスタイルはMaterialComponents用のデフォルトテキストスタイルで、これを継承することによってスクラッチ（0からの状態）から始めるのではなく、デフォルトスタイルを一部修正するだけでよくなります。

3. 新規スタイルの中で、二つのアイテムを定義します。一つ目のアイテムないでtextSizeを24spに設定します。もう一つの方で、textColorを以前使っていたのと同じダークグレーに設定します。
   

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

4. 見出し用にもう一つスタイルを定義します。TextAppearance.Subtitleと名付けましょう。
   
5. TextAppearance.Titleとの唯一の違いはテキストサイズだけなので、これをTextAppearance.Titleの子スタイルにします。
   
6. Subtitleスタイル中でテキストサイズを18spにしましょう。以下が完成コードになります。

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

ステップ2：作成したスタイルを適用する

1. home_fragment.xmlのtitleテキストビューにTextAppearance.Titleスタイルを追加します。
   textSizeとtextColor属性は削除してください。
   
   テーマは設定したTextAppearanceを上書きします。（この記事の初めのピラミッドダイアグラムにスタイルの適用される優先順位が記されています）
   Themeに設定されたフォントがここで設定されているフォントを上書きするために、textAppearanceプロパティを使って、スタイルを適用します。

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

2. またTextAppearance.Subtitleスタイルをsubtitleテキストビューに追加し、textSizeとtextColor属性を削除してください。テーマに設定されたフォントが、ここで設定されているフォントを上書きするために、このスタイルをtextAppearanceとして設定してください。

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

重要: テキストの設定にテーマとスタイルの両方を使用する際、テーマのテキストプロパティにスタイル中で設定/継承されているものを上書きさせたい場合はテキストプロパティをtextAppearance属性として適用させる必要があります。

3. アプリを起動して、テキストが一貫してスタイリングされたことを確認してください。

完成済みプロジェクト

お疲れさまでした。完成済みプロジェクトは以下からダウンロードできます。

GDGFinderStyles