android应用开发之配置渐变色

【需求】:

部分布局文件需要自定义一些七彩的颜色

【策略】:

在drawable中新建一个渐变色的**.xml文件,通过android:background="@drawable/**来使用

【实施】:


<?xml version="1.0" encoding="utf-8"?>
<!-- 这里主要是设置形状,如长方形android:shape="rectangle" -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <!--
    	圆角
    android:radius为角的弧度,值越大角越圆。这个貌似是全部一致的,也可以设置不一致的,四个角分别设置
    	android:topRightRadius="20dp"    右上角  
        android:bottomLeftRadius="20dp"    右下角  
        android:topLeftRadius="1dp"    左上角  
        android:bottomRightRadius="0dp"    左下角
        0dp无效在2.2以及之前版本是OK的,如果实在不行就设置1dp效果相差不大

    -->

    <corners android:radius="4dip" />

    <!-- 主要配置边距 -->

    <padding
        android:bottom="10dip"
        android:left="6dip"
        android:right="6dip"
        android:top="10dip" />
    <!--
		渐变 。主要是配置起点颜色、终点颜色、中间点的坐标、中间点的颜色、渐变角度(90度为上下渐变,0为左右渐变)
android:startColor和android:endColor分别为起始和结束颜色;
android:angle是渐变角度,必须为45的整数倍;
渐变的默认模式是线性渐变,即:android:type="linear",改值可以修改为径向渐变(即:radial),不过就径向渐变需要设置半径,如:android:gradientRadius="50"
还可以设置android:centerColor,貌似是中间向两边改变的

    -->

    <gradient
        android:endColor="#323336"
        android:startColor="#323336" />
    <!--
   		 描边 
    可以设置边框的宽度,颜色,还可以设置虚线:
    	横线宽度:android:dashWidth="5dp"  横线之间空的距离:android:dashGap="3dp"
    -->

    <stroke
        android:width="1dip"
        android:color="#ffffff" />
    <!--
    	还有实心等效果
	solid android:color="#ff9d77"
    -->

</shape>

【应用场景】:

一个button,点击的时候出现颜色变化(这个是网络摘抄)

button属性

<Button  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:text="TestShapeButton"  
    android:background="@drawable/button_selector"  
    />  


button_selector.xml:

<?xml version="1.0" encoding="utf-8"?>  
<selector  
    xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:state_pressed="true" >  
        <shape>  
            <!-- 渐变 -->  
            <gradient  
                android:startColor="#ff8c00"  
                android:endColor="#FFFFFF"  
                android:type="radial"  
                android:gradientRadius="50" />  
            <!-- 描边 -->  
            <stroke  
                android:width="2dp"  
                android:color="#dcdcdc"  
                android:dashWidth="5dp"  
                android:dashGap="3dp" />  
            <!-- 圆角 -->  
            <corners  
                android:radius="2dp" />  
            <padding  
                android:left="10dp"  
                android:top="10dp"  
                android:right="10dp"  
                android:bottom="10dp" />  
        </shape>  
    </item>  
    <item android:state_focused="true" >  
        <shape>  
            <gradient  
                android:startColor="#ffc2b7"  
                android:endColor="#ffc2b7"  
                android:angle="270" />  
            <stroke  
                android:width="2dp"  
                android:color="#dcdcdc" />  
            <corners  
                android:radius="2dp" />  
            <padding  
                android:left="10dp"  
                android:top="10dp"  
                android:right="10dp"  
                android:bottom="10dp" />  
        </shape>  
    </item>  
    <item>        
        <shape>  
            <solid android:color="#ff9d77"/>  
            <stroke  
                android:width="2dp"  
                android:color="#fad3cf" />  
            <corners  
                android:topRightRadius="5dp"  
                android:bottomLeftRadius="5dp"  
                android:topLeftRadius="0dp"  
                android:bottomRightRadius="0dp"  
            />  
            <padding  
                android:left="10dp"  
                android:top="10dp"  
                android:right="10dp"  
                android:bottom="10dp" />  
        </shape>  
    </item>  
</selector>


效果图如下:

一般状态:

android应用开发之配置渐变色_第1张图片

获取焦点:

android应用开发之配置渐变色_第2张图片

按下状态:


android应用开发之配置渐变色_第3张图片





你可能感兴趣的:(android应用开发之配置渐变色)