Android之用layer-list,shape,selector画各种背景

1.Shape

简介

作用:XML中定义的几何形状

位置:res/drawable/文件的名称.xml

使用的方法:

Java代码中:R.drawable.fileName

XML中:android:background="@drawable/fileName"

或:android:src="@drawable/fileName"

属性

<shape> android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectagle矩形,oval椭圆,line水平直线,ring环形

<shape>中子节点的常用属性:

<gradient> 渐变

android:startColor

起始颜色

android:endColor

结束颜色

android:angle

渐变角度,0从左到右,90表示从下到上,数值为45的整数倍,默认为0;

android:type

渐变的样式 liner线性渐变 radial环形渐变 sweep

<solid > 填充

android:color

填充的颜色

<stroke >描边

android:width

描边的宽度

android:color

描边的颜色

android:dashWidth

表示'-'横线的宽度

android:dashGap

表示'-'横线之间的距离

<corners >圆角

android:radius

圆角的半径 值越大角越圆

android:topRightRadius

右上圆角半径

android:bottomLeftRadius

右下圆角角半径

android:topLeftRadius

左上圆角半径

android:bottomRightRadius

左下圆角半径

<padding >填充

android:bottom="1.0dip"

底部填充

android:left="1.0dip"

左边填充

android:right="1.0dip"

右边填充

android:top="0.0dip"

上面填充

2.Selector

简介

根据不同的选定状态来定义不同的现实效果

分为四大属性:

android:state_selected 是选中

android:state_focused 是获得焦点

android:state_pressed 是点击

android:state_enabled 是设置是否响应事件,指所有事件

另:

android:state_window_focused 默认时的背景图片

引用位置:res/drawable/fileName

使用的方法:

Java代码中:R.drawable.fileName

XML中:android:background="@drawable/fileName"

或:android:src="@drawable/fileName"

3.layer-list

简介

作用:将多个item叠层

Java代码中:R.drawable.fileName

XML中:android:background="@drawable/fileName"

或:android:src="@drawable/fileName"

说完了它们的基本用简介和属性,下面来直接列几个例子:

white_bg_solid.xml 画的是一个叠层后显示为:四个圆角的一张背景图

[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"; >

<!--第一层  连框颜色值 -->  
<item>  
    <shape>  
        <solid android:color="#B2B2B2" />  
        <corners  
            android:bottomLeftRadius="6dp"  
            android:bottomRightRadius="6dp"  
            android:topLeftRadius="6dp"  
            android:topRightRadius="6dp" />  
    </shape>  
</item>  
<!-- 第二层  主体背景颜色值 -->  
<item android:bottom="1dp">  
    <shape>  
        <solid android:color="@color/white" />  
        <corners  
            android:bottomLeftRadius="6dp"  
            android:bottomRightRadius="6dp"  
            android:topLeftRadius="6dp"  
            android:topRightRadius="6dp" />  
        <padding  
            android:bottom="6dp"  
            android:left="6dp"  
            android:right="6dp"  
            android:top="6dp" />  
    </shape>  
</item>  

</layer-list>

white_bg_solid_pressed.xml 跟上面的一样,只不过颜色变了,用来做点击色
[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"; >

<!-- 连框颜色值 -->  
<item>  
    <shape>  
        <solid android:color="#B2B2B2" />  
        <corners  
            android:bottomLeftRadius="6dp"  
            android:bottomRightRadius="6dp"  
            android:topLeftRadius="6dp"  
            android:topRightRadius="6dp" />  
    </shape>  
</item>  
<!-- 主体背景颜色值 -->  
<item android:bottom="1dp">  
    <shape>  
        <solid android:color="#DCDCDC" />  
        <corners  
            android:bottomLeftRadius="6dp"  
            android:bottomRightRadius="6dp"  
            android:topLeftRadius="6dp"  
            android:topRightRadius="6dp" />  
        <padding  
            android:bottom="6dp"  
            android:left="6dp"  
            android:right="6dp"  
            android:top="6dp" />  
    </shape>  
</item>  

</layer-list>

white_bg_top_solid.xml 画的是叠层后显示为:上面两个角为圆角,下面两个直角的一张背景图 ,细节第三层的android:bottom="0.7dp"(底边立体效果)
[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"; >

<!-- 第一层 -->  
<item>  
    <shape>  
        <solid android:color="@color/white" />  
        <corners  
            android:bottomLeftRadius="6dp"  
            android:bottomRightRadius="6dp"  
            android:topLeftRadius="6dp"  
            android:topRightRadius="6dp" />  
    </shape>  
</item>  
<!-- 第二层 -->  
<item android:top="13dp">  
    <shape>  
        <solid android:color="@color/space_bg" />  
    </shape>  
</item>  
<!-- 第三层 -->  
<item android:top="12dp"  
    android:bottom="0.7dp">  
    <shape>  
        <solid android:color="@color/white" />  
        <padding   
            android:left="6dp"  
            android:top="6dp"  
            android:right="6dp"  
            android:bottom="6dp"/>  
    </shape>  
</item>  

</layer-list>

white_bg_bottom_solid.xml 画的是叠层后显示为:上面两个角为直角,下面为两个圆角的一张背景图
[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"; >

<!-- 第一层 -->  
<item>  
    <shape>  
        <solid android:color="#B2B2B2" />  
        <corners  
            android:bottomLeftRadius="6dp"  
            android:bottomRightRadius="6dp"  
            android:topLeftRadius="6dp"  
            android:topRightRadius="6dp" />  
    </shape>  
</item>  
<!-- 第二层 -->  
<item android:bottom="12dp">  
    <shape>  
        <solid android:color="@color/white" />  
    </shape>  
</item>  
<!-- 第三层 主体背景颜色值 -->  
<item android:bottom="1dp">  
    <shape>  
        <solid android:color="@color/white" />  
        <corners  
            android:bottomLeftRadius="6dp"  
            android:bottomRightRadius="6dp"  
            android:topLeftRadius="6dp"  
            android:topRightRadius="6dp" />  
        <padding  
            android:bottom="6dp"  
            android:left="6dp"  
            android:right="6dp"  
            android:top="6dp" />  
    </shape>  
</item>  

</layer-list>

edit_text._layer.xml 画的是带有带有钩子的文本输入框背景图,类似于微信输入框的效果
[html] view plain copy
<?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="@color/green" />    
    </shape>    
</item>    

<item android:bottom="6dp">    
    <shape android:shape="rectangle" >    
        <solid android:color="@color/white" />    
    </shape>    
</item>    

<!-- 第三层 通过叠层 左下右间距 画钩子 -->
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp">
<shape android:shape="rectangle" >
<solid android:color="@color/white" />
</shape>
</item>

</layer-list>

white_bg_solid_selector.xml

[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"; >
<item android:state_pressed="true" android:drawable="@drawable/white_bg_solid_pressed"/>
<item android:drawable="@drawable/white_bg_solid"/>
</selector>

最终测试布局

test.xml

[html] view plain copy
<?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"
android:background="@color/space_bg" >

<LinearLayout   
    android:orientation="vertical"  
    android:layout_width="match_parent"  
    android:layout_height="100dp"  
    android:layout_margin="10dp"  
    android:background="@drawable/white_bg_solid_selector">  
    <EditText  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:background="@drawable/edit_text_layer"  
        android:hint="@null"  
        android:padding="4dp"/>  
</LinearLayout>  
<View   
    android:layout_width="match_parent"  
    android:layout_height="100dp"  
    android:layout_margin="10dp"  
    android:background="@drawable/white_bg_top_solid"/>   
<View   
    android:layout_width="match_parent"  
    android:layout_height="100dp"  
    android:layout_margin="10dp"  
    android:background="@drawable/white_bg_bottom_solid"/>  

</LinearLayout>

好了,例子说完了,想要画什么样的背景图,我们都通过layer-list叠层来拼成背景图,就可以实现我们想要的背景图了。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复