Listviewselect器与彩色背景和波纹效果

在Android L开发人员预览中的标准ListViewselect器使用colorControlHighlight触摸的涟漪效应,并在未聚焦状态下具有透明背景。

我想定义一个具有彩色背景的ListView项目,并且仍然使用相同的高亮颜色显示触摸时的涟漪效果。 现在,如果我定义下面的drawable:

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item android:drawable="@color/my_background_color"/> </ripple> 

它可以工作,但是无论触摸位置如何,纹波都始于ListView项目的中间。 如果我在ListView之外使用相同的背景,例如LinearLayout ,它的工作方式与预期相同(纹波从触摸位置开始)。

我已经设法得到单独的彩色列表项目,同时保持连锁反应。 使用任何适配器来设置列表项目的背景,并设置列表视图在顶部显示select器:

 <ListView android:layout_width="match_parent" android:layout_height="match_parent" android:drawSelectorOnTop="true" /> 

这将在背景之上绘制涟漪效应。

据我可以告诉这个错误只在Android 5.0,而不是5.1。 窍门似乎是使用Drawable#setHotspot作为谷歌开发提示在这里https://twitter.com/crafty/status/561768446149410816 (因为晦涩的Twitter提示是一个伟大的文档forms!)

假设你有一个像这样的行布局

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/row_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="?attr/selectableItemBackground"> .... content here ..... </LinearLayout> </FrameLayout> 

以下为我工作

  row.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { v.findViewById(R.id.row_content) .getBackground() .setHotspot(event.getX(), event.getY()); return(false); } }); 

我发现它似乎只工作正常,如果您将背景应用于列表项的根元素

另外,考虑使用新的RecyclerView而不是ListView

列表项目视图示例:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/list_padding" android:layout_marginLeft="@dimen/list_padding" android:layout_marginRight="@dimen/list_padding" android:padding="@dimen/list_padding" android:background="@drawable/ripple_bg"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:id="@+id/tvTitle"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Small Text" android:id="@+id/tvSubtitle" /> </RelativeLayout> 

我修改了@ArhatBaid的答案一点点,testing它,它完美的工作:

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item android:drawable="@color/light_grey_header_navigation_drawer"/> </ripple> 

所以,这可以让你设置一个背景颜色,仍然有涟漪效应。
对我来说目标和minSdk是21。

你可以用一个嵌套的布局实现这一点。 只要创build一个LinearLayout作为现有布局的根布局,在根布局上设置涟漪效应,然后在嵌套布局上设置背景颜色。

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/ripple_effect" android:orientation="vertical"> <RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/containterContent" android:background="@color/yourCOLOR" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Your content --> </RelativeLayout> </LinearLayout> 

样本布局,其中包含纹波效果作为父布局的背景。

 <RelativeLayout android:id="@+id/id4" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/ripple_effect" android:clickable="true"> <ImageView android:id="@+id/id3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:background="@drawable/image" android:layout_centerVertical="true"/> <LinearLayout android:id="@+id/id2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_alignParentRight="true" android:layout_centerVertical="true"> <TextView android:id="@+id/id1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/text"/> </LinearLayout> </RelativeLayout> 

Ripple_effect.xml在这里你可以使用你select的任何颜色。 确保你使用sdk版本21,并有drawable-v21和style-v21文件夹,并将与v21相关的所有文件放入其中。

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item android:id="@android:id/mask"> <shape android:shape="oval"> <solid android:color="?android:colorAccent" /> </shape> </item> 

在这里你可以使用不同的形状像矩形而不是椭圆形…