安卓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>


           

三、使用按鈕樣式

四、結合前面知識，制作一個簡單界面

正常狀态

按下狀态

代碼

<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>

           

師承上官可程式設計 —— 陳立臣