android学习笔记 自定义圆角Button

在做项目的时候要用到圆角按钮，并且点击按钮会有变色效果和Button里面的字体颜色变色的效果。

首先在res文件夹下建一个drawable文件夹,然后在该文件夹建一个shape的Android XML文件。

这是按钮没点击时的文件：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 填充 -->  
    <solid android:color="#FFFFFF" /> <!-- 定义填充的颜色值 -->  
      
    <!-- 描边 -->  
    <stroke  
        android:width="1dp"   
        android:color="#2a7784" /> <!-- 定义描边的宽度和描边的颜色值 -->  
      
    <!-- 圆角 -->  
    <corners  
        android:bottomLeftRadius="10dp"  
        android:bottomRightRadius="10dp"  
        android:topLeftRadius="10dp"  
        android:topRightRadius="10dp" /> <!-- 设置四个角的半径 -->  
      
    <!-- 间隔 -->  
    <padding  
        android:bottom="10dp"  
        android:left="10dp"  
        android:right="10dp"  
        android:top="10dp" /> <!-- 设置各个方向的间隔 --> 

</shape>

这是按钮点击后的文件：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <!-- 填充 -->  
    <solid android:color="#2a7782" /> <!-- 定义填充的颜色值 -->  
      
    <!-- 描边 -->  
    <stroke  
        android:width="1dp"   
        android:color="#2a7784" /> <!-- 定义描边的宽度和描边的颜色值 -->  
      
    <!-- 圆角 -->  
    <corners  
        android:bottomLeftRadius="10dp"  
        android:bottomRightRadius="10dp"  
        android:topLeftRadius="10dp"  
        android:topRightRadius="10dp" /> <!-- 设置四个角的半径 -->  
      
  <padding  
        android:bottom="10dp"  
        android:left="10dp"  
        android:right="10dp"  
        android:top="10dp" /> <!-- 设置各个方向的间隔 --> 
</shape>

然后在drawable建一个selector的Android XM文件，用来实现点击颜色变化效果：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
     <item android:drawable="@drawable/button_bg" android:state_pressed="false"/>
     <item android:drawable="@drawable/button_bg_press" android:state_pressed="true"/>


</selector>

最后在drawable建一个selector的Android XM文件，用来实现点击字体颜色变化效果：

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

</selector>

然后在布局文件中引用后就可以有这个效果：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.rz"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="#ffffff" >

    <com.rz.view.TopBar
        android:id="@+id/login_topBar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#2a7782"
        custom:Title="@string/l_title"
        custom:titleTextColor="#FFFFFF"
        custom:titleTextSize="7sp" >
    </com.rz.view.TopBar>

    <View
        android:id="@+id/view_layout"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_below="@id/login_topBar"
        android:background="#F0F0ed" />

    <RelativeLayout
        android:id="@+id/login_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/view_layout"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:gravity="center" >

        <RelativeLayout
            android:id="@+id/username_layout"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:gravity="center" >

            <ImageView
                android:id="@+id/userImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:background="@drawable/user"
                android:visibility="visible" />

            <EditText
                android:id="@+id/l_user"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_toRightOf="@id/userImage"
                android:background="@null"
                android:hint="@string/l_user"
                android:textColorHint="#696969" >
            </EditText>
        </RelativeLayout>

        <View
            android:id="@+id/username_view"
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_below="@id/username_layout"
            android:background="#CBCED2" />

        <RelativeLayout
            android:id="@+id/password_layout"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:layout_below="@id/username_view"
            android:gravity="center" >

            <ImageView
                android:id="@+id/pwdImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:background="@drawable/icon_password"
                android:visibility="visible" />

            <EditText
                android:id="@+id/l_password"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_toRightOf="@id/pwdImage"
                android:background="@null"
                android:hint="@string/l_password"
                android:inputType="textPassword"
                android:textColorHint="#696969" >
            </EditText>

            <ImageView
                android:id="@+id/l_show_pwd"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="@drawable/icon_eye"
                android:visibility="visible" />
        </RelativeLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_below="@id/password_layout"
            android:background="#CBCED2" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/password_layout"
            android:layout_marginTop="10dp"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/remember_pw"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left|center_vertical"
                android:background="@drawable/rememberpd" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="15dp"
                android:layout_weight="1"
                android:text="@string/l_remember_pw"
                android:textColor="#5d9aa0" />

            <TextView
                android:id="@+id/forget_pwd"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="120dp"
                android:layout_marginTop="15dp"
                android:layout_weight="0"
                android:onClick="true"
                android:text="@string/l_fogot_pw"
                android:textColor="#5d9aa0" />
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/btn_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_layout"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="41sp"
        android:orientation="vertical" >

        <Button
            android:id="@+id/login_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/btn"
            android:text="@string/l_login"
            android:textColor="@drawable/btn_color" />

        <Button
            android:id="@+id/login_sign"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="41sp"
            android:background="@drawable/btn"
            android:text="@string/sign"
            android:textColor="@drawable/btn_color" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_layout"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="50dp"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal" >

            <View
                android:layout_width="80dp"
                android:layout_height="0.5dp"
                android:layout_marginRight="5dp"
                android:background="#C9C9C9" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/other"
                android:textColor="#696969" />

            

            <View
                android:layout_width="80dp"
                android:layout_height="0.5dp"
                android:layout_marginLeft="5dp"
                android:background="#C9C9C9" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical" >

                <Button
                    android:id="@+id/weibo"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:layout_gravity="center"
                    android:background="@drawable/icon_wb_78" />
               <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="2dp"
                    android:layout_gravity="center"
                    android:text="" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="@string/weibo" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical" >

                <Button
                    android:id="@+id/weixin"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:layout_gravity="center"
                    android:background="@drawable/icon_wx_78" />
                  <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="2dp"
                    android:layout_gravity="center"
                    android:text="" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="@string/weixin" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical" >

                <Button
                    android:id="@+id/qq"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:layout_gravity="center"
                    android:background="@drawable/icon_wx_qq" />
                  <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="2dp"
                    android:layout_gravity="center"
                    android:text="" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="@string/qq" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>