坚持自己的梦想,有一天你会变得伟大
今天我们来看一看怎样优化一个界面,让它看起来更加美观。其实做应用,界面是很重要的。做界面的我们也叫做前端,那么前端都需要些什么知识呢?
首先我要介绍下style,我们来新建一个工程,布局文件有四个TextView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/style_text1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/style_text1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/style_text2"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/style_text2"
/>
</LinearLayout>
我们让第一个和第二个是一个风格,第三个和第四个是一个风格,那么我们在res/values/styles.xml中加上两个style
<style name="text_style1">
<item name="android:textColor">#FF0000</item>
<item name="android:textSize">20sp</item>
</style>
<style name="text_style2">
<item name="android:textColor">#0000FF</item>
<item name="android:textSize">40sp</item>
</style>
然后我们在TextView中引我们的style:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/style_text1"
style="@style/text_style1"
/>
注意哦,这里直接用style引,不需要android:的前缀。把四个textView都引上,我们来看下效果:
我们看到了效果,那么这样做有什么好处呢?其实好处显而易见,我们如果想要改动第一个和第二个textView的风格,那么只需要编辑style1,而且,如果我们想把第三个textView改成style1的风格,只需要引style1就行。
我们看到,这里的textView都是android:layout_width="match_parent"和android:layout_height="wrap_content",我们可以把这些相同的特性提取出来:
<style name="common_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="text_style1" parent="common_style">
<item name="android:textColor">#FF0000</item>
<item name="android:textSize">20sp</item>
</style>
<style name="text_style2" parent="common_style">
<item name="android:textColor">#0000FF</item>
<item name="android:textSize">40sp</item>
</style>
Style同样有继承这一说,不错吧,这样你就可以随心所欲控制自己的控件样式了。
我们说style是用来控制控件样式的,而Theme是用来控制窗体样式的,什么意思呢?我们来加一个TextView看看:
<TextView
android:text="@string/theme_text"
style="@style/common_style"
/>
首先我们看下我们的Theme,也许你已经发现了,在style中,系统给我们生成了一些Theme,我这里是:
<style name="AppBaseTheme" parent="android:Theme.Light">
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
我们把Theme.Light改成Theme.Black,我们再看看:
不要以为仅仅是界面变成黑色了,注意我们的Text,在Theme.Light的时候,我们的字是深灰色,而当Theme.Black的时候,我们的字是浅灰色了,当然,我们指定了颜色的字不会变化,没有指定的字会随着Theme的改变而改变。
而且通过系统自动生成的Theme,我们也看到了,Theme同样支持继承,那我们在哪里引用了Theme呢,我们到AndroidManifest中看看:
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name"
>
<intent-filter >
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
我们在application中使用了Theme,这表示这个Theme会对整个应用起作用,也就是对所有的Activity起作用,如果只想对单个Activity起作用,那就可以为单个Activity配一个Theme。注意,配置Theme的时候,我们用的是android:theme,而配置style的时候,我们直接用的是style。在这里,我们再配置一个好玩的Theme:
<style name="MainActivityTheme" parent="android:Theme.Translucent">
</style>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/MainActivityTheme"
>
我们看一下效果:
是不是看到了呢,这是一个透明背景的Theme,效果很有意思的吧。其实Theme我们也早就见到过,还记得第七节的时候,我们是怎么产生一个对话框风格的Activity的吗?
好了,但是光凭这两把刷子,我们的界面可能还是不好看,因为我们忽略了一个很重要的东西,selector,还记得第六节的登录界面么?看上去不错,但是有两个问题,第一,我们的按钮点下去没什么变化,这样用户怎么知道自己点没点呢?第二,我们的广告位上的图片被拉伸,有点变形了。这是我们经常碰到的问题,下面我们就来解决它们:
首先看selector,selector其实是一个位于res/drawable中的一个xml文件,我们创建一个button_selector.xml放在drawable-hdpi文件夹下:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/button_normal" android:state_pressed="false" />
<item android:drawable="@drawable/button_pressed" android:state_pressed="true" />
</selector>
这里引用了两张图片,我们来看下:
然后我们创建一个Button,引用selector,当然,先把透明Theme换掉
<Button
android:id="@+id/btn"
style="@style/common_style"
android:text="@string/btn_text"
android:background="@drawable/button_selector"
/>
这里我们也发现一个问题,那就是按钮背景图被拉伸了,这样的话有时候会出现一些问题,下面我们先来模拟一下:假设我们要为一个textView添加一个背景框,我们准备了图片
我们来用一下这张图:
<TextView
style="@style/common_style"
android:text="@string/test_stretch"
android:background="@drawable/textview_background"
/>
看下效果:
我们看到,TextView的背景已经被拉伸得不成样子了,也许你会说,我们换一张大点的图片不就ok了吗?但是我们要知道,我们的应用程序可能在不同大小屏幕上运行,我们用一张固定的图片很难适配所有屏幕,幸运的是,android早就考虑到了这个问题,给我们提供了一个工具:在sdk目录下,有一个tools文件夹,里面有一个draw9patch.bat文件,打开它:
把我们的图片拖进来:
这个工具的目的是在png图片周围添加一个像素的边框,用来指定图片怎样拉伸,以及文字内容区域,右边有它拉伸后的效果,我们先来感受下,我们在上面和左边画上黑线(直接用鼠标点在上面拖动就能画线,和windows画图差不多),勾选Show patches
粉色区域就是可以拉伸的范围,好,我们保存下:
然后,我们用这张图片来试下,注意要删掉原来的图片,否则会有id冲突:
我们看到,这次显示效果非常ok,这就是.9.png的好处,那么右边的黑线和下面的黑线又是干嘛的呢?其实这是规定我们文字显示区域的,我们试下好了,比如我想让文字显示在右下角:
我们看下效果:
我们看到文字到右下角去了。
好了,这节的内容讲完了,虽然还没有做出一个好看的界面,但是有了这些技巧,我们离好看的界面已经不远了,这些内容需要实践,我会在后续教程中渗透。
好了,我们来总结一下,我们学会了
1、 style,引用style,style的继承
2、 Theme,Theme的继承,透明背景的Theme
3、 Selector用法
4、 .9.png图片的用法及draw9patch工具
这节的例子在:http://download.csdn.net/detail/yeluoxiang/7364033,欢迎大家下载。