打造炫酷的Android按鈕

一、按鈕樣式的定製

Android系統自帶的按鈕樣式十分單調，如果想要打造炫酷的按鈕，我們就需要自己來進行樣式的定製。在Android中，我們可以通過shape和selector兩種方式來實現按鈕的自定義樣式。

1、使用shape定義按鈕的外觀

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="270"
        android:startColor="#FF00FF"
        android:endColor="#00FFFF" />
    <corners android:radius="15dp" />
    <size
        android:width="200dp"
        android:height="60dp" />
</shape>

在shape中，我們可以定義按鈕的形狀、邊框、填充顏色等屬性，以期實現自己想要的按鈕樣式

2、使用selector定義按鈕的狀態

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <gradient
                android:angle="270"
                android:startColor="#00FFFF"
                android:endColor="#FF00FF" />
            <corners android:radius="15dp" />
            <size
                android:width="200dp"
                android:height="60dp" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape>
            <gradient
                android:angle="270"
                android:startColor="#FF00FF"
                android:endColor="#00FFFF" />
            <corners android:radius="15dp" />
            <size
                android:width="200dp"
                android:height="60dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:angle="270"
                android:startColor="#FF0000"
                android:endColor="#FFFF00" />
            <corners android:radius="15dp" />
            <size
                android:width="200dp"
                android:height="60dp" />
        </shape>
    </item>
</selector>

在selector中，我們可以定義按鈕在普通狀態、按下狀態、焦點狀態等各種狀態下的樣式。通過組合shape和selector，我們可以打造出各種炫酷的按鈕樣式，讓應用更加個性化。

二、按鈕動畫的實現

除了外觀樣式，按鈕的動畫效果同樣可以讓我們的應用更加生動、有趣。Android中提供了很多UI動畫效果，我們可以直接使用這些效果，也可以自定義各種動畫效果。

1、使用系統UI動畫實現按鈕動畫

// 載入動畫資源
Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_scale);
// 給按鈕添加動畫
button.startAnimation(animation);

Android提供了豐富的系統UI動畫效果，我們可以通過AnimationUtils.loadAnimation方法來載入這些動畫資源，並使用startAnimation方法為按鈕添加動畫效果。

2、自定義按鈕動畫效果

// 自定義ScaleAnimation實現按鈕縮放動畫
ScaleAnimation animation = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(1000);
animation.setRepeatCount(Animation.INFINITE);
animation.setRepeatMode(Animation.REVERSE);
button.setAnimation(animation);

除了系統UI動畫，我們還可以自己實現各種自定義動畫。在上面的代碼中，我們自定義了一個縮放動畫，即按鈕在1s內從正常大小縮放到1.5倍大小，然後再縮放回來。通過setDuration、setRepeatCount和setRepeatMode來設置動畫時長、重複次數和重複方式。

三、按鈕事件的響應

按鈕的事件響應是Android應用最常用的一種用戶交互方式。在Android中，按鈕事件的響應可以通過為按鈕添加OnClickListener或OnLongClickListener介面實現。

1、實現OnClickListener介面

// 為按鈕添加點擊事件監聽器
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 實現點擊事件響應函數
        Toast.makeText(getApplicationContext(), "您點擊了按鈕", Toast.LENGTH_SHORT).show();
    }
});

在OnClickListener介面中，我們可以實現按鈕被點擊時的響應函數，響應函數中可以編寫我們想要實現的業務邏輯，如彈出Toast提示、跳轉到其他界面等。

2、實現OnLongClickListener介面

// 為按鈕添加長按事件監聽器
button.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(View v) {
        // 實現長按事件響應函數
        Toast.makeText(getApplicationContext(), "您長按了按鈕", Toast.LENGTH_SHORT).show();
        // 返回true表示已消費事件，不再向下傳遞
        return true;
    }
});

在OnLongClickListener介面中，我們可以實現按鈕被長按時的響應函數，返回值表示是否消費該事件，如果返回true，表示已消費事件，不再向下傳遞；如果返回false，則該事件繼續向下傳遞。

完整代碼

下面是一個完整的打造炫酷按鈕的示例代碼，包含按鈕樣式定製、動畫實現、事件響應等功能。代碼中使用了shape和selector定義按鈕樣式，使用系統UI動畫和自定義動畫實現按鈕動畫效果，使用OnClickListener和OnLongClickListener介面實現按鈕事件響應。

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/selector_custom_button"
        android:text="炫酷按鈕"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:textStyle="bold" />

</RelativeLayout>

// shape定義按鈕樣式：res/drawable/shape_custom_button.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="270"
        android:startColor="#FF00FF"
        android:endColor="#00FFFF" />
    <corners android:radius="15dp" />
    <size
        android:width="200dp"
        android:height="60dp" />
</shape>

// selector定義按鈕狀態：res/drawable/selector_custom_button.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <gradient
                android:angle="270"
                android:startColor="#00FFFF"
                android:endColor="#FF00FF" />
            <corners android:radius="15dp" />
            <size
                android:width="200dp"
                android:height="60dp" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape>
            <gradient
                android:angle="270"
                android:startColor="#FF00FF"
                android:endColor="#00FFFF" />
            <corners android:radius="15dp" />
            <size
                android:width="200dp"
                android:height="60dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:angle="270"
                android:startColor="#FF0000"
                android:endColor="#FFFF00" />
            <corners android:radius="15dp" />
            <size
                android:width="200dp"
                android:height="60dp" />
        </shape>
    </item>
</selector>

// 自定義ScaleAnimation實現按鈕縮放動畫：res/anim/anim_scale.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.0"
    android:toXScale="1.5"
    android:fromYScale="1.0"
    android:toYScale="1.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000"
    android:repeatCount="infinite"
    android:repeatMode="reverse" />

// MainActivity.java
public class MainActivity extends AppCompatActivity {

    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = findViewById(R.id.button);

        // 為按鈕添加點擊事件監聽器
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 實現點擊事件響應函數
                Toast.makeText(getApplicationContext(), "您點擊了按鈕", Toast.LENGTH_SHORT).show();
            }
        });

        // 為按鈕添加長按事件監聽器
        button.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                // 實現長按事件響應函數
                Toast.makeText(getApplicationContext(), "您長按了按鈕", Toast.LENGTH_SHORT).show();
                // 返回true表示已消費事件，不再向下傳遞
                return true;
            }
        });

        // 使用系統UI動畫實現按鈕動畫
        // Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_scale);
        // button.startAnimation(animation);

        // 自定義縮放動畫實現按鈕動畫
        ScaleAnimation animation = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        animation.setDuration(1000);
        animation.setRepeatCount(Animation.INFINITE);
        animation.setRepeatMode(Animation.REVERSE);
        button.setAnimation(animation);
    }
}

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/308285.html

打造炫酷的Android按鈕

一、按鈕樣式的定製

二、按鈕動畫的實現

三、按鈕事件的響應

完整代碼

相關推薦

發表回復