第三十二讲:Android中的主题和风格学习指南

77
回复
585866
查看
  [复制链接]

0

主题

0

帖子

-16

安币

限制会员

精华 发表于 2011-4-29 15:41:14 | 显示全部楼层 |阅读模式
本帖最后由 andbus 于 2011-4-29 15:44 编辑

  本讲内容:Android中的主题(Theme)和风格(Style)学习指引。

  一、引言:

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

  下面两张图就是安装了Open Home这个软件后,Home界面的显示效果:
[url=http://android.yaohuiji.com/wp-content/uploads/2010/08/image49.png]
  Open Home 还带有抽屉效果^_^好吧,我承认这个界面也谈不上好看和耐看,不过我们学了本讲的内容就可以按照自己的意愿更改程序的外观显示了。别人做的不好,咱自己做还不行吗(心虚中,^_^)……二、什么是主题(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中建立形如这样的代码:(注,这段代码来自官方的文档,不是我写的…)

  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. </resources>
复制代码
  系统提供了大量的Style和Theme使我们学习样式设计的最好教材,我把代码放在这里(styles.xml)和这里(themes.xml)了,有时间大家可以多看看系统的样式是如何定义的。
  三、自定义主题(Theme)和风格(Style):


  下面让我们借用http://blog.androgames.net/category/android-tutorials/page/5/ 里的例子加工一下来学习如何自定义UI组件的风格

吧,哎这个例子实在是有点小酷,所以你先看一下效果好了。


[/url]
1、 新建一个项目 Lesson32_StyleAndTheme2、拷贝这[url=http://android.yaohuiji.com/wp-content/uploads/2010/08/btn_orange9.png]
[/url] [url=http://android.yaohuiji.com/wp-content/uploads/2010/08/btn_black9.png] 三张 Nine-Patch PNG图片到res/drawable目录下,对于什么是nine-patch图片,以及它是如何制作的,感兴趣的朋友可以看这里,我们这里只需要知道它可以不失真的情况下进行缩放伸缩就可以了。3、在按钮的同目录下建立一个文件btn_custom.xml,把上述3张图片整合成一个按钮背景文件,让三张图片成为不同状态下的按钮表现效果。具体写法如下:

  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文件,内容如下:

  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. </resources>
复制代码

  5、在res/layout/目录下定义main.xml文件,内容如下:
  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.         <textview android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="张信哲的热搜歌曲">

  4.         <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="爱如潮水 " android:id="@+id/Button01">
  5.   </button>

  6.   <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="过火 " android:id="@+id/Button02">
  7.   </button>

  8.   <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="别怕我伤心 " android:id="@+id/Button03">
  9.   </button>

  10.   <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="从开始到现在 " android:id="@+id/Button04">
  11.   </button>

  12.   <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="信仰 " android:id="@+id/Button05">
  13.   </button>

  14.   <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="说谎 " android:id="@+id/Button06">
  15.   </button>
  16. </textview></linearlayout>
复制代码
  6、在res/values目录下定义theme.xml文件:
  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. </resources>
复制代码

  7、在AndroidManifest.xml中给整个应用程序设置主题:
  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.     </application>
  11.     <uses -sdk="" android:minsdkversion="8">

  12. </uses></manifest>
复制代码

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

[url=http://android.yaohuiji.com/wp-content/uploads/2010/08/image52.png][/url]


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

  最后强调再强调一遍哈,代码一定要自己敲一遍才会有更大收获,拷贝代码则会让你很快就忘记所学内容。


  好了本讲就到这里,Take your time and enjoy it ^_^



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

0

主题

47

帖子

35

安币

程序猿

Rank: 2

发表于 2011-10-24 23:31:15 | 显示全部楼层
很好很强大~~顺便坐个沙发

0

主题

39

帖子

6

安币

初级码农

Rank: 1

发表于 2012-2-7 11:19:28 | 显示全部楼层
支持一下,感谢分享

0

主题

89

帖子

78

安币

程序猿

Rank: 2

QQ达人

发表于 2012-2-16 16:33:09 | 显示全部楼层
还不错!!!

0

主题

29

帖子

4

安币

初级码农

Rank: 1

QQ达人

发表于 2012-2-25 14:13:09 | 显示全部楼层
好东西,分享下

0

主题

46

帖子

109

安币

程序猿

Rank: 2

QQ达人

发表于 2012-3-4 09:56:53 | 显示全部楼层
我弄得不成功。

0

主题

83

帖子

206

安币

攻城狮

Rank: 3Rank: 3

发表于 2012-3-5 17:50:54 | 显示全部楼层
谢谢分享!!!

0

主题

37

帖子

29

安币

初级码农

Rank: 1

QQ
发表于 2012-4-5 21:56:21 | 显示全部楼层
谢谢分亨。。。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )