14 样式与主题

颜色资源

在colors.xml中定义一些颜色：

<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

    <color name="light_green">#A5C482</color>
    <color name="dark_red">#C3352B</color>
    <color name="gray">#607D8B</color>
    <color name="soothing_blue">#6DBFE4</color>
    <color name="dark_blue">#005A8A</color>
    <color name="soothing_green">#4CAF50</color>
</resources>

---

样式

添加样式

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        ...
    </style>

    <style name="BeatBoxButton">
        <item name="android:background">@color/soothing_blue</item>
    </style>
</resources>

使用样式

list_item_sound.xml

<Button
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/BeatBoxButton"
    ...>
</Button>

样式继承

方式1：通过命名表示样式继承关系

<style name="BeatBoxButton.Strong">
    <item name="android:textStyle">bold</item>
</style>

方式2：指定父样式表示样式继承关系

<style name="StrongBeatBoxButton" parent="@style/BeatBoxButton">
    <item name="android:textStyle">bold</item>
</style>

注意：要以主题名的形式指定父主题，有继承关系的两个主题都应处于同一个包中。一旦AppCompat库要跨库继承，就一定要明确使用 parent 属性。

---

主题

BeatBox项目自带默认主题。找到并打开AndroidManifest.xml文件，可以看到application标签下的 theme 属性。

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.beatbox">
    <application
        ...
        android:theme="@style/AppTheme">
        <activity android:name=".BeatBoxActivity">
            ...
        </activity>
    </application>
</manifest>

在styles.xml中可以看到AppTheme的定义，它现在继承 Theme.AppCompat.Light.DarkActionBar 的全部属性。如有需要，可以添加自己的属性值，或是覆盖父主题的某些属性值。

AppCompat库自带三大主题：

• Theme.AppCompat —— 深色主题
• Theme.AppCompat.Light —— 浅色主题
• Theme.AppCompat.Light.DarkActionBar —— 带深色工具栏的浅色主题

---

添加主题颜色

为AppTheme改用深色主题，并添加三个自定义属性：

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/soothing_green</item>
        <item name="colorPrimaryDark">@color/colorAccent</item>
        <item name="colorAccent">@color/gray</item>
    </style>
    ...
</resources>

其中，

• colorPrimary 属性主要用来设置工具栏背景色；
• colorPrimaryDark 用于屏幕顶部的状态栏；
• 将 colorAccent 设置为灰色的。这个主题色应该和 colorPrimary 形成反差效果，主要用于给 EditText 这样的组件着色。按钮组件不支持着色，所以 colorAccent 主题色在BeatBox项目中没有效果。

---

覆盖主题属性

覆盖colorBackground属性，以设置窗口背景颜色：

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat">
        ...
        <item name="android:colorBackground">@color/light_green</item>
    </style>
</resources>

修改按钮属性

创建按钮样式

styles.xml

...
	<style name="BeatBoxButton" parent="android:Widget.Holo.Button">
        <item name="android:background">@color/soothing_blue</item>
    </style>
...

使用BeatBoxButton样式

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/soothing_green</item>
        <item name="colorPrimaryDark">@color/colorAccent</item>
        <item name="colorAccent">@color/gray</item>

        <item name="android:colorBackground">@color/light_green</item>
        <item name="android:buttonStyle">@style/BeatBoxButton</item>
    </style>

    <style name="BeatBoxButton" parent="android:Widget.Holo.Button">
        <item name="android:background">@color/soothing_blue</item>
    </style>
</resources>