自定义控件的背景有很多种方式,今天讲下使用在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" />
好了,希望对大家有所帮助。