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

最新推荐文章于 2024-04-24 15:15:43 发布

kbest

最新推荐文章于 2024-04-24 15:15:43 发布

阅读量1.2k

点赞数

文章标签： android layout encoding button resources application

本文链接：https://blog.csdn.net/kbest/article/details/6517403

版权

一、引言：

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

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

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

 
   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> 
 
   09  
 
   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-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: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文件，内容如下：

 
   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> 
 
   24  
 
   25</RESOURCES>

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

 
   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"> 
 
   03  
 
   04    <TEXTVIEW android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="张信哲的热搜歌曲" /> 
 
   05  
 
   06    <BUTTON android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="爱如潮水 "> 
 
   07  </BUTTON> 
 
   08  
 
   09  <BUTTON android:id="@+id/Button02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="过火 "> 
 
   10  </BUTTON> 
 
   11  
 
   12  <BUTTON android:id="@+id/Button03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="别怕我伤心 "> 
 
   13  </BUTTON> 
 
   14  
 
   15  <BUTTON android:id="@+id/Button04" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="从开始到现在 "> 
 
   16  </BUTTON> 
 
   17  
 
   18  <BUTTON android:id="@+id/Button05" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="信仰 "> 
 
   19  </BUTTON> 
 
   20  
 
   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文件：

 
   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中给整个应用程序设置主题：

 
   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> 
 
   10  
 
   11    </APPLICATION> 
 
   12    <USES android:minsdkversion="8" -sdk /> 
 
   13  
 
   14</MANIFEST>

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

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

kbest

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Android中的主题和风格学习指南

一、引言：Android设备和IOS设备的界面风格比较起来，说实话Android的默认UI组件最多只是可以看，绝对比不上Iphone默认组件那么好看和耐看。不过Android系统的开放性很高，我们可以从头到尾改变的它界面显示。下面两张图就是安装了Open Home这个软件后，Home界面的显示效果： Open Home 还带有抽屉效果^_^好吧，我承认这个界面也谈不上好看和
复制链接

扫一扫