Android中实现自定义按钮

浏览数：26 / 时间：2015年06月11日

项目中有时候考虑到美观，需要自定义Button。

1、在项目的res文件夹中新建文件夹drawable并新建shapes.xml(实现button的外形和颜色的资源)

2、在mainactivity.xml的button属性中设置 android:background="@drawable/shapes"就可以了

圆角按钮、未点击和点击的颜色变化。

效果如下：

技术分享

shapes.xml

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

    
     <!-- View点击时的初始化颜色
      gradient渐变 
    android:angle  渐变角度，0从上到下，90表示从左到右，数值为45的整数倍默认为0；
    android:startColor  起始颜色
    android:endColor  结束颜色             
    android:type  渐变的样式 liner线性渐变 radial环形渐变 sweep
    View的大小 size 
    corners  圆角    -->
    <item android:state_pressed="true">
        <shape>
            <gradient android:angle="270" android:endColor="#308014" android:startColor="#308014" />

            <size android:height="60dp" android:width="120dp" />

            <corners android:radius="8dp" />
        </shape>
     </item>
    <!-- View未点击时初始化颜色-->
    <item>
        <shape>
            <gradient android:angle="270" android:endColor="#32CD32" android:startColor="#32CD32" />

            <size android:height="60dp" android:width="120dp" />

            <corners android:radius="8dp" />
        </shape>
   </item>

</selector>

mainactivity.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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <Button
        android:id="@+id/stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/start"
        android:layout_alignBottom="@+id/start"
        android:layout_marginLeft="30dp"
        android:layout_toRightOf="@+id/start"
        android:text="stop"
android:background="@drawable/shapes"/>

    <Button
        android:id="@+id/unbind"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/bind"
        android:layout_alignBottom="@+id/bind"
        android:layout_alignLeft="@+id/stop"
        android:text="unbind" 
        android:background="@drawable/shapes"/>

    <Button
        android:id="@+id/start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginLeft="17dp"
        android:layout_marginTop="108dp"
        android:background="@drawable/shapes"
        android:text="start"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/bind"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/start"
        android:layout_below="@+id/start"
        android:layout_marginTop="43dp"
        android:background="@drawable/shapes"
        android:text="bind" />

</RelativeLayout>