Android自定义资源之圆角按钮、变色按钮、渐变线条、虚线等等

1.android shape

使用方法

      a.在res下新建drawable文件夹，然后新建一个xml文件，并编写对应代码

      b.在布局文件中使用background 或 src 调用该drawable资源

效果

1.1自身属性

        rectangle（矩形）、oval（椭圆型）、line（线性）、ring（环形） 默认为矩形

        第一个

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:centerColor="#0f0"
        android:endColor="#00f"
        android:startColor="#f00" />
</shape>

        第二个和第三个是一样的，只是在布局控件中设置的宽高不同而已

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <gradient
        android:endColor="#0f0"
        android:startColor="#f00" />
</shape>

        第四个

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="10dp"
    android:shape="ring"
    android:thickness="20dp"
    android:useLevel="false" >

    <gradient
        android:endColor="#00f"
        android:startColor="#f00" />

</shape>

       innerRadius 为内环半径

       thickness 环的宽度

       userLevel 默认值为false 只是在环形状态下使用

       第五个

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >
    <stroke
        android:dashGap="10px"
        android:dashWidth="10px"
        android:width="1dp"
        android:color="#0f0" />
</shape>

        dashGap 虚线中间隔的宽度

        dashWidth 虚线中实线的宽度

        width 虚线的厚度

android:layout_height的值必须大于android:width的值，否则虚线不会显示。如果不设置，默认android:width为0

在布局控件做需加上 android:layerType="software" 否则失效   

     第六个 渐变线

     使用的shape 代码就是矩形的shape代码类容，只是高设置为1即可

     1.2 子标签属性 先看效果图 圆角按钮即圆角边框

      对应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="#f00"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<corners android:bottomLeftRadius="10dp"/>
	<solid android:color="#0f0"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners
        android:bottomLeftRadius="10dp"
        android:topRightRadius="10dp" />
    <solid android:color="#00f" />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
    <gradient
        android:centerColor="#0f0"
        android:endColor="#00f"
        android:startColor="#f00" />
</shape>

         corners  定义圆角

    <corners
        android:radius="10dp"     \\定义全部圆角的半径
        android:bottomLeftRadius="10dp"  \\左下方圆角
        android:bottomRightRadius="10dp" \\左下方圆角
        android:topLeftRadius="10dp"     \\左下方圆角
        android:topRightRadius="10dp"    \\左下方圆角
        />

         solid  定义内部颜色

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

        gradient 设置颜色变化

    <gradient
        android:type  //设置渐变类型 linear（线性渐变）、radial（放射性渐变）、sweep（扫描式渐变）
        android:angle="10" //渐变角度
        android:gradientRadius="100dp" //渐变的半径
        android:startColor="#f00"  //设置头部颜色
        android:centerColor="#0f0" //设置中部颜色
        android:endColor="#00f"    //设置尾部颜色
        />

        stroke 设置描边类容

    <stroke android:width="20dp"
        android:color="#f0f"
        android:dashWidth="10dp"
        android:dashGap="1dp"/>

二.android selector 选择器

     用法与shape类似，在布局文件中调用drawable资源

     android:state_focused 获得焦点，true则可点击，false不可点击

     通过判断是否被选中或者被点击来切换图片或颜色

    代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#FFF"/>
    <item android:state_pressed="false" android:color="#000"/>
</selector>

    仿微信底部按钮

    原理为 RadioGroup 包含四个RadioButton 然后RadioButton调用选择器selcter资源 部分代码如下

    选择器 selecter

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/chat_press" android:state_checked="true"></item>
    <item android:drawable="@drawable/chat_normal" android:state_checked="false"></item>

</selector>

    RadioGroup

   <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/check_selctor"
            android:text="微信" />

        <!-- 剩下三个RadioButton 略 -->
    </RadioGroup>