draw9patch工具的使用，按钮的背景和文字颜色的美化

一个Android应用的好坏可能对于我们开发人员来说主要考虑其运行效率和性能，可是对于用户来说，一般情况下他们注重的是应用的外表，也就是时一个应用能否成功的

让各大用户青睐，其应用的的外貌起着至关重要的觉得。因此，今天我们来探讨一下如何使我们的应用中的按钮更加美观，让用户的体验效果更好。

Button按钮在应用中是很广泛的，使用起来也比较容易，可以通过为按钮制定android:background属性为按钮增加背景颜色或背景图片，如果将背景图片设为不规则的背景图片，

则可以开发出各种不规则形状的按钮。

如果只是使用普通的按钮背景颜色或背景图片，那么这些背景是固定的，不会随着用户的动作而改变。如果需要让按钮的背景颜色，背景图片随着用户动作动态改变，则可以考虑使用自定义Drawable对象来实现。

按钮的背景和文字颜色：

为了定义图片随用户动作改变的按钮，可以考虑使用xml资源文件来定义Drawable对象，再将Drawable对象设为Button的android:background属性值，或设为ImageButton的android:src属性值。

Draw9patch工具的介绍及其使用：

当按钮的内容太多时，Andriod会自动缩放整张图片，以保证背景图片能覆盖整个按钮。但这种缩放整张图片的效果可能并不好。可能需要的情况是我们只想缩放图片中德某个部分，这样才能保证按钮的视觉效果。

为了实现只能缩放图片中德某个部分的效果，我们需要借助9patch图片来实现。9patch图片是一种特殊的PNG图片，这种图片以.9.png结尾，它在原始图片四周各添加一个宽度为1像素的线条，这4条线就决定了该图片的缩放规则，内容显示规则。

Android为制作9patch图片提供了draw9patch工具，该工具位于Android sdk安装路径的tools目录下，进入该目录双击draw9patch.bat文件，即可启动该工具。

draw9patch工具的使用效果图：

我们将处理前后的图片都导入工程中：

代码演示为处理的图片和使用draw9patch处理后的图片的效果图：

activity.main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" 
    android:layout_margin="10dp">

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:text="系统默认的按钮" />
    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:text="有背景颜色的系统按钮" 
        android:background="@drawable/blue"/>
    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/blue2"
        android:layout_marginTop="10dp"
        android:textSize="12sp"
        android:text="drawable9patch工具处理后有背景色按钮" />
</LinearLayout>

第二个按钮 最开始看到的图片角落有圆角的效果，现在图片显示出来看起来是这样子的，不好看。 是因为图片本来就这么大，但是你现在呈现的时候要和整个屏的宽度那么大，所以就把 这个图片做了一个拉伸的效果。就会出现像第二个按钮那样的效果看起来很难看。

Android里有个工具可以帮我们把图片做拉伸效果， 它可以让我们在横向上面中间进行拉伸，两侧不会发生变化。就是第三个按钮的效果。

selector选择器，shape修饰按钮：

运行效果图分析：

当我们点击第一个按钮，按下去的时候，系统默认按下去的背景颜色是蓝色。当我们点击第四个按钮的时候，我们使用了自定义的选择器select_btn.xml，使按钮按下去的颜色为蓝色。详细实现请看代码：

select_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- android:state_pressed按钮被按下，android:drawable当前状态显示的图片 -->
    <item android:state_pressed="true" android:drawable="@drawable/blue2"/>
    <!--默认的效果  -->
	<item android:drawable="@drawable/black2"></item>
</selector>

colors.xml

注意res/values下的文件的命名规则

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
</resources>

shape_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 矩形的背景色 -->
    <solid android:color="@color/green"/>
    <!-- 圆角的大小 -->
    <corners android:radius="5dp"/>
</shape>

以上只是简单的学习了一下按钮选择器selector,修饰带圆角的矩形按钮shape，使用draw9patch工具的使用。

关于selector和shape的基本用法，请查看这位大神的总结，我也去好好膜拜一下：

selector和shape的基本用法