Android语言基础教程（147）Android Drawable资源之样式（style）资源：Android样式魔法：用Style和Drawable打造高颜值APP

还在为Android界面丑到流泪而烦恼？掌握这些技巧让你的APP美到犯规！

作为一名Android开发者，你是否曾经为了一个简单的按钮样式熬夜到凌晨？是否曾在多个XML文件中复制粘贴相同的属性，只为了保持界面统一？别担心，Android的样式系统正是为了解决这些问题而生的！

本文将带你深入探索Android样式资源的奥秘，教你如何用Style和Drawable打造既美观又高效的界面。准备好了吗？让我们一起开启这趟Android样式魔法之旅！

1. 理解Android样式基础

在Android中，样式本质上是一种属性集合，可以一次性应用到多个UI组件上，实现统一的外观和感觉。想象一下，如果你有10个按钮都需要相同的背景、文字大小和内边距，你会怎么做？

没有样式的时候，你只能在每个按钮上重复写相同的属性：

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/btn_bg"
  android:textColor="@color/white"
  android:textSize="16sp"
  android:padding="12dp"
  android:text="按钮1" />
  
<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/btn_bg"
  android:textColor="@color/white"
  android:textSize="16sp"
  android:padding="12dp"
  android:text="按钮2" />

这种重复代码简直是开发者的噩梦！而使用样式，你只需要定义一个样式，然后在各个按钮上引用即可：

<style name="PrimaryButton">
  <item name="android:background">@drawable/btn_bg</item>
  <item name="android:textColor">@color/white</item>
  <item name="android:textSize">16sp</item>
  <item name="android:padding">12dp</item>
</style>
<Button
 
  android:text="按钮1" />
  
<Button
 
  android:text="按钮2" />

看，代码瞬间简洁多了！而且当你需要修改按钮样式时，只需改动一处，所有使用该样式的按钮都会自动更新，这才是真正的魔法！

2. Drawable资源：样式的颜值担当

在深入了解样式之前，我们先来看看Drawable资源，因为它们是样式的基石。Drawable不仅仅是图片，在Android中，它代表了任何可以在屏幕上绘制的东西 - 形状、颜色、渐变，甚至是其他Drawable的组合。

2.1 ShapeDrawable：百变形金刚

ShapeDrawable是Android中最实用的Drawable之一，它允许你通过XML定义各种形状，而无需准备图片资源。这不仅能减小APK大小，还能自动适配不同屏幕尺寸。

来看看ShapeDrawable能创建哪些神奇的形状：

矩形形状 - 这是最常用的形状：

<!-- res/drawable/rounded_rectangle.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="#FF4081" />
    <!-- 边框 -->
    <stroke
        android:width="2dp"
        android:color="#FF1744" />
    <!-- 圆角 -->
    <corners android:radius="8dp" />
    <!-- 内边距 -->
    <padding
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp" />
</shape>

圆形形状 - 非常适合用于头像背景或状态指示器：

<!-- res/drawable/circle.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#4285F4" />
    <size
        android:width="40dp"
        android:height="40dp" />
</shape>

渐变形状 - 让你的界面更具层次感：

<!-- res/drawable/gradient_background.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="45"
        android:endColor="#FF6D00"
        android:startColor="#FF9100"
        android:type="linear" />
    <corners android:radius="12dp" />
</shape>

2.2 StateListDrawable：一人千面的变色龙

StateListDrawable（通常称为selector）允许你根据View的状态显示不同的Drawable。比如按钮，有默认状态、按下状态、禁用状态等，每种状态都可以有不同的外观。

<!-- res/drawable/btn_selector.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下状态 -->
    <item android:drawable="@drawable/btn_pressed" android:state_pressed="true" />
    <!-- 禁用状态 -->
    <item android:drawable="@drawable/btn_disabled" android:state_enabled="false" />
    <!-- 默认状态 -->
    <item android:drawable="@drawable/btn_normal" />
</selector>

2.3 LayerDrawable：俄罗斯套娃

LayerDrawable允许你将多个Drawable组合在一起，创建出更复杂的效果。想象一下，在一个按钮背景上同时有渐变、边框和阴影效果：

<!-- res/drawable/layered_button.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 最底层：阴影 -->
    <item
        android:left="2dp"
        android:top="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#33000000" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- 中间层：渐变 -->
    <item
        android:bottom="2dp"
        android:left="0dp"
        android:right="2dp"
        android:top="0dp">
        <shape android:shape="rectangle">
            <gradient
                android:angle="45"
                android:endColor="#FF6D00"
                android:startColor="#FF9100" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- 最上层：边框 -->
    <item
        android:bottom="2dp"
        android:left="0dp"
        android:right="2dp"
        android:top="0dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="#FF1744" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</layer-list>

3. 样式资源：打造统一的视觉语言

现在，让我们回到样式资源。有了Drawable的基础，我们就可以创建真正强大的样式了！

3.1 样式继承：基因传递

Android样式支持继承，这意味着你可以创建一个基础样式，然后派生出更具体的样式。继承有两种方式：

隐式继承 - 通过名称约定：

<!-- 基础按钮样式 -->
<style name="Button">
    <item name="android:padding">12dp</item>
    <item name="android:textSize">16sp</item>
    <item name="android:layout_margin">4dp</item>
</style>
<!-- 主按钮样式，自动继承Button样式 -->
<style name="Button.Primary">
    <item name="android:background">@drawable/btn_primary</item>
    <item name="android:textColor">@color/white</item>
</style>
<!-- 次要按钮样式 -->
<style name="Button.Secondary">
    <item name="android:background">@drawable/btn_secondary</item>
    <item name="android:textColor">@color/primary_color</item>
</style>

显式继承 - 使用parent属性：

<!-- 显式继承 -->
<style name="PrimaryButton" parent="Button">
    <item name="android:background">@drawable/btn_primary</item>
    <item name="android:textColor">@color/white</item>
</style>

3.2 主题：样式的上帝模式

如果说样式是针对单个View的，那么主题就是针对整个应用或Activity的。主题可以应用到所有View上，提供一致的视觉体验。

<!-- res/values/themes.xml -->
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight">
    <!-- 颜色系统 -->
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorPrimaryVariant">@color/purple_700</item>
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    
    <!-- 文字外观 -->
    <item name="textAppearanceHeadline">@style/TextAppearance.MyApp.Headline</item>
    <item name="textAppearanceBody">@style/TextAppearance.MyApp.Body</item>
    
    <!-- 组件样式 -->
    <item name="buttonStyle">@style/Button.Primary</item>
    <item name="textInputStyle">@style/TextInput.Outlined</item>
</style>

4. 实战：创建一个完整的按钮系统

理论说了这么多，让我们来点实际的！下面我将演示如何创建一个完整的按钮系统，包含主要按钮、次要按钮和危险按钮。

4.1 首先创建各种Drawable

主要按钮的背景Drawable：

<!-- res/drawable/btn_primary.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下状态 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#3700B3" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- 默认状态 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#6200EE" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

次要按钮的背景Drawable：

<!-- res/drawable/btn_secondary.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下状态 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#018786" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- 默认状态 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#03DAC5" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

4.2 创建按钮样式

<!-- res/values/styles.xml -->
<style name="Button" parent="Widget.MaterialComponents.Button">
    <item name="android:padding">16dp</item>
    <item name="android:textSize">16sp</item>
    <item name="android:layout_margin">8dp</item>
    <item name="android:gravity">center</item>
    <item name="android:textAllCaps">false</item>
    <item name="cornerRadius">8dp</item>
</style>
<style name="Button.Primary" parent="Button">
    <item name="android:background">@drawable/btn_primary</item>
    <item name="android:textColor">@color/white</item>
    <item name="rippleColor">@color/white</item>
</style>
<style name="Button.Secondary" parent="Button">
    <item name="android:background">@drawable/btn_secondary</item>
    <item name="android:textColor">@color/black</item>
    <item name="rippleColor">@color/white</item>
</style>
<style name="Button.Danger" parent="Button">
    <item name="android:background">@drawable/btn_danger</item>
    <item name="android:textColor">@color/white</item>
    <item name="rippleColor">@color/white</item>
</style>

4.3 在布局中使用

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">
 
    <Button
       
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="主要按钮" />
 
    <Button
       
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="次要按钮" />
 
    <Button
       
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="危险操作" />
 
</LinearLayout>

5. 高级技巧与最佳实践

5.1 使用主题属性

想让你的样式更灵活吗？使用主题属性而不是硬编码的颜色值！

<style name="Button.Primary" parent="Button">
    <item name="android:background">@drawable/btn_primary</item>
    <!-- 使用主题属性 -->
    <item name="android:textColor">?attr/colorOnPrimary</item>
</style>

5.2 为不同状态提供视觉反馈

用户需要知道他们与界面的交互是否成功。确保为每个交互状态提供清晰的视觉反馈：

<!-- res/drawable/btn_advanced.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 禁用状态 -->
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <solid android:color="#CCCCCC" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- 按下状态 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#3700B3" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- 选中状态 -->
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <stroke
                android:width="2dp"
                android:color="#6200EE" />
            <solid android:color="#E6E0FA" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- 默认状态 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#6200EE" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

5.3 保持一致性

在整个应用中保持样式的一致性至关重要。建立一套设计令牌（Design Tokens）系统：

<!-- res/values/design_tokens.xml -->
<resources>
    <!-- 颜色 -->
    <color name="primary_color">#6200EE</color>
    <color name="primary_dark">#3700B3</color>
    <color name="secondary_color">#03DAC5</color>
    
    <!-- 尺寸 -->
    <dimen name="border_radius_small">4dp</dimen>
    <dimen name="border_radius_medium">8dp</dimen>
    <dimen name="border_radius_large">16dp</dimen>
    
    <!-- 间距 -->
    <dimen name="spacing_small">8dp</dimen>
    <dimen name="spacing_medium">16dp</dimen>
    <dimen name="spacing_large">24dp</dimen>
</resources>

6. 常见陷阱与如何避免

6.1 不要硬编码尺寸和颜色

错误做法：

<item name="android:textSize">16sp</item>
<item name="android:background">#FF0000</item>

正确做法：

<item name="android:textSize">@dimen/text_size_body</item>
<item name="android:background">@color/primary_color</item>

6.2 避免过度嵌套

虽然LayerDrawable很强大，但过度嵌套会影响性能。尽量保持Drawable结构简单。

6.3 测试不同状态

确保测试所有交互状态 - 正常、按下、禁用、选中等，确保每种状态都有合适的视觉反馈。

7. 结语

掌握Android样式和Drawable资源是成为高级Android开发者的必经之路。通过合理使用样式、主题和各种Drawable，你不仅可以创建出美观一致的界面，还能大大提高开发效率，减少重复代码。

记住，好的样式系统就像一套精良的装备，能让你的开发之旅事半功倍。现在，就去重构你的样式吧，让你的APP颜值飙升！