您的位置：首页 > 移动开发 > Android开发

Android中的主题和风格学习指南

2011-01-10 23:02 459 查看

一、引言：

Android设备和IOS设备的界面风格比较起来，说实话Android的默认UI组件最多只是可以看，绝对比不上Iphone默认组件那么好看和耐看。不过Android系统的开放性很高，我们可以从头到尾改变的它界面显示。

下面两张图就是安装了OpenHome这个软件后，Home界面的显示效果：

OpenHome还带有抽屉效果^_^

好吧，我承认这个界面也谈不上好看和耐看，不过我们学了本讲的内容就可以按照自己的意愿更改程序的外观显示了。别人做的不好，咱自己做还不行吗（心虚中，^_^）……

二、什么是主题（Theme）和风格（Style）：

在Web开发中，Html代码负责内容部分，CSS部分负责表现部分，我们使用CSS+DIV的符合Web标准的方式设计网页，可以把内容和形式分离开。同样在Android的开发中，我们可以使用Theme、Style+UI组件的方式，实现内容和形式的分离，做到界面的自定义。那么我们下面近距离认识一下Theme和Style。

风格Style是一个包含一种或多种格式化属性的集合，你可以把它应用在UI组件上。主题Theme也是一个包含一种或多种格式化属性的集合，你可以把它应用在整个应用程序（Application）中或者某个窗口（Activity）中。

定义一个style或者theme的方法是一样的。在res/values/目录下建立style.xml或者theme.xml文件，在xml中建立形如这样的代码：（注，这段代码来自官方的文档，不是我写的…）

viewsource

print?

01	<? xml version = "1.0" encoding = "utf-8" ?>

02	< RESOURCES >

03	< STYLE name = "CodeFont" parent = "@android:style/TextAppearance.Medium" >

04	< item name = "android:layout_width" >fill_parent</ item >

05	< item name = "android:layout_height" >wrap_content</ item >

06	< item name = "android:textColor" >#00ff00</ item >

07	< item name = "android:typeface" >monospace</ item >

08	</ STYLE >

10	</ RESOURCES >

系统提供了大量的Style和Theme使我们学习样式设计的最好教材，我把代码放在这里(styles.xml)和这里(themes.xml)了，有时间大家可以多看看系统的样式是如何定义的。

三、自定义主题（Theme）和风格（Style）：

下面让我们借用http://blog.androgames.net/category/android-tutorials/page/5/里的例子加工一下来学习如何自定义UI组件的风格吧，哎这个例子实在是有点小酷，所以你先看一下效果好了。

1、新建一个项目Lesson32_StyleAndTheme

2、拷贝这

三张Nine-PatchPNG图片到res/drawable目录下，对于什么是nine-patch图片，以及它是如何制作的，感兴趣的朋友可以看这里，我们这里只需要知道它可以不失真的情况下进行缩放伸缩就可以了。

3、在按钮的同目录下建立一个文件btn_custom.xml，把上述3张图片整合成一个按钮背景文件，让三张图片成为不同状态下的按钮表现效果。具体写法如下：

viewsource

print?

1	<? xml version = "1.0" encoding = "utf-8" ?>

2	< SELECTOR xmlns:android = "http://schemas.android.com/apk/res/android" >

3	< ITEM android:state_enabled = "false" android:drawable = "@drawable/btn_red" />

4	< ITEM android:state_enabled = "true" android:drawable = "@drawable/btn_orange" android:state_pressed = "true" />

5	< ITEM android:state_enabled = "true" android:drawable = "@drawable/btn_orange" android:state_focused = "true" />

6	< ITEM android:state_enabled = "true" android:drawable = "@drawable/btn_black" />

7	</ SELECTOR >

4、在res/values目录下定义style.xml文件，内容如下：

viewsource

print?

01	<? xml version = "1.0" encoding = "utf-8" ?>

02	< RESOURCES >

03	< STYLE name = "BasicButtonStyle" parent = "@android:style/Widget.Button" >

04	< item name = "android:gravity" >center_vertical\|center_horizontal</ item >

05	< item name = "android:textColor" >#ffffffff</ item >

06	< item name = "android:shadowColor" >#ff000000</ item >

07	< item name = "android:shadowDx" >0</ item >

08	< item name = "android:shadowDy" >-1</ item >

09	< item name = "android:shadowRadius" >0.2</ item >

10	< item name = "android:textSize" >16dip</ item >

11	< item name = "android:textStyle" >bold</ item >

12	< item name = "android:background" >@drawable/btn_custom</ item >

13	< item name = "android:focusable" >true</ item >

14	< item name = "android:clickable" >true</ item >

15	</ STYLE >

16	< STYLE name = "BigTextStyle" >

17	< item name = "android:layout_margin" >5dp</ item >

18	< item name = "android:textColor" >#ff9900</ item >

19	< item name = "android:textSize" >25sp</ item >

20	</ STYLE >

21	< STYLE name = "BasicButtonStyle.BigTextStyle" >

22	< item name = "android:textSize" >25sp</ item >

23	</ STYLE >

25	</ RESOURCES >

5、在res/layout/目录下定义main.xml文件，内容如下：

viewsource

print?

01	<? xml version = "1.0" encoding = "utf-8" ?>

02	< LINEARLAYOUT xmlns:android = "http://schemas.android.com/apk/res/android" android:orientation = "vertical" android:layout_width = "fill_parent" android:layout_height = "fill_parent" >

04	< TEXTVIEW android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:text = "张信哲的热搜歌曲" />

06	< BUTTON android:id = "@+id/Button01" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "爱如潮水" >

07	</ BUTTON >

09	< BUTTON android:id = "@+id/Button02" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "过火" >

10	</ BUTTON >

12	< BUTTON android:id = "@+id/Button03" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "别怕我伤心" >

13	</ BUTTON >

15	< BUTTON android:id = "@+id/Button04" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "从开始到现在" >

16	</ BUTTON >

18	< BUTTON android:id = "@+id/Button05" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "信仰" >

19	</ BUTTON >

21	< BUTTON android:id = "@+id/Button06" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "说谎" >

22	</ BUTTON >

23	</ LINEARLAYOUT >

6、在res/values目录下定义theme.xml文件：

viewsource

print?

1	<? xml version = "1.0" encoding = "utf-8" ?>

2	< RESOURCES >

3	< STYLE name = "BasicButtonTheme" >

4	< item name = "android:buttonStyle" >@style/basicbuttonstyle</ item >

5	< item name = "android:windowBackground" >@android:color/transparent</ item >

6	< item name = "android:windowIsTranslucent" >true</ item >

7	</ STYLE >

9	</ RESOURCES >

7、在AndroidManifest.xml中给整个应用程序设置主题：

viewsource

print?

01	<? xml version = "1.0" encoding = "utf-8" ?>

02	< MANIFEST android:versionname = "1.0" android:versioncode = "1" xmlns:android = "http://schemas.android.com/apk/res/android" package = "android.basic.lesson32" >

03	< APPLICATION android:icon = "@drawable/icon" android:label = "@string/app_name" android:theme = "@style/BasicButtonTheme" >

04	< ACTIVITY android:label = "@string/app_name" android:name = ".MainStyleAndTheme" >

05	< INTENT -filter>

06	< ACTION android:name = "android.intent.action.MAIN" />

07	< CATEGORY android:name = "android.intent.category.LAUNCHER" />

08	</ INTENT >

09	</ ACTIVITY >

11	</ APPLICATION >

12	< USES android:minsdkversion = "8" -sdk/>

14	</ MANIFEST >

8、程序的最终运行效果我们在前面看到了，那么我们不设置应用程序的主题时，再看看运行效果：

我们是不是清晰的看到主题在应用程序层定义后，它的子元素会自动继承，这一点非常像CSS。说到继承，我在这个例子的代码里也放了一些关于样式可以继承的使用指引，相信有细心的朋友已经注意到了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航