スタイルとテーマ

Compose を試す
Jetpack Compose は、Android に推奨される UI ツールキットです。Compose でテーマ設定を操作する方法を学習します。
<ph type="x-smartling-placeholder"></ph> Compose の設計システム →

Android のスタイルとテーマを使用すると、アプリのデザインの詳細を UI から分離できる ウェブデザインのスタイルシートと同様です。

スタイルは、単一のスタイルの外観を指定する属性の集合です。 View。スタイルでは属性を指定できる フォントの色、フォントサイズ、背景色などを設定できます。

テーマとは、アプリ全体、アクティビティ、ビューに適用される属性の集まりのことです。 ビューだけではありません。テーマを適用すると、アプリ内のビューや アクティビティは、サポートするテーマの各属性を適用します。テーマにはスタイルを適用して ビュー以外の要素（ステータスバーやウィンドウの背景など）は、

スタイルとテーマは スタイル リソース ファイルを res/values/（通常は styles.xml）。

図 1. 同じアクティビティに 2 つのテーマを適用: Theme.AppCompat（左）と Theme.AppCompat.Light（右）。

テーマとスタイル

テーマとスタイルには多くの類似点がありますが、用途はそれぞれ異なります。テーマと スタイルの基本構造は同じです。つまり、属性を属性にマッピングする Key-Value ペアです。 リソースをご覧ください。

スタイルは、特定の種類のビューの属性を指定します。たとえば、あるスタイルで ボタンの属性を指定します。スタイルで指定する各属性は、 追加します。すべての属性を 1 つのスタイルに抽出することで、それらの属性の使用と維持が容易になる 複数のウィジェットにわたって 表示しています

テーマは、スタイル、レイアウト、テンプレートから参照できる名前付きリソースのコレクションを定義します。 ウィジェットなどがありますテーマによって、colorPrimary などのセマンティックな名前が Android に割り当てられる 説明します。

スタイルとテーマは連携して動作するように作られています。たとえば、スタイルで ボタンの一部は colorPrimary、別の部分は colorSecondary。これらの色の実際の定義は、テーマで提供されています。日時 デバイスが夜間モードになったら、アプリを「ライト」モードから「ダーク」にテーマ 変更することもできます。スタイルは スタイルは、特定の色の定義ではなく、セマンティック名を使用しています。

テーマとスタイルの連携の仕組みについて詳しくは、 Android のスタイル設定: テーマとスタイル

スタイルを作成して適用する

新しいスタイルを作成するには、プロジェクトの res/values/styles.xml ファイルを開きます。対象 次の手順を踏みます。

  1. スタイルを一意に識別する名前を持つ <style> 要素を追加します。
  2. 定義するスタイル属性ごとに <item> 要素を追加します。「 各商品アイテムの name は、XML 属性として使用する属性を指定します。 できます。<item> 要素の値はその属性の値です。

たとえば、次のスタイルを定義するとします。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

次のようにスタイルをビューに適用できます。

<TextView
    style="@style/GreenText"
    ... />

スタイルで指定された各属性は、ビューが受け入れる場合、そのビューに適用されます。ビュー 拒否する属性はすべて無視されます。

<ph type="x-smartling-placeholder">

ただし、個々のビューにスタイルを適用するのではなく、 アプリ全体、アクティビティ、またはコレクションのスタイルをテーマとして適用する ビューに変更できます。詳しくは、このガイドの別のセクションをご覧ください。

スタイルを拡張しカスタマイズする

独自のスタイルを作成する場合は、常にフレームワークまたはサポートから既存のスタイルを拡張する ライブラリ。プラットフォーム UI スタイルとの互換性を維持します。スタイルを拡張するには、 parent 属性で拡張するスタイルを指定します。次に、この継承された スタイル属性を作成し、新しい属性を追加します。

たとえば、Android プラットフォームのデフォルトのテキスト表示を継承し、次のように変更することができます。 次のようになります。

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

ただし、コアアプリのスタイルは常に Android サポート ライブラリから継承します。モジュールのスタイルは、 サポート ライブラリは、 確認できます。多くの場合、サポート ライブラリのスタイルには、プラットフォームのスタイルと似た名前が付けられています。 ただし、AppCompat が含まれています。

ライブラリまたは自分のプロジェクトからスタイルを継承するには、親スタイル名を宣言します 前の例で示した @android:style/ 部分は含めないでください。たとえば 次の例では、サポート ライブラリからテキストの外観のスタイルを継承しています。

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

スタイルを拡張して、プラットフォームからのものを除き、スタイルを継承することもできます。 parent 属性を使用する代わりに、ドット表記を使用します。つまり、先頭に スタイル名を、継承するスタイルの名前をピリオドで区切った名前に置き換えます。マイページ これは通常、独自のスタイルを拡張する場合にのみ実行され、他のライブラリからのスタイルを拡張することはありません。たとえば 次のスタイルは、前の例の GreenText からすべてのスタイルを継承します。 次に、テキストサイズを大きくします。

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

さらに多くのスタイルに連結することで、このようなスタイルを必要に応じて何度でも継承できます。 できます。

<ph type="x-smartling-placeholder">

<item> タグで宣言できる属性を確認するには、「XML 属性確認してください。すべてのビューのサポート 基本の XML 属性 View クラスであり、多くのビューは独自の特別な属性を追加します。たとえば、 TextView XML 属性 次を含める: android:inputType 属性で、入力を受け取るテキストビューに適用できます。たとえば、 EditText ウィジェットです。

スタイルをテーマとして適用する

テーマは、スタイルの作成と同じ方法で作成できます。違いは、どのように適用するかです。 ビューに style 属性を含むスタイルを適用する代わりに、 android:theme 属性を <application> タグまたは AndroidManifest.xml ファイルの <activity> タグ。

たとえば、Android サポート ライブラリのマテリアル デザイン「ダーク」を適用する方法を以下に示します。テーマを アプリ全体:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

また、「ライト」テーマを 1 つのアクティビティのみに適用する方法は次のとおりです。

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

アプリまたはアクティビティ内のすべてのビューは、 できます。ビューがスタイルで宣言された一部の属性のみをサポートしている場合は、そのビューが適用されます。 サポートしていない属性は無視されます。

Android 5.0（API レベル 21）および Android サポート ライブラリ v22.1 以降では、 android:theme 属性をレイアウト ファイル内のビューに設定します。これにより、 そのビューとすべての子ビュー。これは、特定のビュー内のテーマ カラーパレットを変更する場合に便利です。 できます。

上記の例は、Theme.AppCompat などのテーマを適用する方法を示しています。 Android サポート ライブラリが提供しています。ただし、通常は、環境に合わせてテーマをカスタマイズします。 評価しますそのためには、サポート ライブラリからこれらのスタイルを拡張し、 一部の属性をオーバーライドできます。

スタイル階層

Android では、Android アプリ全体で属性を設定するさまざまな方法が用意されています。たとえば レイアウト内での属性の直接設定、ビューへのスタイルの適用、レイアウトへのテーマの適用、 属性もプログラムで設定できます。

アプリのスタイル設定方法を選択するときは、Android のスタイル階層に注意してください。通常は 一貫性を持たせるため、できる限りテーマとスタイルを適用してください。同じ属性を 最終的に適用される属性は、次のリストによって決まります。リストは次のとおりです。 降順に並べ替えます。

  1. テキストスパンを使用した文字レベルまたは段落レベルのスタイル設定を TextView から派生したデータに適用する 。
  2. プログラムによる属性の適用。
  3. 個々の属性をビューに直接適用する。
  4. ビューにスタイルを適用する
  5. デフォルトのスタイル。
  6. ビューのコレクション、アクティビティ、またはアプリ全体にテーマを適用する。
  7. ビュー固有の特定のスタイル設定を適用する（例: TextAppearance TextView 上。

図 2. span によるスタイル設定は textAppearance によるスタイル設定をオーバーライドします。

<ph type="x-smartling-placeholder">

TextAppearance

スタイルに関する制限として、View にはスタイルを 1 つしか適用できません。新しい TextView。ただし、Pod の TextAppearance 属性 スタイルと同様に機能します。次の例をご覧ください。

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

TextAppearance を使用すると、 他の用途に View を利用できます。ただし、テキスト属性を定義すると、 View またはスタイルに直接追加した場合、これらの値は TextAppearance 値。

TextAppearance は、TextView で設定されたスタイル属性のサブセットをサポートします。 提供します属性の完全なリストについては、 TextAppearance。

含まれていない一般的な TextView 属性には、lineHeight[Multiplier|Extra]、lines、breakStrategy、hyphenationFrequency があります。TextAppearance は段落レベルではなく文字レベルで機能するため、 レイアウト全体に影響する属性はサポートされません。

デフォルトのテーマをカスタマイズする

Android Studio でプロジェクトを作成すると、アプリにマテリアル デザインのテーマが適用されます。 プロジェクトの styles.xml ファイルで定義されています。この AppTheme スタイル Support Library からテーマを拡張し、使用する色属性のオーバーライドを含めます。 主な UI 要素（アプリバーや フローティング アクション ボタン（使用する場合）。ですから、 用意されている色を更新することで、アプリのカラーデザインをすばやくカスタマイズできます。

たとえば、styles.xml ファイルは次のようになります。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

スタイル値は、実際には他のオブジェクト カラーリソース: プロジェクトの res/values/colors.xml ファイルで行います。このファイルの色を変更するために編集します。 詳しくは、 マテリアル デザインの配色の概要 ダイナミック カラーと追加のカスタムカラーを使用して、ユーザー エクスペリエンスを向上させます。

色を確認したら、res/values/colors.xml の値を更新します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

その後、必要に応じて他のスタイルをオーバーライドできます。たとえば、アクティビティを変更することもできます。 次のような背景色を使用します。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

テーマで使用できる属性のリストについては、 R.styleable.Theme。追加する場合 [XML 属性] で属性を見つけることもできます。 ビュークラスの参照内のテーブルです。たとえば、すべてのビューは ベース View の XML 属性 クラスをご覧ください。

ほとんどの属性は特定のタイプのビューに適用され、一部の属性はすべてのビューに適用されます。ただし、 テーマ属性の一部については、 R.styleable.Theme は レイアウト内のビューではなく、アクティビティ ウィンドウです。たとえば、windowBackground は ウィンドウ背景と windowEnterTransition は、次の場合に使用する遷移アニメーションを定義します。 アクティビティが開始されます。詳しくは、開始 アニメーションを使ってアクティビティを作成する

Android サポート ライブラリには、テーマのカスタマイズに使用できる他の属性も用意されています。 Theme.AppCompat から拡張されたもの（例: colorPrimary 属性） 使用します。これらは ライブラリの attrs.xml ファイル。

<ph type="x-smartling-placeholder">

サポート ライブラリには、拡張が可能なさまざまなテーマもあります。 使用できます。利用可能なテーマは ライブラリの themes.xml ファイル。

バージョン固有のスタイルを追加する

使用するテーマ属性が新しいバージョンの Android で追加された場合は、それらをテーマに追加できます。 旧バージョンとの互換性を維持します必要なのは別の styles.xml ファイルだけです （このファイルを含む values ディレクトリに保存） リソース バージョン 修飾子:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

values/styles.xml ファイルのスタイルはすべてのバージョンで使用できるため、 values-v21/styles.xml のテーマはそれらのテーマを継承できます。つまり 「ベース」で始まることでスタイルを複製するそのバージョン固有の構成で拡張し、 あります。

たとえば、Android 5.0（API レベル 21）以降でウィンドウ遷移を宣言するには、以下が必要です。 新しい属性を使用できます。res/values/styles.xml のベーステーマは次のようになります。 これを次のように使用します。

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

次に、res/values-v21/styles.xml にバージョン固有のスタイルを次のように追加します。

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

これで、マニフェスト ファイルで AppTheme を適用できるようになりました。これにより、スタイルが自動的に選択されます。 利用可能な数を示しています。

デバイスごとの代替リソースの使用について詳しくは、以下をご覧ください。 代替リソースの指定。

ウィジェット スタイルをカスタマイズする

フレームワークとサポート ライブラリのすべてのウィジェットにはデフォルトのスタイルがあります。たとえば、 Support Library のテーマを使用してアプリのスタイルを設定できます。 Button のスタイルは、 Widget.AppCompat.Button スタイル。別のウィジェット スタイルを ボタンを表示するには、レイアウト ファイルの style 属性を使用します。たとえば、 以下は、ライブラリの枠線なしボタンのスタイルを適用します。

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

このスタイルをすべてのボタンに適用する場合は、テーマの buttonStyle は次のようになります。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

他のスタイルを拡張するのと同様に、ウィジェットのスタイルを拡張することもできます。 レイアウトまたはテーマにカスタム ウィジェットのスタイルを適用します。

参考情報

テーマとスタイルについて詳しくは、以下の参考リンクをご覧ください。

ブログ投稿