shape的xml用法


<RelativeLayout 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:background="@drawable/btn_selector"-->    
<Button 
android:id="@+id/Button1"        
android:layout_width="wrap_content"        
android:layout_height="wrap_content"        
android:layout_centerInParent="true"        
android:background="@drawable/btn_selector"         
android:text="@string/hello_world" /> 
</RelativeLayout>

drawabel下创建一个selector的xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">     
<!-- Button正常状态下的背景 -->    
<item android:drawable="@drawable/btn_bg_normal" 
android:state_pressed="false"/>    
<!-- Button按下时的背景 -->   
<item android:drawable="@drawable/btn_bg_pressed" 
android:state_pressed="true"/>
</selector>

在drawable 目录下新建两个 shape文件分别是btn_bg_normal.xml,和btn_bg_pressed.xml文件

btn_bg_normal.xml


<?xml version="1.0" encoding="utf-8"?>

<!-- 按钮正常的时候的背景 -->

<!-- shape的默认形状是rectangle，还有oval(椭圆),line（线）,ring（圆环），我就用过rectangle,其他的大家可以试一试 -->

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 矩形的圆角弧度 -->

    <corners android:radius="10dp" />

    <!-- 矩形的填充色 -->

    <solid android:color="#FF4081" />

    <!-- 矩形的边框的宽度,每段虚线的长度，和两段虚线之间的颜色和颜色 -->

    <stroke

        android:width="1dp"

        android:dashWidth="8dp"

        android:dashGap="4dp"

        android:color="#4eb621" />

</shape>

btn_bg_pressed.xml


<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 矩形的圆角弧度 -->

    <corners android:radius="10dp" />

    <!-- 矩形的填充色 -->

    <solid android:color="#3F51B5" />

    <!-- 矩形的边框的宽度,每段虚线的长度，和两段虚线之间的颜色和颜色 -->

    <stroke

        android:width="1dp"

        android:color="#4eb621"

        android:dashGap="4dp"

        android:dashWidth="8dp" />

</shape>

注意 stroke 是指shape的边界线；

gradient是渐变线的api


angle：角度，当 android:type=“linear”时有效 ，亿45度为单位，逆时针方向旋转

centerX：Float。渐变色中心的 X 相对位置（ 0-1.0 ）。当 android:type=“linear”时无效 

centerY：Float。渐变色中心的 Y 相对位置（ 0-1.0 ）。当 android:type=“linear”时无效 

centerColor：color。可选的颜色，出现在 start 和 end 颜色之间。 

gradientRadius：Float。渐变色的半径。当 android:type=“radial” 时有效。 

startcolor：开始的颜色 

endcolor：结束的颜色 

type：渐变色的样式。有效值为： 

“linear”：线性渐变，默认值 

“radial”：环形渐变。 start 颜色是处于中间的颜色 

“sweep”：扇形渐变 

useLevel：Boolean。“ true ”表示可以当作 LevelListDrawable 使用（没搞懂是什么意思）

如果我们想给一个TextView 添加这样一个背景，一层背景是白色的，另外一层是蓝色的但是只露出来一部分，就可以使用layer-list实现。


<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    

	<!--最近的项目中需要用到多个图层堆叠到一块儿，就研

	究了一下android中的layer-list。android中的layer-list

	就是用来多个图层堆叠显示的。 -->

    <item>

      <shape > <!-- 第一层的颜色为蓝色 -->

          <solid android:color="@color/blue"/>

      </shape>

    </item>

    

    <!-- 第二层的颜色，也就是最上面的一层，因为第二层相对于

    View的底部上移两个dp所以第一层会露出一个dp的黑色所以

         给人一种只有底部边框的假象 -->

    <item android:bottom="2dip">

        <shape>

            <solid android:color="@color/white"/>

        </shape>

    </item>

 

</layer-list>


<?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/colorPrimary" />

        </shape>

    </item>

 

    <!--背景上面的图层 让底部的背景露出来4dp的高度-->

    <item android:bottom="4dp">

        <shape android:shape="rectangle">

            <solid android:color="@color/colorAccent" />

        </shape>

    </item>

</layer-list>

效果图：


<?xml version="1.0dip" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

	

    <item>

        <bitmap android:src="@drawable/ic_launcher"

            android:gravity="center"/>

    </item>

    <item android:left="10dip" android:top="10dip">

        <bitmap android:src="@drawable/ic_launcher"

            android:gravity="center"/>

    </item>

    <item android:left="20dip" android:top="20dip">

        <bitmap android:src="@drawable/ic_launcher"

            android:gravity="center"/>

    </item>

    <item android:left="30dip" android:top="30dip">

        <bitmap android:src="@drawable/ic_launcher"

            android:gravity="center"/>

    </item>

 

</layer-list>

效果图片

总结：

1、corners定义四个弧度：

radius 设置4个角的弧度、topLeftRadius设置左上角的弧度、topRightRadius设置右上角的弧度、bottomLeftRadius设置左下角的弧度、bottomRightRadius设置右下角的弧度

2、gradient渐变色填充

angle 渐变方向，逆时针

startColor 开始渐变色

centerColor 中间渐变色

endColor 最终渐变色

type 渐变的样式【linear' 线性】【radial默认是从中心开始的环形渐变效果】

gradientRadius 渐变的半径，只有type=radial有效

centerX 渐变开始的中心店x相对坐标（0-1.0），对type=linear有效

centerY渐变开始的中心店Y相对坐标（0-1.0），对type=linear有效

3、padding定义四个位置的内边距

left|top|right|bottom

4、size 定义图形的大小

5、solid 单色填充，里面只有一个color属性

6、stroke 为图形绘制边框

width 边框线的厚度

color 边框线的颜色

dashWidth 虚线的长度

dashGap 虚线之间的距离

猜你喜欢