上一节讲解的是Android中使用SAX和pull方式解析XML，本节的主要内容是Android中主题（Theme）和风格（Style）的专题介绍。

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

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

Open Home界面效果

Open Home界面显示效果

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

       一、Android主题（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中建立形如这样的代码：（注，这段代码来自官方的文档，不是我写的…）

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3. <style name="CodeFont" parent="@android:style/TextAppearance.Medium">  
  4.         <item name="android:layout_width">fill_parent</item>  
  5.         <item name="android:layout_height">wrap_content</item>  
  6.         <item name="android:textColor">#00ff00</item>  
  7.         <item name="android:typeface">monospace</item>  
  8.     </style>  
  9.   
  10. </resources>  

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

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

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

Android自定义主题和风格

       1、新建一个项目 Lesson32_StyleAndTheme。

       2、拷贝下面三张 Nine-Patch PNG图片到res/drawable目录下：

 nine-patch图片nine-patch图片nine-patch图片

       对于什么是nine-patch图片，以及它是如何制作的，感兴趣的朋友可以去查看相关资料，我们这里只需要知道它可以不失真的情况下进行缩放伸缩就可以了。

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

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.         <item android:drawable="@drawable/btn_red" android:state_enabled="false">  
  4.         <item android:drawable="@drawable/btn_orange" android:state_enabled="true" android:state_pressed="true">  
  5.         <item android:drawable="@drawable/btn_orange" android:state_enabled="true" android:state_focused="true">  
  6.         <item android:drawable="@drawable/btn_black" android:state_enabled="true">  
  7. </item></item></item></item></selector>  

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

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3. <style name="BasicButtonStyle" parent="@android:style/Widget.Button">  
  4.                 <item name="android:gravity">center_vertical|center_horizontal</item>  
  5.                 <item name="android:textColor">#ffffffff</item>  
  6.                 <item name="android:shadowColor">#ff000000</item>  
  7.                 <item name="android:shadowDx">0</item>  
  8.                 <item name="android:shadowDy">-1</item>  
  9.                 <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>  
  24.   
  25. </resources>  

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

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">  
  3.   
  4.         <textview android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="张信哲的热搜歌曲">  
  5.   
  6.         <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="爱如潮水 " android:id="@+id/Button01">  
  7.   </button>  
  8.   
  9.   <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="过火 " android:id="@+id/Button02">  
  10.   </button>  
  11.   
  12.   <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="别怕我伤心 " android:id="@+id/Button03">  
  13.   </button>  
  14.   
  15.   <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="从开始到现在 " android:id="@+id/Button04">  
  16.   </button>  
  17.   
  18.   <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="信仰 " android:id="@+id/Button05">  
  19.   </button>  
  20.   
  21.   <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="说谎 " android:id="@+id/Button06">  
  22.   </button>    
  23. </textview></linearlayout>  

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

XML/HTML代码
  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>  
  8.   
  9. </resources>  

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

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="android.basic.lesson32" android:versioncode="1" android:versionname="1.0">  
  3.     <application android:theme="@style/BasicButtonTheme" android:label="@string/app_name" android:icon="@drawable/icon">  
  4.         <activity android:label="@string/app_name" android:name=".MainStyleAndTheme">  
  5.             <intent -filter="">  
  6.                 <action android:name="android.intent.action.MAIN">  
  7.                 <category android:name="android.intent.category.LAUNCHER">  
  8.             </category></action></intent>  
  9.         </activity>  
  10.   
  11.     </application>  
  12.     <uses -sdk="" android:minsdkversion="8">  
  13.   
  14. </uses></manifest>   

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

Android不设置主题时应用程序效果

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

       本节就到这里了。再次提醒大家一下，最好自己敲一遍代码，不要直接拷贝，这样记忆更深刻。

本文发布：Android开发网
本文地址：http://www.jizhuomi.com/android/course/227.html
2012年10月9日
发布:鸡啄米 分类:Android开发教程 浏览: 评论:0