ImageView覆蓋了重疊按鈕的漣漪效應

Question

我有一個ImageView作爲Relativelayout的背景，並在上面放置了一個刷新按鈕。該按鈕的漣漪效應由其下面的ImageView覆蓋。我試過FrameLayouts等，但似乎沒有任何幫助。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/nav_drawer" 
    android:layout_width="315dp" 
    android:layout_height="match_parent" 
    android:layout_gravity="start" 
    android:background="@color/sidebar_bg_color" 
    android:orientation="vertical"> 

    <ImageView 
     android:id="@+id/imageView4" 
     android:layout_width="fill_parent" 
     android:layout_height="165dp" 
     android:layout_alignParentTop="true" 
     android:src="@drawable/device_bg" /> 

    <LinearLayout 
     android:layout_width="48dp" 
     android:layout_height="48dp" 
     android:layout_alignParentEnd="true" 
     android:layout_alignParentTop="true" 
     android:background="?android:attr/selectableItemBackgroundBorderless" 
     android:clickable="true" 
     android:focusable="true" 
     android:gravity="center" 
     android:orientation="vertical"> 

     <ImageView 
      android:id="@+id/imageView3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/sidebar_refresh" /> 
    </LinearLayout> 

</RelativeLayout> 

Answer 1

隨着selectableItemBackgroundBorderless，你可以做這樣的：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/nav_drawer" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_gravity="start" 
    android:background="@android:color/holo_green_light" 
    android:orientation="vertical"> 

    <ImageView 
     android:id="@+id/imageView4" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_alignParentTop="true" 
     android:scaleType="fitXY" 
     android:src="@drawable/device_bg" /> 

    <ImageView 
     android:layout_width="48dp" 
     android:layout_height="48dp" 
     android:layout_alignParentEnd="true" 
     android:layout_alignParentTop="true" 
     android:src="@drawable/sidebar_refresh" /> 

    <LinearLayout 
     android:layout_width="48dp" 
     android:layout_height="48dp" 
     android:layout_alignParentEnd="true" 
     android:layout_alignParentTop="true"> 
     <FrameLayout 
      android:layout_weight="1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:padding="7dp" 
      android:background="@android:color/transparent"> 
      <ImageView 
       android:id="@+id/imageView3" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:clickable="true" 
       android:src="@drawable/sidebar_refresh" 
       android:alpha="0" 
       android:background="?attr/selectableItemBackgroundBorderless"/> 
     </FrameLayout> 
    </LinearLayout> 

</RelativeLayout> 

的關鍵是連鎖反應必須有它自己的佈局（的LinearLayout +的FrameLayout），然後用alpha="0"對具有波紋的圖像設置透明以覆蓋實心的圖像。

這段代碼的問題是：

1. 你必須硬編碼的填充。如果沒有填充或填充太小，則紋波效應將被限制爲矩形，而不是圓形。使用公式48（高度/寬度）/ 7來計算填充。如果除以7不起作用，則減小除數，例如6.
2. 因爲它有填充，所以你不能觸摸填充觸發漣漪效應。如果這是一個很小的按鈕，因爲它並不明顯，但它確實很重要，如果它是一個大按鈕。

好消息是，有一個在drawable/ripple.xml模擬selectableItemBackgroundBorderless與ripple標籤的另一種方法：

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    android:color="?android:colorPrimary"> 
    <item android:id="@android:id/mask"> 

     <shape android:shape="oval"> 
      <solid android:color="?android:colorPrimary"/> 
     </shape> 

    </item> 
</ripple> 

從我觀察到的東西，它給了同樣的連鎖反應（除了它沒有溢出紋波）像selectableItemBackgroundBorderless做的，所以你沒有理由堅持使用默認selectableItemBackgroundBorderless

有了這個ripple.xml，做這樣的：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/nav_drawer" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_gravity="start" 
    android:background="@android:color/holo_green_light" 
    android:orientation="vertical"> 

    <ImageView 
     android:id="@+id/imageView4" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_alignParentTop="true" 
     android:scaleType="fitXY" 
     android:src="@drawable/device_bg" /> 

    <ImageView 
     android:layout_width="48dp" 
     android:layout_height="48dp" 
     android:layout_alignParentEnd="true" 
     android:layout_alignParentTop="true" 
     android:src="@drawable/sidebar_refresh" /> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentEnd="true" 
     android:layout_alignParentTop="true"> 
     <FrameLayout 
      android:layout_weight="1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:background="@android:color/transparent"> 
      <ImageView 
       android:id="@+id/imageView3" 
       android:layout_width="48dp" 
       android:layout_height="48dp" 
       android:clickable="true" 
       android:src="@drawable/ripple" /> 
     </FrameLayout> 
    </LinearLayout> 

</RelativeLayout> 

唯一改變的是LinearLayout部分。沒有更多的硬編碼填充和沒有alpha圖像。唯一的小問題是點擊角落仍然會觸發連鎖反應。我發現這thread但我還沒有嘗試。

上述兩種方式甚至可以使圖像不透明。