Android 兼容性水波紋效果實現：從 Selector 到 Ripple 的演進

效果預覽

實現 Material Design 風格的點擊水波紋反饋，兼容 Android 5.0 (API 21) 以下版本。

核心原理：資源目錄分級

Android 會根據運行版本自動選擇對應目錄下的資源：

• drawable/：API < 21 使用的傳統 Selector
• drawable-v21/：API ≥ 21 使用的 RippleDrawable

傳統 Selector 實現 (drawable/selector_bg.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- 按下狀態 -->
    <item android:state_pressed="true" android:drawable="@color/menu_selected" />
    <!-- 默認狀態：透明 -->
    <item android:drawable="@android:color/transparent" />
</selector>

Ripple 實現 (drawable-v21/selector_bg.xml)

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="https://schemas.android.com/apk/res/android"
        android:color="@color/menu_selected">
    <!-- android:color 定義水波紋顏色 -->
    <!-- 可選：<item android:drawable="@color/background" /> 定義背景 -->
</ripple>

關鍵注意點

1. 不要在 ripple 中添加透明 item 作為背景：會導致水波紋無法顯示。
2. 背景色單獨設置：在佈局 XML 中通過 android:background 設置 View 背景，ripple 僅負責點擊動畫。
3. 色值建議：android:color 使用半透明色值（如 #33000000）效果更自然。

進階用法：帶邊界的水波紋

<ripple xmlns:android="https://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <solid android:color="@android:color/white" />
        </shape>
    </item>
    <item android:drawable="@color/background_color" />
</ripple>

通過 mask 限制水波紋顯示範圍，實現圓角矩形、圓形等裁剪效果。

總結

利用資源目錄分級機制，零代碼實現全版本兼容的水波紋反饋。API 21+ 享受豐富動畫，舊版本優雅降級為顏色變化，是 Android UI 適配的經典最佳實踐。