Android はデフォルトのテーマを置き換えます

Android 開発に不慣れな学生は、このインターフェイスに慣れていると思います。

これは、Android Studio が新しいプロジェクトを作成した後のデフォルトの Empty Activity レイアウトです。

アプリのタイトルと頭上のステータスバーの紫色が私のように見苦しいと思っている生徒がどれだけいるかわかりません。今日のメモは、テーマの色を変更する方法を記録することです。

1.テーマファイルを見つける

プロジェクトの AndroidManifest.xml を開くと、テーマを指定するための行があることがわかります。

この文からわかるように、テーマは @style リソースによって指定されます。リソースパスは res/values の下にあり、themes.xml という名前です。

Ctrl+左ボタンでジャンプすると、2 つあることがわかります。これは、別の暗いテーマがあり、res/values-night ディレクトリに themes.xml もあるためです。

次に、テーマファイルの内容を分析します。

Guo Lin の「The First Line of Code」では、テーマの色を変更することについても言及されています. 本のファイルの内容は次のとおりです。

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <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>
</resources>

郭林先生は、本の中で代表的な各属性の位置を示しました。Android Material design drawing の Color の説明への参照は次のとおりです。

つまり、元のファイルでは、各属性の意味は大まかに次のようになります。

属性名	代表職
colorPrimary	アクションバーの背景。これは、アクションバーの背景に適用される色です。
colorPrimaryDark	ステータスバーとナビゲーションバーの背景。これは、ステータスバーとナビゲーションバーに適用される色です。
colorアクセント	背景を制御します。これは、フレームワークコントロールに適用される色です。

そして今、ファイルの内容は次のようになっています

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Graduation" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_200</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_200</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

まず、スタイルの親が異なることがわかります。ここでの親は Theme.MaterialComponents.DayNight.DarkActionBar です。

ここでは、MaterialComponents について簡単に紹介します。MaterialComponentsは、Googleの公式デザインチームが公開したMaterial Designをベースにしたコンポーネントライブラリで、開発するプログラムに統一されたスタイル、ブランド効果、インタラクティブ効果、操作インターフェースによるアクションを持たせるためのもので、Androidネイティブに基づいていますより充実した機能と表示効果は、Android インターフェイスの設計仕様に準拠しているため、製品の設計が容易になり、開発および設計期間が短縮されます。

これらのプロパティの意味は次のとおりです。

属性名	意味
colorPrimary	アプリの主要なブランドカラーで、主にテーマに使用されます
colorPrimaryVariant	テーマではめったに使用されない、メインのブランドカラーの明るい/暗いバリエーション
colorOnPrimary	原色の上に表示される要素に使用される色 (たとえば、アクセシビリティに応じて、テキストやアイコン、通常は白または半透明の黒)
カラーセカンダリ	アプリのサブブランディングカラー。主に、目立たせる必要がある特定のウィジェットを強調するために使用されます。
colorSecondaryVariant	テーマでめったに使用されない、サブブランドの色の明るい/暗いバリエーション
colorOnSecondary	二次色の上に表示される要素に使用する色

最後の android:statusBarColor はシステムのステータスバーの色で、ステータスバーの色は colorPrimaryVariant と一致するように定義されています。

3. テーマの色を変更する

テーマカラーの変更方法はとても簡単で、テーマカラーの定義方法は @color で呼び出されるので、 res/colors で好きな色を定義して呼び出すだけです。

たとえば、次のように変更しました。

        <item name="colorPrimary">@color/teal_200</item>
        <item name="colorPrimaryVariant">@color/white</item>
        <item name="colorOnPrimary">@color/white</item>

ここでは、テーマの色をミントグリーンに、ステータスバーの色を白に変更しました。

効果は次のとおりです。

1.ステータスバーの文字色を変更する

上記の効果で問題を見つけます。ステータスバーが白に設定されている場合、ステータスバーのテキストも白であるため、表示されません。この時点で、ステータスバーのテキストの色を変更する必要があります。ステータスバーの色を変更するGoogleのネイティブメソッドは次のとおりです。

public static void setStatusWordColor(Activity activity, boolean dark) {
        View decorView = activity.getWindow().getDecorView();
        if (dark) {
            decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
        } else {
            decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
        }
    }

本質は、decorView の 2 つのフラグの切り替えです。

次に、onCreateで呼び出します

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        ThemeUtil.setStatusWordColor(this, true)
    }

今は大丈夫です

2.タイトルバーを削除

今日のアプリでは、タイトルバーが上にあることはめったにありません。このタイトルバーを削除するのも非常に簡単です。そのような文を onCreate() に追加するだけです。


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE)  //去除标题栏
        setContentView(R.layout.activity_main)
        ThemeUtil.setStatusWordColor(this, true)
    }

現在、タイトルバーはありません。

アプリ全体のすべてのアクティビティでこのタイトルバーが必要ない場合は、一律に設定することもできます。

前に見つけた res/values/theme.xml で、スタイルの親が Theme.MaterialComponents.DayNight.DarkActionBar であると述べました。

ここでは、システムがデフォルトで ActionBar を含むテンプレートを選択していることがわかります。これを ActionBar なしのテンプレートに変更するだけで、アプリアクティビティ全体にタイトルバーがなくなります。

<style name="Theme.Graduation" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
</style>

4.まとめ

このメモには、ファイルテーマの属性の意味、テーマの色を変更する方法、ステータスバーのテキストの色を変更する方法、およびタイトルバーを削除する方法が記録されています。皆様のお役に立てれば幸いです。

参考記事：

Android の透明なステータスバーとステータスバーのテキストの色の変更 - ショートブック (jianshu.com)

[翻訳] Android の Material Components テーマの設定 - 簡単な本 (jianshu.com)

マテリアルコンポーネント (MDC) 簡単な紹介_fallinux ブログ - CSDN ブログ_material-components-android