动手学Android之十一——界面太丑我抗议

坚持自己的梦想，有一天你会变得伟大

         今天我们来看一看怎样优化一个界面，让它看起来更加美观。其实做应用，界面是很重要的。做界面的我们也叫做前端，那么前端都需要些什么知识呢？

         首先我要介绍下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工具