Android开发 — UI界面之threme和style

Android开发 -- UI界面之theme和style

什么是theme和style

在Android开发中，theme和style都是用来定义UI界面样式的属性。其中，theme是一种整体的样式方案，可以在AndroidManifest.xml文件中定义，对整个应用程序生效；而style是一组UI控件封装的样式，通常保存在styles.xml文件中，可以在应用程序中任意使用。

如何定义theme和style

定义theme

要定义一个theme，我们需要在AndroidManifest.xml文件中添加如下代码：

<application
    android:theme="@style/AppTheme">
    ...
</application>

这里的@style/AppTheme表示我们要使用项目中定义的样式方案。样式方案的定义，我们要在styles.xml文件中进行，如下：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

这里我们定义了一个名为AppTheme的样式，将它的parent属性设为了Theme.AppCompat.Light.NoActionBar，表示继承自Android系统提供的Theme.AppCompat.Light.NoActionBar样式方案。另外，我们还为它定义了三个颜色属性，分别为colorPrimary，colorPrimaryDark和colorAccent，这些属性可以在应用程序中任意使用。

定义style

要定义style，我们需要在styles.xml文件中添加如下代码：

<style name="MyButtonStyle" parent="Widget.AppCompat.Button">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">@color/colorAccent</item>
    <item name="android:background">@drawable/btn_bg</item>
</style>

这里我们定义了一个名为MyButtonStyle的样式，继承自Widget.AppCompat.Button样式，表示该样式作用于Button控件。我们对它的属性进行了设定，比如设置Button控件的宽高，字体大小、颜色，以及背景图片等等。

如何应用theme和style

应用theme

应用theme非常简单，只需要在AndroidManifest.xml文件中为你的Application节点添加android:theme属性，值为你定义的theme样式名即可，如下：

<application
    android:theme="@style/AppTheme">
    ...
</application>

应用style

应用style也很简单，只需要在布局文件中为需要添加样式的UI控件的style属性指定你定义的样式即可，如下：

<Button
    android:id="@+id/btn_login"
    style="@style/MyButtonStyle"
    android:text="登录" />

这里我们将MyButton适用于Button控件，用来定义按钮的样式。

示例

示例1：定义自己的主题

1. 在styles.xml中定义自己的主题

<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

这里我们定义了一个名为MyTheme的主题，继承自Theme.AppCompat.Light.NoActionBar主题，也为该主题定义了三个颜色属性。

1. 在AndroidManifest.xml中指定该主题

<application
    android:theme="@style/MyTheme">
    ...
</application>

这里我们为Application指定了我们定义的MyTheme主题。

示例2：定义自己的样式

1. 在styles.xml中定义自己的样式

<style name="MyEditTextStyle" parent="Widget.AppCompat.EditText">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">@color/colorAccent</item>
    <item name="android:background">@drawable/edt_bg</item>
    <item name="android:padding">10dp</item>
</style>

这里我们定义了一个样式名为MyEditTextStyle，继承自Widget.AppCompat.EditText，也为该样式定义了EditText控件使用的各种属性，包括宽高，字体颜色，背景，之后我们就可以通过MyEditTextStyle来定义EditText。

1. 在布局文件中使用自己定义的样式

<EditText
    android:id="@+id/et_username"
    style="@style/MyEditTextStyle"
    android:hint="请输入用户名" />

这里我们将MyEditTextStyle样式作用于EditText控件，定义EditText的样式。