安卓APP按键美化——圆角按键

一、新建按钮样式文件

• 正常状态

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

    <!-- 圆角的半径 -->
    <corners android:radius="30dp"/>

    <!-- 填充颜色 -->
    <solid android:color="#00ff00"/>

</shape>

• 按下状态

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

    <!-- 圆角的半径 -->
    <corners android:radius="30dp"/>

    <!-- 填充颜色 -->
    <solid android:color="#0662f5"/>

</shape>

二、新建样式文件

定义按钮的不同状态样式，btn_selector
btn_normal（正常），btn_pressed（按下）

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

    <!-- 正常状态 -->
    <item android:drawable="@drawable/btn_normal" android:state_pressed="false"/>

    <!-- 按下状态 -->
    <item android:drawable="@drawable/btn_pressed" android:state_pressed="true"/>

</selector>

三、使用按钮样式

android:background="@drawable/btn_selector"

四、结合前面知识，制作一个简单界面

正常状态

按下状态

代码

<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/bg_shopping_menu"
    tools:context=".MainActivity" >
    
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00ff00"
        >
        
      	<TextView 
      	    android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="刷卡机"
            android:textSize="25dp"
            android:layout_marginTop="4dp"
            android:layout_marginLeft="10dp"
      	    />
        
      	
        <Button 
            android:id="@+id/zc1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="注册"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            />

        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="查询信息"
            android:layout_toLeftOf="@id/zc1"
            android:layout_marginRight="15dp"
            />
        
    </RelativeLayout>
    
    <ImageView 
        android:id="@+id/k1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/pic_rf"
        android:layout_centerInParent="true"
        />
    
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/card"
        android:layout_centerInParent="true"
        android:paddingLeft="120dp"
        />
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="刷卡"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="50dp"
        android:background="@drawable/btn_selector"
        />
    
</RelativeLayout>

师承上官可编程 —— 陈立臣