Как создать материальный дизайн, как обычная полоса прокрутки с цифрами и алфавитами, пузырь в recylerview

Во многих новых приложениях для Android и их последнем обновлении эти приложения (в основном, материальный дизайн) имеют пользовательскую полосу прокрутки с буквами и цифрами, а прокрутка полосы прокрутки с большим пальцем, алфавитами или цифрами появляется рядом с большим пальцем. Я приложил скриншот к вопросу о панель прокрутки из приложения "Контакты".

Снимок экрана: enter image description here

Итак, как изменить полосу прокрутки в моем приложении, использующем recyclerview, создать полосу прокрутки, подобную этой полосе прокрутки, с буквенным алфавитом и номером или есть ли для этого новый API или библиотека?

Ответы

Ответ 1

Для тех, кто все еще ищет ответ для этого. Я нашел несколько библиотек, которые предоставляют эту функциональность:

Все вышеперечисленное предоставляет механизм FastScroll (что вы ищете) - хотя некоторые из них выглядят лучше других.

Я нашел MaterialScrollBar легче всего настроить и использовать, а также тот факт, что у него есть прекрасная косметика ( придерживается принципов проектирования материалов и выглядит так же, как приложение "Контакты" ).

Эта библиотека также активно поддерживается и развивается, проблемы и PR закрываются и т.д.

Надеюсь, это поможет кому-то, поскольку я потратил много времени на это.

Ответ 2

Как я понимаю из вашего вопроса, вы хотите реализовать функцию "Быстрая прокрутка" на Android.

Эта функция позволяет быстро просмотреть большой список. Вы можете легко реализовать его, используя эту стороннюю библиотеку.

enter image description here

Его очень простая, легкая и очень настраиваемая. Не стоит недооценивать это, посмотрев на скриншот выше. Вы можете легко сделать его похожим на скриншот, который вы предоставили. Я использовал его когда-нибудь в одном из моих приложений и получил отличные результаты.

Использование

Использование этой библиотеки также прост. Вам просто нужно включить его макет QuickScroll и реализовать интерфейс Scrollable на вашем базовом адаптере. Предоставление этого виджета Material look-and-feel действительно просто.

Update

Из-за потребительского спроса для всех тех, кто хочет знать, как использовать функцию "Быстрая прокрутка" в RecyclerView, здесь она для всех вас. Вы можете использовать эту библиотеку.

Он может дать результаты, которые очень близки (если не точны) к предоставленному скриншоту. Вам просто нужно использовать виджет RecyclerViewFastScroller в вашем макете.

Использование

Шаг 1

Добавьте эту зависимость

compile 'xyz.danoz:recyclerviewfastscroller:0.1.3'

Шаг 2

Теперь в вашем XML вам нужно поместить этот виджет

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

а затем в вашем коде

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 handle)
      recyclerView.setOnScrollListener(fastScroller.getOnScrollListener());

      ...
      return rootView;
  }

Есть много дополнительных атрибутов, чтобы настроить его так, как вы хотите. Вы можете создать точно такой же внешний вид экрана, который вы предоставили.

Использование библиотеки может сэкономить много времени, но если вы хотите создать эту функцию с нуля, здесь, это очень полезный пост для вас.

Надеюсь, что это поможет.

Ответ 4

Я использую этот новый сейчас - https://github.com/L4Digital/FastScroll

Ниже мой предыдущий.

Я использовал fastscroller от FutureMind в Android Studio

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

Использование

1) Скомпилируйте требуемую зависимость, добавив

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

2) Редактировать файл макета для добавления 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) В Activity/Fragment ассоциируйте fastScroller с видом вашего ресайклера

    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) В вашем RecyclerView.Adapter реализуем SectionTitleProvider для отображения содержимого в 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);
        }

    }