web-dev-qa-db-fra.com

Comment créer une conception matérielle comme une barre de défilement personnalisée avec une bulle de chiffres et d'alphabets dans Recyclerview

Dans de nombreuses nouvelles applications Android et leur dernière mise à jour, ces applications (principalement la conception matérielle) ont une barre de défilement personnalisée avec des lettres et des chiffres, tandis que la barre de défilement avec le pouce, des alphabets ou des chiffres apparaît à côté du pouce. capture d'écran jointe à la question de la barre de défilement de l'application 'Contacts'.

Capture d'écran: enter image description here

Alors, comment modifier une barre de défilement dans mon application qui utilise recyclerview, pour créer une barre de défilement comme cette barre de défilement avec l'alphabet et la bulle numérique ou y a-t-il une nouvelle API ou bibliothèque introduite pour cela?

androidmaterial-design
28
Shashank Chavan

Pour tous ceux qui recherchent toujours une réponse à cela. J'ai trouvé un certain nombre de bibliothèques qui offrent cette fonctionnalité:

  1. https://github.com/krimin-killr21/MaterialScrollBar
  2. https://github.com/plusCubed/recycler-fast-scroll
  3. https://github.com/danoz73/RecyclerViewFastScroller
  4. https://github.com/timusus/RecyclerView-FastScroll

Tout ce qui précède fournit le mécanisme FastScroll (ce que vous recherchez) - bien que certains soient plus beaux que d'autres.

J'ai trouvé le MaterialScrollBar le plus facile à installer et à utiliser, ainsi que le fait qu'il a les plus beaux cosmétiques (adhère aux directives de conception des matériaux et ressemble à l'application Contacts).

Cette bibliothèque est également activement maintenue et développée, les problèmes et les relations publiques étant fermés, etc.

J'espère que cela peut aider quelqu'un, car j'ai passé beaucoup de temps à le rechercher moi-même.

15
Cillian Myles

Comme je peux comprendre votre question, vous souhaitez implémenter la fonction "Fast Scroll" dans Android.

Cette fonction vous permet de faire défiler rapidement une grande liste. Vous pouvez facilement l'implémenter en utilisant this bibliothèque tierce.

enter image description here

C'est très simple, léger et hautement personnalisable. Ne le sous-estimez pas en regardant la capture d'écran ci-dessus. Vous pouvez facilement le faire ressembler à la capture d'écran que vous avez fournie. Je l'ai utilisé dans une de mes applications et j'ai obtenu d'excellents résultats.

Utilisation

L'utilisation de cette bibliothèque est également simple. Il vous suffit d'inclure sa disposition QuickScroll et d'implémenter l'interface Scrollable sur votre BaseAdapter. Donner à ce widget l'apparence matérielle est vraiment simple.

Mise à jour

En raison de la demande des utilisateurs, pour tous ceux qui veulent savoir comment utiliser la fonction "Fast Scroll" dans RecyclerView, la voici pour vous tous. Vous pouvez utiliser la bibliothèque this .

Il peut vous donner des résultats très proches (sinon exacts) de la capture d'écran fournie. Il vous suffit d'utiliser le widget RecyclerViewFastScroller dans votre mise en page.

Utilisation

Étape 1

Ajouter cette dépendance

compile 'xyz.danoz:recyclerviewfastscroller:0.1.3'

Étape 2

Maintenant, dans votre XML, vous devez mettre ce widget

<Android.support.v7.widget.RecyclerView
      Android:id="@+id/recyclerView"
      Android:layout_width="match_parent"
      Android:layout_height="match_parent"
      />

  <xyz.danoz.recyclerviewfastscroller.vertical.VerticalRecyclerViewFastScroller
      Android:id="@+id/fast_scroller"
      Android:layout_width="@dimen/however_wide_you_want_this"
      Android:layout_height="match_parent"
      Android:layout_alignParentRight="true"
      />

puis dans votre code,

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
      View rootView = inflater.inflate(R.layout.recycler_view_frag, container, false);
      ...

      // Grab your RecyclerView and the RecyclerViewFastScroller from the layout
      RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerView);
      VerticalRecyclerViewFastScroller fastScroller = (VerticalRecyclerViewFastScroller) rootView.findViewById(R.id.fast_scroller);

      // Connect the recycler to the scroller (to let the scroller scroll the list)
      fastScroller.setRecyclerView(recyclerView);

      // Connect the scroller to the recycler (to let the recycler scroll the scroller's handle)
      recyclerView.setOnScrollListener(fastScroller.getOnScrollListener());

      ...
      return rootView;
  }

Il existe de nombreux attributs supplémentaires pour le personnaliser comme vous le souhaitez. Vous pouvez créer exactement la même apparence que la capture d'écran que vous avez fournie.

L'utilisation d'une bibliothèque peut vous faire gagner beaucoup de temps, mais si vous souhaitez créer cette fonctionnalité à partir de zéro, ici est un article très utile pour vous.

J'espère que ça aide.

5
Aritra Roy

List View Variants la bibliothèque semble être parfaite pour vos besoins, essayez-la.

Découvrez la démo ci-dessous.

The demo of the library

2
Akshay Chordiya

J'utilise ce nouveau maintenant - https://github.com/L4Digital/FastScroll

Ci-dessous est mon précédent.

J'ai utilisé fastscroller de FutureMind dans Android Studio

https://github.com/FutureMind/recycler-fast-scroll

Utilisation

1) Compiler la dépendance requise en ajoutant

compilez 'com.futuremind.recyclerfastscroll: fastscroll: 0.2.4'

2) Modifier le fichier de mise en page pour ajouter FastScroller 

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/recyclerview"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"/>

    <com.futuremind.recyclerviewfastscroll.FastScroller
        Android:id="@+id/fastscroll"
        Android:orientation="vertical"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_alignParentRight="true"/>
</RelativeLayout>

3) Dans Activity/Fragment, associez fastScroller à votre vue recycleur 

    recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
    fastScroller = (FastScroller) findViewById(R.id.fastscroll);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    recyclerView.setAdapter(adapter);

    //has to be called AFTER RecyclerView.setAdapter()
    fastScroller.setRecyclerView(recyclerView);

4) Dans votre RecyclerView.Adapter, implémentez SectionTitleProvider pour afficher le contenu sur Bubble 

    public class MyAdapter ... implements SectionTitleProvider{

        ...

        @Override
        public String getSectionTitle(int position) {
            //this String will be shown in a bubble for specified position
            return getItem(position).substring(0, 1);
        }

    }
1
Karthik Sagar