22.样式与主题

定制用户界面

颜色资源

1.首先，我们来定义本章要用到的颜色资源。参照下面的代码，在res/values中编辑colors.xml文件

<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="red">#F44336</color>
<color name="dark_red">#C3352B</color>
<color name="gray">#607D8B</color>

样式

2.打开res/values/styles.xml样式文件，添加BeatBoxButton新样式，代码如下所示(创建BeatBox项目时，向导会创建默认的styles.xml文件。如果没有，请自行创建。)

<resources>
<style name="AppTheme"parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="BeatBoxButton">
<item name="android:background">@color/dark_blue</item>
</style>
</resources>

3.使用样式（res/layout/list_item_sound.xml)

<Button
style="@style/BeatBoxButton"
android:layout_width="match_parent"
android:layout height="120dp"
android:onClick="@f()-> viewModel.onButtonClicked()】"
android:text="@[viewModel.titlel"
tools:text="Sound name"/>

运行之后就可以看到背景全部变成了深蓝色

样式继承

4.创建一个名叫BeatBoxButton.Strong的新样式,除了继承BeatBoxButton样式的按钮背景属性，再添加自己的android:textStyle属性，用粗体显示按钮文字，如代码所示

<style name="BeatBoxButton">
<item name="android:background">@color/dark_blue</item>
</style>
<style name="BeatBoxButton.Strong">
<item name="android:textStyle">bold</item>
</style>

5.使用粗体文字样式(res/layout/list_item_sound.xml)

<Button
style="@style/BeatBoxButton.Strong"
android:layout_width="match_parent"
android:layout height="120dp"
android:onClick="@(()-> viewModel.onButtonClicked())"
android:text="@[viewModel.title)"
tools:text="Sound name"/>

现在运行应用，确认按钮文字就会显示为粗体

修改默认主题

6.创建BeatBox项目时，向导给了它默认主题。找到并打开AndroidManifest.xml文件，可以看到application标签下的theme属性，如代码所示。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.bignerdranch.android.beatbox">
<application
android:allowBackup="true"
android:icon="@mipmap/ic launcher"
android:label="@string/app name"
android:theme="@style/AppTheme"
</application>
</manifest>

7.要查看AppTheme主题定义，只要按住Command键(Windows系统是Ctrl键)，点击@style/AppTheme，Android Studio就会自动打开res/values/styles.xml文件，如代码所示。

<resources>
<style name="AppTheme"parent=“Theme.AppCompat.Light.DarkActionBar">
</style>
<style name="BeatBoxButton">
<item name="android:background">@color/dark blue</item>
</style>
...
</resources>

8.改用深色主题（res/values/styles.xml)

<resources>
<style name="AppTheme"parent="Theme.AppCompatLight,DarkActionBar">
</style>
...
</resources>

运行BeatBox应用，就可以查看新的深色主题

添加深色主题

9.自定义主题属性(res/values/styles.xml)

<style name=“AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">@color/colorPrimary red</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark dark_red</item> <item name="colorAccent">@color/colorAccent gray</item>
</style>

覆盖主题属性

10.设置窗口背景(res/values/styles.xml)

<style name="AppTheme"parent="Theme.AppCompat">
<item name="colorPrimary">@color/red</item>
<item name="colorPrimaryDark">@color/dark red</item>
<item name="colorAccent">@color/gray</item>
<item name="android:windowBackground">@color/soothing_blue</item> </style>

修改按钮属性

11.创建按钮样式（res/values/styles.xml）

<resources>
<style name="AppTheme” parent="Theme.AppCompat">
<item name="colorPrimary">@color/red</item>
<item name="colorPrimaryDark">@color/dark_red</item>
<item name="colorAccent">@color/gray</item>
<item name="android:windowBackground">@color/soothing_blue</item> </style>
<style name="BeatBoxButton"parent="Widget.AppCompat.Button">
<item name="android:background">@color/dark_blue</item>
</style>
<style name="BeatBoxButton.Strong">
<item name="android:textStyle">bold</item>
</style>
</resources>

12.使用BeatBoxButton样式(res/values/styles.xml)

<resources>
<style name="AppTheme" parent="Theme.AppCompat ">
<item name="colorPrimary"＞@color/red</item>
<item name="colorPrimaryDark"＞@color/dark_red</item>
<item name="colorAccent">@color/gray</item>
<item name="android:windowBackground">@color/soothing_blue</item> <item name="buttonStyle">@style/BeatBoxButton</item>
</style>
<style name="BeatBoxButton"parent="Widget.AppCompat.Button">
<item name="android:background">@color/dark_blue</item>
</style>
</resources>

现在，buttonStyle属性已被覆盖，使用了自定义的BeatBoxButton。运行BeatBox应用，所有的按钮都变成了深蓝色了，如图所示。没有直接修改任何布局，就改变了普通按钮的样子。