Android multi select ui

Question

Ich habe versucht, so gut wie ich konnte, aber ich weiß nicht einmal die richtigen Schlüsselwörter. Ich möchte einen Effekt ähnlich dem folgenden Screenshot bei der Auswahl mehrerer Dinge.

http://imgur.com/a/G1GJO

ist die Idee leicht zu sehen, wer gewählt ist und einfach ein „x“ klicken aus der Auswahl zu entfernen. Ich weiß nicht, ob eine solche Komponente bereits existiert oder ob ich sie manuell erstellen muss und wenn ja, habe ich keine Ahnung wie. Das nächste, was ich habe, ist eine Multi-Select-Listview, aber das ist im Idealfall nicht das, was ich will.

Wenn mir jemand in die richtige Richtung zeigen könnte, würde es sehr geschätzt werden.

Danke.

Answer 1

Google bezieht sich auf diese Art von UI Affordance als Chip.

https://material.google.com/components/chips.html

Der Behälter Sie wird höchstwahrscheinlich für Ihre Chips wollen, ist ein FlowLayout.

Das Problem ist, dass Google keine vorgefertigten Komponenten hat, um diese zu implementieren.

Hier ist, wie ich meine Chips gemacht:

/res/drawable/chip_background.xml:

<?xml version="1.0" encoding="utf-8"?> 
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <solid android:color="@color/translucent_gray"/> 
    <corners android:radius="16dp"/> 
</shape> 

/res/layout/chip.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="wrap_content" 
    android:layout_height="32dp" 
    android:orientation="horizontal" 
    android:gravity="center_vertical" 
    android:layout_marginLeft="4dp" 
    android:layout_marginRight="4dp" 
    android:layout_marginTop="2dp" 
    android:layout_marginBottom="2dp" 
    android:background="@drawable/chip_background"> 

    <TextView 
     android:id="@+id/title" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:gravity="center_vertical" 
     android:maxLines="1" 
     android:ellipsize="end" 
     android:textSize="13sp" 
     android:textColor="@android:color/white" 
     tools:text="Sample Text"/> 

    <ImageButton 
     android:id="@+id/removeButton" 
     android:layout_width="32dp" 
     android:layout_height="32dp" 
     android:background="@null" 
     android:alpha=".8" 
     android:scaleType="fitCenter" 
     android:padding="7dp" 
     android:src="@drawable/ic_cancel_white_24dp"/> 

</LinearLayout> 

Die Polsterung und Skala Tippen Sie auf die Schaltfläche "Entfernen", um ein 24-dpi-Symbol ein wenig zu verkleinern, damit es gut in das Chip-Oval passt.

Für eine FlowLayout können Sie GitHub für "Android FlowLayout" suchen und eine Bibliothek zu verwenden.

Answer 2

Sie könnten versuchen, Lösung mit meinem ChipsLayoutManager für RecyclerView. Damit Sie Ihr Problem lösen können, müssen Sie nur einen Adapter mit Entfernungs-Listener (wie Sie es für jeden anderen Typ von LayoutManager haben) und Elemente erstellen.

ChipsLayoutManager chipsLayoutManager = ChipsLayoutManager.newBuilder() 
    .build(); 
recyclerView.setLayoutManager(chipsLayoutManager); 
//your adapter 
adapter = new RecyclerViewAdapter(items, onRemoveListener); 

in Zuhörer nur gelöschte Artikel aus Artikel Liste entfernen und einen Adapter aktualisieren

private OnRemoveListener onRemoveListener = new OnRemoveListener() { 
    @Override 
    public void onItemRemoved(int position) { 
     items.remove(position); 
     adapter.notifyItemRemoved(position); 
    } 
}; 

Artikel mit Animation gelöscht werden.