Listview-Selektor mit farbigem Hintergrund und Welleneffekt

Lesezeit: 6 Minuten

Benutzer-Avatar
artkönig

Standard ListView Selektor in der Entwicklervorschau von Android L verwendet colorControlHighlight für den Kräuseleffekt bei Berührung und hat im unfokussierten Zustand einen transparenten Hintergrund.

Ich würde gerne a definieren ListView Element, das einen farbigen Hintergrund hat und dennoch den Welleneffekt bei Berührung mit derselben Hervorhebungsfarbe zeigt. Wenn ich nun folgendes drawable definiere:

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

Es funktioniert, aber die Welligkeit beginnt in der Mitte des ListView Element, unabhängig von der Berührungsposition. Wenn ich den gleichen Hintergrund außerhalb der ListViewzB für a LinearLayoutes funktioniert wie erwartet (die Welligkeit beginnt an der Berührungsposition).

  • Geben Sie den Hintergrund für Ihr Listenelement an und setzen Sie die Listenauswahl auf null?

    – alanv

    26. August 2014 um 0:17 Uhr

  • Können Sie den Hintergrund Ihres Listenelements einfach auf eine Farbe einstellen und die Listenauswahl auf dem Standardwert belassen? ListView hat eine spezielle Behandlung von Berührungsereignissen, die Sie wahrscheinlich daran hindern, den gewünschten Effekt zu erzielen (obwohl Sie gerne einen Fehler unter melden können code.google.com/p/android-developer-preview/wiki/… darüber).

    – alanv

    27. August 2014 um 0:22 Uhr

  • Das Festlegen des Listenelementhintergrunds auf eine Volltonfarbe funktioniert nicht, dies wird über die Listenauswahl gezeichnet. Wie in der Frage erwähnt, wird beim Festlegen des Ripple-Selektors als Elementhintergrund der Touch-Hotspot nicht von ListView empfangen. Ich habe mich entschieden, dem Muster zu folgen, keine Listenelement-Hintergründe festzulegen und nur die Welle als listSelector festzulegen. Der einzige Fehler dabei ist, dass ich einige Listenelemente nicht mit unterschiedlichen Hintergründen haben und die Welligkeit beibehalten kann, um beispielsweise eine ungelesene Nachricht hervorzuheben.

    – verdammter Maurer

    4. November 2014 um 16:47 Uhr

  • Konnten Sie dieses Problem beheben? ich stehe gerade vor dem gleichen…

    – Zsolt Boldizsar

    13. Februar 2015 um 8:41 Uhr

Benutzer-Avatar
dyancat

Ich habe es geschafft, individuell gefärbte Listenelemente zu erhalten und gleichzeitig den Welleneffekt beizubehalten. Legen Sie den Hintergrund Ihrer Listenelemente mit einem beliebigen Adapter fest und stellen Sie die Listenansicht so ein, dass der Selektor oben angezeigt wird:

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

Dadurch wird der Welleneffekt über dem Hintergrund gezeichnet.

  • Ohne drawSelectorOnTop auf true zu setzen, verhält sich die Welligkeit in einer ListView nicht korrekt. Für mich war es nur das Füllen der Schaltfläche mit der Wellenfarbe, nicht das Zeigen des tatsächlichen Effekts. Das hat es behoben – danke!

    – Matt W

    20. November 2014 um 21:23 Uhr


  • Diese Antwort hat mir gerade geholfen, einen dieser 6-Stunden-Fehler zu beheben. Ich danke dir sehr.

    – yarian

    21. November 2014 um 22:06 Uhr

  • Dies ist eigentlich die beste und einfachste Antwort, um dieses lästige Problem zu lösen.

    – Aritra Roy

    17. Februar 2015 um 5:13 Uhr

  • Damit bekomme ich die Welligkeit, aber nachdem die Welligkeit verschwindet, deckt die im Element Drawable angegebene Farbe die gesamte Zelle vollständig ab, ohne den Inhalt darin anzuzeigen. Weiß jemand, wie man das beheben kann?

    – Quelle.rar

    10. April 2015 um 23:47 Uhr

  • Es macht nichts.

    – Oliver Dixon

    11. Februar 2016 um 12:46 Uhr

Benutzer-Avatar
miguel

Soweit ich das beurteilen kann, tritt dieser Fehler nur in Android 5.0 auf, nicht in 5.1. Der Trick scheint darin zu bestehen, Drawable#setHotspot zu verwenden, da ein Google-Entwickler hier Hinweise gibt https://twitter.com/crafty/status/561768446149410816 (denn obskure Twitter-Hinweise sind eine großartige Form der Dokumentation!)

Angenommen, Sie haben ein Zeilenlayout wie dieses

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

Folgendes hat bei mir funktioniert

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

Benutzer-Avatar
JoeyCK

Ich habe festgestellt, dass es nur richtig zu funktionieren scheint, wenn Sie Wenden Sie den Hintergrund auf das Stammelement an des Listeneintrags.

Erwägen Sie auch, die neue zu verwenden RecyclerView anstelle einer ListView

Beispiel für Listenelementansicht:

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

  • Das ist die Antwort, nach der ich gesucht habe, es ist die Wurzel des Problems, denke ich.

    – Adam

    7. Januar 2015 um 21:30 Uhr

  • Ich habe eine Recyclerview und ich habe ein Zeilenlayout mit linearem Root-Layout mit Imageview, Textview. Ich habe android:background=”@drawable/ripple_recycler_view_row” android:clickable=”true” android:drawSelectorOnTop=”true” zu meinem linearen Root-Layout hinzugefügt, aber Ripple wird im Hintergrund des gecleckten Zeilenelements angezeigt.

    – Shridutt Kothari

    13. August 2015 um 18:30 Uhr


Ich habe die Antwort von @ArhatBaid ein wenig angepasst, getestet und es funktioniert perfekt:

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

Auf diese Weise können Sie eine Hintergrundfarbe festlegen und dennoch den Welleneffekt erzielen.
für mich sind target und minSdk 21.

Benutzer-Avatar
Arhat Baid

Das Beispiellayout, das den Ripple-Effekt als Hintergrund des übergeordneten Layouts enthält.

<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 Hier können Sie jede Farbe Ihrer Wahl verwenden. Stellen Sie sicher, dass Sie die SDK-Version 21 verwenden und die Ordner drawable-v21 und style-v21 haben und alle Dateien, die sich auf v21 beziehen, darin ablegen.

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

Hier können Sie eine andere Form wie ein Rechteck anstelle eines Ovals verwenden …

Benutzer-Avatar
Sascha

Dies erreichen Sie mit einem verschachtelten Layout. Erstellen Sie einfach zB ein LinearLayout als Root-Layout um Ihr bestehendes Layout herum, setzen Sie den Ripple-Effekt auf das Root-Layout und Ihre Hintergrundfarbe auf das verschachtelte.

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

1158030cookie-checkListview-Selektor mit farbigem Hintergrund und Welleneffekt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy