XML自定义背景图片教程-优快云博客

本文链接：https://blog.youkuaiyun.com/fanchaochaoit/article/details/51774194

本文介绍了如何通过XML来创建自定义背景图片，包括制作带有圆角的红色背景图、实现点击状态变化以及复选框背景设置。通过在drawable资源文件中创建Drawable resource，设置shape属性，调整solid、corners、stroke、padding和gradient等属性，可以实现更灵活、高效的设计效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言：当我们在做项目的时候，背景使用的地方比较多，很多情况下我们会让UI进行切图或者制作.9.png,但是有时候并不能达到很好的效果，加上沟通成本什么的，效率比较低。那么接下来就来看下如何通过xml来制作自己的背静图片。

一：首先制作一张简单的背景（带有圆角的红色背景图）

1：在drawable中右键----new-----Drawable resource file.
2: 给自己的xml文件起一个名字（姑且叫做：shape）。

3：更改selector 为 shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <padding android:left="2dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="2dp"/>
    <solid android:color="@color/red"/>
    <corners android:radius="10dp"/>
</shape>

4：此时就可以进行背景的设置了。

二：点击背景状态变化

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/gray"></solid>
            <corners android:radius="30dp"></corners>
            <stroke android:color="@color/red" android:width="3dp"></stroke>
            <padding android:left="20dp"
                android:top="30dp"
                android:right="30dp"
                android:bottom="40dp"
                ></padding>
            <gradient android:centerX="50%"
                      android:centerY="50%"
                      android:startColor="@color/gray"
                      android:centerColor="@color/red"
                      android:endColor="@color/white"
                ></gradient>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="@color/white"></solid>
            <corners android:radius="30dp"></corners>
            <stroke android:color="@color/red" android:width="3dp"></stroke>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/colorAccent"></solid>
        </shape>
    </item>
</selector>

1、2步和一中的相投

3：因为有多个状态，就使用selector

4:在里面添加item,每一个item都是一个状态，最后一个是默认状态。

5：shape中的内容介绍下吧，当然了item也可以直接是图片。

solid:内部填充色

corners:圆角的角度，值越大，角度越大

stroke:边框

padding:这个就不用说了

gradient:是渐变色。有开始颜色、结束颜色、centerX、centerY

三：复选框的背景设置:checkbox_bg

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/checkbox_check" android:state_checked="true" />
    <item android:drawable="@drawable/checkbox_uncheck" android:state_checked="false" />
</selector>

既然我们把复选框的背景都写出来了，就再费一点力气，把复选框的自定义使用讲一下吧，高手绕道，这个是自己平时遇到的。

<CheckBox
                android:id="@+id/yourId"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:background="@drawable/checkbox_bg"
                android:button="@null"
                android:clickable="false"/>

顺便讲一下吧，看到网上有人设置burron="@drawable/checkbox_bg",我也试过，没有啥问题，但是在特殊机型上会有bug(checkbox有一圈看不到的margin,姑且说是margin，因为checkbox的大小是合适的，只不过实际大于checkbox)。后来自己测试折腾解决了这个问题------也就是background设置背景，button设置@null。