Android入门教程之创建样式与主题

一、前言

作为一个安卓开发者，我们一般把焦点放在app的功能上。但是仅仅有功能是不够的，界面和功能一样重要。有两种方法可以改变app的外观。第一种就是直接在xml中直接修改view的属性。这种方法只适合于只有几个view和activity的简单app。第二种方法就是创建自定义的样式和主题。如果你对web开发熟悉，第一种方法类似于使用内联的css样式，而第二种类似于使用style sheets。

这篇文章我们将介绍如何创建自定义的样式和主题。

二、创建styles

样式显然是应用到ui控件上面的。因此，让我们先创建一个新的空activity并添加两个view到布局文件中。

<view android:layout_width="100dp"
 android:layout_height="100dp"
 android:layout_margin="5dp"
 android:background="#009688"
 android:id="@+id/box1" />
 
<view android:layout_width="100dp"
 android:layout_height="100dp"
 android:background="#00bcd4"
 android:layout_margin="5dp"
 android:id="@+id/box2" />

就如你看到的，属性layout_width 和 layout_margin是被显式的定义在每个view中。

要为这个view创建一个新的样式，右键它并选择refactor > extract > style。

现在你会看到一个对话框，里面可以为样式设置名字，还可以选择要包含的属性。我们命名为mybox，并选择除了background之外的所有属性。

当你点击ok之后，你会看到第一个view的代码已经变了。

<view android:background="#009688"
 android:id="@+id/box1"
 style="@style/mybox" />

这个view现在有了一个指向mybox 样式的style属性。你可以打开res/values/styles.xml来查看这个样式的定义

<style name="mybox">
 <item name="android:layout_width">100dp</item>
 <item name="android:layout_height">100dp</item>
 <item name="android:layout_margin">5dp</item>
</style>

一旦一个样式被定义好，你就可以应用到任何view中。比如，把mybox应用到第二个view：

<view android:background="#00bcd4"
 android:id="@+id/box2"
 style="@style/mybox" />

应用了样式之后，activity中的两个view就是这个样子：

三、继承 styles

android允许你在其他样式的基础上创建一个新样式。换句话说就是允许你继承style。

继承一个style有两种不同的语法。第一种语法被称为隐式的语法，使用.号作为标记。比如，如果你要创建两个parent为mybox，名为 teal和cyan的子样式：

<style name="mybox.teal">
 <item name="android:background">#009688</item>
</style>
 
<style name="mybox.cyan">
 <item name="android:background">#00bcd4</item>
</style>

你也许能猜到mybox.teal 和 mybox.cyan 都具有mybox的所有属性，除此之外，它们还有android:background属性。

第二种语法通常叫做显式的语法。它使用一个parent属性，其值就是parent style的名称。这里是一个定义名为tealbox的样式的代码片段：

<style name="tealbox" parent="mybox">
 <item name="android:background">#009688</item>
</style>

应用一个派生的style跟应用一个普通的没有区别。

<view android:id="@+id/box1"
 style="@style/tealbox" />
 
<view android:id="@+id/box2"
 style="@style/mybox.cyan" />

大多数开发者在继承自己的style时使用隐式的语法，而继承系统style时使用显式的语法。

四、创建themes

目前为止，我们只是把style应用到activity里面的view中。android还允许你把style应用到整个activity和应用中。当一个样式被应用到activity或者application中时，就变成了一个一个theme（主题）。

默认，使用最新版本android studio创建的所有的app都使用一个叫做apptheme的主题。apptheme是appcompat的子类，一个非常大而广泛的主题，影响到几乎所有常用视图的外观。

你可以在styles.xml中找到apptheme的定义：

<!-- base application theme. -->
<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>

apptheme遵循material design.因此，为了创建符合material design spec的主题，使用apptheme作为parent是一个不错的主题。要不然，你也可以直接使用theme.appcompat作为parent。

虽然你可以书写xml代码来创建主题－记住，它们只是样式而已－但是在本教程，我将演示如何使用android studio的主题编辑器来做这些复杂的工作。

要打开主题编辑器，打开tools菜单选择android > theme editor。

在主题编辑器窗口的右边，你不仅有修改主题的控件，还有创建一个新主题的控件。左边展示主题修改后的预览结果。

要创建一个新主题，点击theme下拉菜单，选择create new theme选项。

在弹出的对话框中，设置新主题的名称为mytheme然后点击ok。

到此时， styles.xml将有一行新代码：

<style name="mytheme" parent="apptheme" />

让我们使用主题编辑器来修改mytheme。为了让事情变的简单，本教程只修改colorprimary, colorprimarydark, 以及 coloraccent属性的值。

要修改colorprimary的值，点击colorprimary按钮。主题编辑器将显示一个颜色对话框。选择你想要的颜色，但是记住给它一个新名字，如果你忘记了，主题编辑器将覆盖apptheme的这个颜色。

修改colorprimarydark和coloraccent的值是相同的步骤。主题编辑器将自动根据你选择的colorprimary推荐合适的bothcolorprimarydark和coloraccent。

现在mytheme的定义看起来就是这样：

<style name="mytheme" parent="apptheme" >
 <item name="colorprimary">@color/colorprimarymytheme</item>
 <item name="colorprimarydark">@color/colorprimarydarkmytheme</item>
 <item name="coloraccent">@color/coloraccentmytheme</item>
</style>

五、 应用themes

在应用我们创建的主题之前，让我们先添加几个常用的控件到activity中。这样更容易看到主题的效果。

下面的代码创建了一个普通的button，一个无边框的button，一个彩色的button，一个checkbox，一个radiobutton，一个switch，一个seekbar，一个textview以及一个edittext：

<button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="normal"
 android:id="@+id/normal_button" />
 
<button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="borderless"
 android:id="@+id/borderless_button"
 style="@style/widget.appcompat.button.borderless" />
 
<button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="colored"
 android:id="@+id/colored_button"
 style="@style/widget.appcompat.button.colored" />
 
<checkbox android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="new checkbox"
 android:id="@+id/checkbox" />
 
<radiobutton android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="new radiobutton"
 android:id="@+id/radiobutton" />
 
<switch android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="new switch"
 android:id="@+id/switchbutton" />
 
<seekbar android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/seekbar" />
 
<textview android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="new text"
 android:id="@+id/textview" />
 
<edittext android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/edittext"
 android:hint="input" />

当添加了这些view之后，布局看起来就是这样的：

如果你读过material design spec。我确定你可以看出来此时的activity为colorprimary 和 colorprimarydark使用了靛蓝色。而coloraccent使用的是粉色。这些都是android studio默认的颜色。你可以在项目的res/values/colors.xml中找到它们的hex值。

要在activity中使用这个主题，打开项目的manifest文件，在定义activity的地方添加android:theme属性，把值设为@style/mytheme。

<activity android:name=".mainactivity"
 android:theme="@style/mytheme">
 <intent-filter>
  <action android:name="android.intent.action.main" />
  <category android:name="android.intent.category.launcher" />
 </intent-filter>
</activity>

同样，你还可以通过设置application的android:theme属性把这个主题应用到整个app。

如果你现在看看你的activity，它应该有很大不同。

六、总结

在这个教程中，你学会了如何创建和应用自定义的样式和主题。你可以把这些知识用来让你的app变的更好看。现在多数用户都已经习惯了 material design，偏离规则太远会干扰到他们。以上就是这篇文章的全部内容，希望对大家的学习和工作能带来一定的帮助，如果有疑问可以留言交流。