Ripple簡介
Android 5.0之后google推出了Material Design,Botton默認的觸摸反饋會有水波紋漣漪效果。而這種水波紋的效果實現主要依賴于RippleDrawable。
以下會介紹Ripple的基本使用及關于控制水波紋范圍的三種處理方法,僅作點明思路及學習筆記不作具體實現。
基本使用
該效果通常以background的形式呈現,在XML中可以引用以下兩個系統自帶屬性:
- android:background="?android:attr/selectableItemBackground" 有邊界波紋
- android:background="?android:attr/··" 超出邊界波紋。該波紋由父布局繪制及限制邊界(API 21提供)
以selectableItemBackground
為例看下系統屬性的實現原理,發現該屬性的定義最終指向<item name="selectableItemBackground">@drawable/item_background_material</item>
,
查看該Drawable文件內容為:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:id="@id/mask">
<color android:color="@color/white" />
</item>
</ripple>
selectableItemBackgroundBorderless所對應Drawable內容為:
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?attr/colorControlHighlight" />
XML控制
特點:簡單,用于固定的view的處理,但靈活性不高。
目前網絡上的資料偏向于如何在xml的item下做文章,如在ripple中添加shape來限制范圍,驗證效果反而有各種小坑(誰驗誰知道)。殊不知官方早已提供解決方案。
根據官方對于RippleDrawable的說明文檔,ripple的xml標簽支持兩個屬性,分別是color
色調和radius
波紋半徑。故我們在使用時只需要新建ripple并以``android:background`的形式調用即可.
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight"
android:radius="@dimen/ripple_radius" />
自定義RippleDrawable
特點:可以動態控制,靈活性超級高,但對應的處理復雜度和難度也較高。
設置水波紋點擊效果的本質其實就是設置一個background,最為靈活的方法當然是自定義ripple,然后對目標View直接setBackground即可.
RippleDrawable繼承于Drawable
java.lang.Object
? android.graphics.drawable.Drawable
? android.graphics.drawable.LayerDrawable
? android.graphics.drawable.RippleDrawable
自定義時可以繼承RippleDrawable也可以直接繼承Drawable,兩者的本質分別是實現setRadius()
和實現setHotspotBounds()
,殊途同歸,均可以達到動態限制波紋大小的效果。系統的虛擬鍵NavigationBar就是使用的后者。
折中方案
特點:簡單,靈活適中,易上手
以selectableItemBackgroundBorderless
超出邊界范圍為基礎,以setHotspotBounds()
的方式動態控制其波紋范圍。
以下提供的是個簡易工具demo,調用時傳入對應的viewxxx.setBackground(RippleUtils. getRippleDrawable(context, targetView))
,也可以自己定義增加一個控制ripple范圍的方法:
/**
* Created by vito on 16-11-1.
*/
public class RippleUtils {
private static RippleDrawable mRipple;
private static Drawable mTileBackground;
private static Drawable newTileBackground(Context context) {
final int[] attrs = new int[]{android.R.attr.selectableItemBackgroundBorderless};
final TypedArray ta = context.obtainStyledAttributes(attrs);
final Drawable d = ta.getDrawable(0);
ta.recycle();
return d;
}
private static void setRipple(RippleDrawable tileBackground, View v) {
mRipple = tileBackground;
updateRippleSize(v);
}
//以view的中心為圓心,寬的1/4為半徑的ripple范圍
private static void updateRippleSize(View v) {
// center the touch feedback on the center of the icon, and dial it down a bit
if (v.getWidth() != 0) {
final int cx = v.getWidth() / 2;
final int cy = v.getHeight() / 2;
final int rad = (int) (v.getWidth() * .25f);
Log.d("ripple", "updateRippleSize: rad=" + rad);
mRipple.setHotspotBounds(cx - rad, cy - rad, cx + rad, cy + rad);
} else {
// TODO: 17-1-9
}
}
//對外接口
public static RippleDrawable getRippleDrawable(Context context, View view) {
mTileBackground = newTileBackground(context);
if (mTileBackground instanceof RippleDrawable) {
setRipple((RippleDrawable) mTileBackground, view);
}
return mRipple;
}
}