Android学习之自定义控件背景

自定义控件的背景有很多种方式，今天讲下使用在XML中自定义背景，主要使用到<shape><layer-list><selector>等标签。

先看下效果图：

标题的背景：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#30000000" />
        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_red_light" />
        </shape>
    </item>

</layer-list>

可以看到使用了<layer-list>，<layer-list>中需要至少2个<item>，它可以按照顺序将多个<item>层叠起来，越往下的<item>显示的时候越在上层。在里面使用了<shape>标签，<shape>标签用来画图形，这里2个都是矩形，为了画标题栏的背景，上层是阴影色，下层是标题栏色，androdi:botton可以设置相对的偏移，这样能使标题栏看起来有阴影，当然现在也有属性可以设置阴影了，大家有兴趣可以查一下。

第一个按钮的效果是点击Button之后，文本的颜色会变化，怎么做到的呢？

先在工程res中新建color文件夹，然后使用<selector>标签来切换点击和不点击的颜色，如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/color_button_1_pressed" android:state_pressed="true" />
    <item android:color="@color/color_button_1_normal" android:state_pressed="false" />

</selector>

<color name="color_button_1_normal">@android:color/holo_green_dark</color>
<color name="color_button_1_pressed">@android:color/holo_green_light</color>

这样就能做到点击Button改变文本颜色。

第二个按钮的背景是采用.9图片来做的，怎么做.9有空再写，如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/img_2" android:state_pressed="true" />
    <item android:drawable="@drawable/img_1" android:state_pressed="false" />

</selector>

就是使用了使用<selector>标签来切换点击和不点击的图片。

第三个按钮就是纯粹使用<shape>来做Button的背景，如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@android:color/holo_orange_light" />
    <corners android:radius="10dp" />
    <stroke
        android:width="1dp"
        android:color="@android:color/white" />

</shape>

加了填充色、圆角和描边。

第四个按钮的背景是圆的，怎么做到的呢？也很简单，如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@android:color/holo_blue_light" />
    <size
        android:width="100dp"
        android:height="100dp" />

</shape>

这样还不行，Button的宽高必须都为wrap_content

<Button
    android:id="@+id/button_4_activity_main"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:background="@drawable/bg_button_4_activity_main"
    android:text="Button 4"
    android:textSize="16dp" />

好了，希望对大家有所帮助。

Demo地址：http://download.csdn.net/detail/qq_23940659/9472572