web-dev-qa-db-fra.com

Comment créer une barre de défilement alphabétique affichant toutes les lettres dans Android?

Mon but est d'obtenir quelque chose comme ça:
http://appsreviews.com/wp-content/uploads/2010/08/Cures-A-Z-App-for-iPhone.jpg

Mais les seuls exemples que je peux trouver sont des listes comme ça:
Android - listview fastscroll avec alphabet comme sur l'activité des contacts iPhone

Évidemment, je ne veux pas d'une liste comme les contacts qui affiche les lettres lorsque vous faites défiler rapidement. Je sais comment faire ça.

Tout pointeur serait le bienvenu. (J'ai essayé ceci mais pas de succès)

Ci-dessous, la solution complète suggérée par FunkTheMonk (merci beaucoup):

Définissez la vue de liste comme d'habitude. Définissez un RelativeLayout contenant le ListView et à droite, un LinearLayout avec toutes les lettres. Pour une meilleure solution, la liste des lettres pourrait être générée dynamiquement pour afficher uniquement les lettres dans la liste. Ensuite, dans la méthode onClick, ajoutez le comportement pour faire défiler la liste:

xml 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent" Android:layout_height="match_parent">

    <ListView Android:id="@Android:id/list" Android:layout_width="match_parent" Android:layout_height="match_parent" Android:layout_marginRight="28dip" />

    <LinearLayout Android:orientation="vertical"
        Android:layout_width="28dip" Android:layout_height="wrap_content"
        Android:layout_alignParentRight="true" Android:background="@Android:color/transparent" >

        <TextView Android:id="@+id/A" Android:text="A" Android:tag="A"
            style="@style/alphabetTextView"/>
        <TextView Android:id="@+id/B" Android:text="B" Android:tag="B"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/C" Android:text="C" Android:tag="C"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/D" Android:text="D" Android:tag="D"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/E" Android:text="E" Android:tag="E"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/F" Android:text="F" Android:tag="F"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/G" Android:text="G" Android:tag="G"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/H" Android:text="H" Android:tag="H"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/I" Android:text="I" Android:tag="I"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/J" Android:text="J" Android:tag="J"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/K" Android:text="K" Android:tag="K"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/L" Android:text="L" Android:tag="L"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/M" Android:text="M" Android:tag="M"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/N" Android:text="N" Android:tag="N"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/O" Android:text="O" Android:tag="O"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/P" Android:text="P" Android:tag="P"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/Q" Android:text="Q" Android:tag="Q"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/R" Android:text="R" Android:tag="R"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/S" Android:text="S" Android:tag="S"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/T" Android:text="T" Android:tag="T"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/U" Android:text="U" Android:tag="U"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/V" Android:text="V" Android:tag="V"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/W" Android:text="W" Android:tag="W"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/X" Android:text="X" Android:tag="X"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/Y" Android:text="Y" Android:tag="Y"
            style="@style/alphabetTextView" />
        <TextView Android:id="@+id/Z" Android:text="Z" Android:tag="Z"
            style="@style/alphabetTextView" />

    </LinearLayout>
</RelativeLayout>

Java 

@Override
public void onClick(View v) {
    String firstLetter = (String) v.getTag();
    int index = 0;
    if (stringList != null) {
        for (String string : stringList) {
            if (string.startsWith(firstLetter)) {
                index = stringList.indexOf(string);
                break;
            }
        }
    }
    lv.setSelectionFromTop(index, 0);
}
androidlistviewalphabetical
47
Sephy

Il s'agit d'une fonction iPhone, Android utilise le défilement rapide. Je vous recommande d'utiliser l'alternative de la plate-forme plutôt que d'essayer d'appliquer des fonctionnalités communes.

Si vous le devez, vous devrez l'implémenter vous-même. Placez votre vue de liste dans un RelativeLayout et placez A-Z TextViews dans un LinearLayout vertical défini sur layout_alignParentRight="true". Définissez la balise TextView sur A-Z de manière appropriée et définissez onClick="quickScroll" sur chacun d'eux.

Mettre en œuvre dans votre activité:

public void quickScroll(View v) {
    String alphabet = (String)v.getTag();
    //find the index of the separator row view
    list.setSelectionFromTop(index, 0);
}

Cela défilera jusqu'à la lettre sélectionnée surClick, mais je crois que vous pouvez faire défiler votre doigt sur l'alphabet sur iPhone et cela mettra à jour la liste? Vous devrez implémenter un onTouchListener plutôt que onClickListener pour cela.

43
FunkTheMonk

Vous pouvez essayer d'utiliser IndexScroller qui n'est visible qu'au toucher et automatiquement invisible en l'absence de contact. Voici la capture d'écran

screenshot

26
Nam Trung