Cómo crear el diseño de material como la barra de desplazamiento personalizado con números y alfabetos burbuja en recylerview

En muchas aplicaciones android nuevas y su última actualización de esas aplicaciones (sobre todo el diseño del material) tienen una barra de desplazamiento personalizado con letras y números, mientras que el desplazamiento de la barra de desplazamiento con el pulgar, alfabetos o números aparecen al lado de thumb.I han adjuntado captura de pantalla a la pregunta de la barra de desplazamiento de La aplicación 'Contactos'.

Captura de pantalla: Introduzca aquí la descripción de la imagen

Por lo tanto, ¿Cómo modificar una barra de desplazamiento en mi aplicación que está utilizando recyclerview, para crear la barra de desplazamiento como la barra de desplazamiento con el alfabeto y la burbuja de números o hay alguna nueva API o biblioteca introducida para eso?

Para cualquiera que esté buscando una respuesta para esto. He encontrado un número de bibliotecas que proporcionan esta funcionalidad:

  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

Todo lo anterior proporciona el mecanismo de FastScroll (lo que está buscando), aunque algunos parecen más bonitos que otros.

He encontrado el MaterialScrollBar más fácil de conseguir conjunto con el uso y, así como el hecho de que tiene los mejores cosméticos (se adhiere a las directrices de diseño de material y se ve como la aplicación de contactos).

Esta biblioteca también se mantiene activamente y se desarrolla, las ediciones y los PRs son cerrados etc.

Espero que esto pueda ayudar a alguien, ya que pasé mucho tiempo buscando esto yo mismo.

Como puedo entender de su pregunta, desea implementar la función "Fast Scroll" en Android.

Esta función le permite desplazarse rápidamente por una lista grande. Puede implementarlo fácilmente utilizando esta biblioteca de terceros.

Introduzca aquí la descripción de la imagen

Su muy simple, ligero y es altamente personalización también. No lo subestimes mirando la captura de pantalla de arriba. Usted puede hacer que se parezca a la captura de pantalla que proporcionó. Lo usé en algún momento en una de mis aplicaciones y obtuve excelentes resultados.

Uso

El uso de esta biblioteca también es simple. Sólo tiene que incluir su diseño QuickScroll e implementar la interfaz Scrollable en su BaseAdapter. Dando a este widget el aspecto y el aspecto del material es realmente simple.

Actualizar

Debido a la demanda de los usuarios, para todos aquellos que quieran saber cómo usar la función "Fast Scroll" en RecyclerView, aquí es para todos ustedes. Puede utilizar esta biblioteca.

Puede darle resultados que es muy cercano (si no exacto) a la captura de pantalla proporcionada. Sólo tienes que usar el widget RecyclerViewFastScroller en tu diseño.

Uso

Paso 1

Añadir esta dependencia

 compile 'xyz.danoz:recyclerviewfastscroller:0.1.3' 

Paso 2

Ahora en tu XML necesitas poner este 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" /> 

Y luego en su código,

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

Hay muchos atributos adicionales para personalizarlo de la manera que desee. Puede crear exactamente la misma apariencia de la captura de pantalla que ha proporcionado.

El uso de una biblioteca puede ahorrar mucho tiempo, pero en caso de que si desea crear esta característica desde cero, aquí es una publicación muy útil para usted.

Espero eso ayude.

La biblioteca de variantes de vista de lista parece ser perfecta para sus necesidades, pruébela.

Echa un vistazo a la demo a continuación.

La demo de la biblioteca

Puede lograr este efecto usando listview.setFastScrollEnabled ()

Cuando se habilita el desplazamiento rápido, el usuario puede desplazarse rápidamente por las listas arrastrando el dedo de desplazamiento rápido. Introduzca aquí la descripción de la imagen

Styles.xml

 <style name="AppBaseTheme" parent="android:Theme.Light"> </style> <style name="AppTheme" parent="AppBaseTheme"> <item name="android:fastScrollThumbDrawable">@drawable/fastscroll_thumb_holo</item> <item name="android:fastScrollOverlayPosition">atThumb</item> <item name="android:fastScrollTextColor">@color/apptheme_color</item> <item name="android:fastScrollTrackDrawable">@drawable/fastscroll_thumb_pressed_holo</item> <item name="android:fastScrollPreviewBackgroundRight">@drawable/bg_default_focused_holo_light</item> </style> 

Fastscroll_thumb_holo.xml

Cree un nuevo archivo fastscroll_thumb_holo.xml en res / drawable / y copie el siguiente contenido. Define el selector para el pulgar de desplazamiento rápido para los estados predeterminados y presionados.

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/fastscroll_thumb_pressed_holo" android:state_pressed="true"/> <item android:drawable="@drawable/fastscroll_thumb_default_holo"/> </selector> 

CÓDIGO JAVA:

MainActivity.java

  listView.setFastScrollEnabled(true); String[] fruits = getResources().getStringArray(R.array.fruits_array); List<String> fruitList = Arrays.asList(fruits); Collections.sort(listView); setListAdapter(new ListAdapter(this, listView)); 

ListAdapter.java

  public class ListAdapter extends ArrayAdapter<String> implements SectionIndexer { HashMap<String, Integer> mapIndex; String[] sections; List<String> fruits; public ListAdapter(Context context, List<String> fruitList) { super(context, R.layout.list_item, fruitList); this.fruits = fruitList; mapIndex = new LinkedHashMap<String, Integer>(); for (int x = 0; x < fruits.size(); x++) { String fruit = fruits.get(x); String ch = fruit.substring(0, 1); ch = ch.toUpperCase(Locale.US); // HashMap will prevent duplicates mapIndex.put(ch, x); } Set<String> sectionLetters = mapIndex.keySet(); // create a list from the set to sort ArrayList<String> sectionList = new ArrayList<String>(sectionLetters); Log.d("sectionList", sectionList.toString()); Collections.sort(sectionList); sections = new String[sectionList.size()]; sectionList.toArray(sections); } public int getPositionForSection(int section) { Log.d("section", "" + section); return mapIndex.get(sections[section]); } public int getSectionForPosition(int position) { Log.d("position", "" + position); return 0; } public Object[] getSections() { return sections; } } 

Activity_main.xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" tools:context=".MainActivity" > <ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbarStyle="outsideOverlay" /> </RelativeLayout> 

List_item.xml

 <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/txt_title" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingBottom="10dp" android:paddingLeft="15dp" android:paddingTop="10dp" /> 

Para obtener más información, consulte este valioso tutorial – http://androidopentutorials.com/android-listview-fastscroll/

Yo uso este nuevo ahora – https://github.com/L4Digital/FastScroll

Abajo está mi anterior.

He utilizado fastscroller por FutureMind en Android Studio

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

Uso

1) Compile la dependencia requerida añadiendo

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

2) Editar archivo de diseño para agregar 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) En Actividad / Fragmento asociar fastScroller con su vista de reciclador

  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) En su RecyclerView.Adapter implemente SectionTitleProvider para mostrar el contenido en 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); } } 
  • ¿Por qué el efecto ondulación quita mi fondo original?
  • ¿Cuál es el "color de acento"?
  • Cómo implementar / utilizar el tipo dinámico en el diseño de material de Android
  • Cambiar layout_scrollFlags de forma programática en CollapsingToolbarLayout
  • Configuración del color del encabezado en el nuevo Material DatePicker
  • Elevación en dispositivos pre-L?
  • Diseño del material - ¿Qué significa 'usar el tinte 700'?
  • Android Error de diseño de material
  • TabLayout se bloquea después de actualizar la biblioteca de soporte a 23.2.1
  • Botón CardView y el texto no alineado
  • Cómo implementar una barra de progreso circular de diseño de material en android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.