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,偏离规则太远会干扰到他们。以上就是这篇文章的全部内容,希望对大家的学习和工作能带来一定的帮助,如果有疑问可以留言交流。
推荐阅读
-
Android入门教程之创建样式与主题
-
Android入门教程之创建样式与主题
-
Android编程权威指南(第二版)学习笔记(二十)—— 第20章 样式与主题
-
Android开发之缓冲dialog对话框创建、使用与封装操作
-
Android开发之缓冲dialog对话框创建、使用与封装操作
-
基于android样式与主题(style&theme)的详解
-
基于android样式与主题(style&theme)的详解
-
Android样式和主题之选择器的实例讲解
-
黑马Android76期学习笔记01基础--day07--广播,有、无序广播、特殊广播接受者、样式和主题,this与context的区别、普通对话框,进度条对话框、帧动画
-
Android样式和主题之选择器的实例讲解