如何创建材料设计，如自定义滚动条，数字和字母在recylerview中冒泡

Question

在许多新的Android应用程序及其最新更新中，这些应用程序（主要是材料设计）都有一个带字母和数字的自定义滚动条，而用拇指，字母或数字滚动滚动条会出现在拇指旁边。我已将截图附加到问题应用程序＆＃39;联系人＆＃39;。

中的滚动条

截图：

那么，如何修改我的应用程序中使用recyclelerview的滚动条，创建滚动条，如带有字母和数字气泡的滚动条，或者是否为此引入了新的API或库？

Answer 1

对于仍在寻找答案的人。我找到了许多提供此功能的库：

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

上述所有内容都提供了FastScroll机制（您正在寻找的内容） - 尽管有些机制看起来比其他机制更好。

我发现MaterialScrollBar最容易设置和使用，以及它有最好的化妆品（遵守材料设计指南，看起来就像联系人应用程序）。

这个图书馆也得到积极维护和发展，问题和解决方案。 PR正在关闭等等。

希望这可以帮助别人，因为我花了很多时间自己寻找这个。

Answer 2

我可以从您的问题中了解到，您希望在Android中实施＆＃34; Fast Scroll＆＃34; 功能。

此功能可让您快速滚动大型列表。您可以使用this第三方库轻松实现它。

它非常简单，重量轻，也是高度定制的。不要通过查看上面的屏幕截图来低估它。您可以轻松地使其看起来像您提供的屏幕截图。我曾经在我的一个应用程序中使用它并获得了很好的结果。

<强>用法

使用此库也很简单。您只需要包含其QuickScroll布局并在BaseAdapter上实现Scrollable接口。为这个小部件提供Material外观非常简单。

更新

由于用户需求，对于想要了解如何在RecyclerView中使用＆＃34;快速滚动＆＃34; 功能的所有人来说，这里适合所有人。您可以使用this库。

它可以为您提供与所提供的屏幕截图非常接近（如果不准确）的结果。您只需在布局中使用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's handle)
      recyclerView.setOnScrollListener(fastScroller.getOnScrollListener());

      ...
      return rootView;
  }

有许多其他属性可以按您希望的方式进行自定义。您可以创建与您提供的屏幕截图完全相同的外观。

使用库可以节省大量时间，但如果您想从头开始构建此功能，here对您来说是一个非常有用的帖子。

希望它有所帮助。

Answer 3

List View Variants库似乎非常适合您的需求，请尝试一下。

查看下面的演示。

Answer 4

我现在使用这个新的 - https://github.com/L4Digital/FastScroll

以下是我之前的那篇。

我在 Android Studio

中使用了FutureMind的fastscroller

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

<强>用法

1）通过添加

来编译所需的依赖项

compile'c​​om.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）在活动/片段中将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);
        }

    }

Answer 5

这个库运行良好且易于使用 - Material Scroll Bar

它还支持自定义字体。