web-dev-qa-db-ja.com

色付きの背景とリップル効果を備えたリストビューセレクター

標準のListViewセレクターAndroid L開発者プレビューでは、タッチの波紋効果にcolorControlHighlightを使用し、焦点が合っていない状態で背景が透明になります。

色付きの背景を持つListViewアイテムを定義したいのですが、同じハイライト色でタッチすると波及効果を示します。さて、次のドロアブルを定義すると：

<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の場合、期待どおりに機能します（リップルはタッチ位置で始まります）。

androidlistviewmaterial-designandroid-5.0-lollipoprippledrawable
55
artkoenig

波及効果を維持しながら、個別に色付けされたリストアイテムを取得することができました。使用しているアダプターを使用してリストアイテムの背景を設定し、リストビューを設定してセレクターを一番上に表示します。

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

これにより、背景の上にリップル効果が描画されます。

126
dyancat

私が知る限り、このバグはAndroid 5.0であり、5.1ではありません。ここでのヒントとしてDrawable＃setHotspotを使用するのがトリックのようです https：/ /Twitter.com/crafty/status/561768446149410816 （あいまいなTwitterヒントは素晴らしい形式のドキュメントだからです！）

このような行レイアウトがあると仮定します

<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);
                }
            });
6
miguel

私は@ArhatBaidの回答を少し修正し、テストしましたが、完全に動作します：

<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です。

3
cV2

親レイアウトの背景としてリップル効果を含むサンプルレイアウト。

<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ここでは、任意の色を使用できます。必ず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>

ここでは、楕円の代わりに長方形のような異なる形状を使用できます...

3
Arhat Baid

リスト項目の背景をルート要素に適用するの場合にのみ正常に動作するように見えることがわかりました。

また、ListViewの代わりに新しい RecyclerView の使用を検討してください

リストアイテムビューの例：

<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>
3
JoeyCK

これは、ネストされたレイアウトで実現できます。作成するだけです既存のレイアウトの周りにルートレイアウトとして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>
2
Sascha