[b]一、前言[/b]
作为一个安卓开发者,我们一般把焦点放在app的功能上。但是仅仅有功能是不够的,界面和功能一样重要。有两种方法可以改变app的外观。第一种就是直接在xml中直接修改[code]View[/code]的属性。这种方法只适合于只有几个[code]View[/code]和[code]Activity[/code]的简单app。第二种方法就是创建自定义的样式和主题。如果你对web开发熟悉,第一种方法类似于使用内联的CSS样式,而第二种类似于使用style sheets。
这篇文章我们将介绍如何创建自定义的样式和主题。
[b]二、创建Styles[/b]
样式显然是应用到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" />
就如你看到的,属性[code]layout_width [/code]和 [code]layout_margin[/code]是被显式的定义在每个[code]View[/code]中。
要为这个[code]View[/code]创建一个新的样式,右键它并选择[code]Refactor > Extract > Style[/code]。
现在你会看到一个对话框,里面可以为样式设置名字,还可以选择要包含的属性。我们命名为MyBox,并选择除了[code]background[/code]之外的所有属性。
[img]http://files.jb51.net/file_images/article/201608/201608311043371.jpg[/img]
当你点击ok之后,你会看到第一个[code]View[/code]的代码已经变了。
<View android:background="#009688"
android:id="@+id/box1"
style="@style/MyBox" />
这个[code]View[/code]现在有了一个指向MyBox 样式的style属性。你可以打开[code]res/values/styles.xml[/code]来查看这个样式的定义
<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>
一旦一个样式被定义好,你就可以应用到任何[code]View[/code]中。比如,把MyBox应用到第二个[code]View[/code]:
<View android:background="#00BCD4"
android:id="@+id/box2"
style="@style/MyBox" />
应用了样式之后,[code]activity[/code]中的两个[code]View[/code]就是这个样子:
[img]http://files.jb51.net/file_images/article/201608/201608311043392.png[/img]
[b]三、继承 Styles[/b]
Android允许你在其他样式的基础上创建一个新样式。换句话说就是允许你继承style。
继承一个style有两种不同的语法。第一种语法被称为隐式的语法,使用.号作为标记。比如,如果你要创建两个[code]parent[/code]为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的所有属性,除此之外,它们还有[code]android:background[/code]属性。
第二种语法通常叫做显式的语法。它使用一个[code]parent[/code]属性,其值就是[code]parent style[/code]的名称。这里是一个定义名为TealBox的样式的代码片段:
<style name="TealBox" parent="MyBox">
<item name="android:background">#009688</item>
</style>
应用一个派生的[code]style[/code]跟应用一个普通的没有区别。
<View android:id="@+id/box1"
style="@style/TealBox" />
<View android:id="@+id/box2"
style="@style/MyBox.CYAN" />
大多数开发者在继承自己的style时使用隐式的语法,而继承系统[code]style[/code]时使用显式的语法。
[b]四、创建Themes[/b]
目前为止,我们只是把[code]style[/code]应用到activity里面的[code]View[/code]中。Android还允许你把[code]style[/code]应用到整个[code]activity[/code]和应用中。当一个样式被应用到[code]activity[/code]或者[code]application[/code]中时,就变成了一个一个theme(主题)。
默认,使用最新版本Android Studio创建的所有的app都使用一个叫做AppTheme的主题。[code]AppTheme[/code]是[code]AppCompat[/code]的子类,一个非常大而广泛的主题,影响到几乎所有常用视图的外观。
你可以在styles.xml中找到[code]AppTheme[/code]的定义:
<!-- 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>
[code]AppTheme[/code]遵循Material Design.因此,为了创建符合Material Design spec的主题,使用[code]AppTheme[/code]作为[code]parent[/code]是一个不错的主题。要不然,你也可以直接使用[code]Theme.AppCompat[/code]作为[code]parent[/code]。
虽然你可以书写XML代码来创建主题-记住,它们只是样式而已-但是在本教程,我将演示如何使用Android Studio的主题编辑器来做这些复杂的工作。
要打开主题编辑器,打开[code]Tools[/code]菜单选择[code]Android > Theme Editor[/code]。
在主题编辑器窗口的右边,你不仅有修改主题的控件,还有创建一个新主题的控件。左边展示主题修改后的预览结果。
[img]http://files.jb51.net/file_images/article/201608/201608311043413.jpg[/img]
要创建一个新主题,点击Theme下拉菜单,选择Create New Theme选项。
在弹出的对话框中,设置新主题的名称为MyTheme然后点击ok。
[img]http://files.jb51.net/file_images/article/201608/201608311043434.jpg[/img]
到此时, styles.xml将有一行新代码:
<style name="MyTheme" parent="AppTheme" />
让我们使用主题编辑器来修改MyTheme。为了让事情变的简单,本教程只修改[code]colorPrimary[/code], [code]colorPrimaryDark[/code], 以及 [code]colorAccent[/code]属性的值。
要修改[code]colorPrimary[/code]的值,点击[code]colorPrimary[/code]按钮。主题编辑器将显示一个颜色对话框。选择你想要的颜色,但是记住给它一个新名字,如果你忘记了,主题编辑器将覆盖AppTheme的这个颜色。
[img]http://files.jb51.net/file_images/article/201608/201608311043435.png[/img]
修改[code]colorPrimaryDark[/code]和[code]colorAccent[/code]的值是相同的步骤。主题编辑器将自动根据你选择的[code]colorPrimary[/code]推荐合适的[code]bothcolorPrimaryDark[/code]和[code]colorAccent[/code]。
现在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>
[b]五、 应用Themes[/b]
在应用我们创建的主题之前,让我们先添加几个常用的控件到[code]activity[/code]中。这样更容易看到主题的效果。
下面的代码创建了一个普通的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" />
当添加了这些[code]View[/code]之后,布局看起来就是这样的:
[img]http://files.jb51.net/file_images/article/201608/201608311043446.png[/img]
如果你读过Material Design spec。我确定你可以看出来此时的[code]activity[/code]为[code]colorPrimary [/code]和 [code]colorPrimaryDark[/code]使用了靛蓝色。而[code]colorAccent[/code]使用的是粉色。这些都是Android Studio默认的颜色。你可以在项目的[code]res/values/colors.xml[/code]中找到它们的[code]hex[/code]值。
要在[code]activity[/code]中使用这个主题,打开项目的manifest文件,在定义[code]activity[/code]的地方添加[code]android:theme[/code]属性,把值设为[code]@style/MyTheme[/code]。
<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>
同样,你还可以通过设置[code]application[/code]的[code]android:theme[/code]属性把这个主题应用到整个app。
如果你现在看看你的[code]activity[/code],它应该有很大不同。
[img]http://files.jb51.net/file_images/article/201608/201608311043477.png[/img]
[b]六、总结[/b]
在这个教程中,你学会了如何创建和应用自定义的样式和主题。你可以把这些知识用来让你的app变的更好看。现在多数用户都已经习惯了 Material Design,偏离规则太远会干扰到他们。以上就是这篇文章的全部内容,希望对大家的学习和工作能带来一定的帮助,如果有疑问可以留言交流。