带有折叠工具栏的 RecyclerView 中的 Android 字母快速滚动视图

Question

在我的应用程序中，我有这样的 activity_main.xml：-

<Coordinator Layout>
   <AppBarLayout>
      <CollapsingToolbarLayout>
           <ImageView/>
           <Toolbar/>
       </CollapsingToolbarLayout>
   </AppBarLayout>
   <RecyclerView/>
</Coordinating Layout>

Layout.xml ----->>>

<?xml version="1.0" encoding="utf-8"?>



<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/theme_background"
    android:id="@+id/drawerlayout"
    >


    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:id="@+id/activity_main_id"
        tools:context="objectdistance.ajai.ram.sita.gallery.MainActivity">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleMarginEnd="64dp"
                android:fitsSystemWindows="true">



                <ImageView
                    android:id="@+id/imagetoolbar"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    android:foreground="@drawable/image_header_foreground"
                    app:layout_scrollFlags="scroll"
                    app:layout_collapseMode="parallax"/>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    android:background="@drawable/theme_background"
                    app:layout_collapseMode="pin" >

                    <Spinner
                        android:id="@+id/spinner_nav"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"

                        android:dropDownVerticalOffset="?attr/actionBarSize" />

                </android.support.v7.widget.Toolbar>

            </android.support.design.widget.CollapsingToolbarLayout>


        </android.support.design.widget.AppBarLayout>




        <android.support.v7.widget.RecyclerView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />




    </android.support.design.widget.CoordinatorLayout>


    <ListView
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:id="@+id/navlist"
        android:background="#dedede"
        android:layout_gravity="start" />

</android.support.v4.widget.DrawerLayout>

现在我想在我的回收站视图中加入快速滚动功能，以便在滚动时弹出图像日期。

此类滚动条的示例图像：-

我搜索了这个并尝试使用几个库，但我认为由于我的折叠工具栏，滚动条无法正常工作。

使用的滚动库的屏幕截图：-

在我的例子中，滚动条从顶部开始，滚动计算也不正确。

请帮忙解决这个问题。

谢谢

Answer 1

我们想要SectionIndexer 的一些知识。这是 SectionIndexer 的Doc。

我们必须设置为真 setFastScrollEnabled(true) 方法，该方法与LISTVIEW一起使用......你可以使用recyclerview 代替listView 在下面的例子中......

这是活动

public class FastScoll extends ListActivity {

    ListView fruitView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fast_scoll);

        fruitView = (ListView) findViewById(android.R.id.list);

        fruitView.setFastScrollEnabled(true);
        String[] fruits = getResources().getStringArray(R.array.fruits_array);

        final List<String> fruitList = Arrays.asList(fruits);
        Collections.sort(fruitList);
        setListAdapter(new ListAdapter(this, fruitList));

        fruitView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            public void onItemClick(AdapterView<?> parent, View arg1,
                                    int position, long arg3) {
                Log.e("sushildlh",fruitList.get(position));
            }
        });

    }
}

这是 activity_fast_scoll.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" >

    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scrollbarStyle="outsideOverlay" />

</RelativeLayout>

这是我的自定义适配器，带有SectionIndexer....

public class ListAdapter extends ArrayAdapter<String> implements SectionIndexer {

    String[] sections;
    List<String> fruits;
    List<String> sectionLetters=new ArrayList<String>();

    public ListAdapter(Context context, List<String> fruitList) {
        super(context, android.R.layout.simple_list_item_1, fruitList);
        this.fruits = fruitList;

        for (int x = 0; x < fruits.size(); x++) {
            String fruit = fruits.get(x);
            String ch = fruit.charAt(0)+"";
            ch = ch.toUpperCase(Locale.US);

            sectionLetters.add(ch);
        }

        ArrayList<String> sectionList = new ArrayList<String>(sectionLetters);

        sections = new String[sectionList.size()];

        sectionList.toArray(sections);
    }

    public int getPositionForSection(int section) {

        Log.e("sushildlh", "" + section);
        return section;
    }

    public int getSectionForPosition(int position) {

        Log.d("sushildlh", "" + position);
        return position;
    }

    public Object[] getSections() {
        return sections;
    }
}

这是 string.xml 文件中的水果数组。

 <string-array name="fruits_array">
            <item>Apples</item>
            <item>Apricots</item>
            <item>Avocado</item>
            <item>Annona</item>
            <item>Banana</item>
            <item>Bilberry</item>
            <item>Blackberry</item>
            <item>Custard Apple</item>
            <item>Clementine</item>
            <item>Cantalope</item>
            <item>Coconut</item>
            <item>Currant</item>
            <item>Cherry</item>
            <item>Cherimoya</item>
            <item>Date</item>
            <item>Damson</item>
            <item>Durian</item>
            <item>Elderberry</item>
            <item>Fig</item>
            <item>Feijoa</item>
            <item>Grapefruit</item>
            <item>Grape</item>
            <item>Gooseberry</item>
            <item>Guava</item>
            <item>Honeydew melon</item>
            <item>Huckleberry</item>
            <item>Jackfruit</item>
            <item>Juniper Berry</item>
            <item>Jambul</item>
            <item>Jujube</item>
            <item>Kiwi</item>
            <item>Kumquat</item>
            <item>Lemons</item>
            <item>Limes</item>
            <item>Lychee</item>
            <item>Mango</item>
            <item>Mandarin</item>
            <item>Mangostine</item>
            <item>Nectaraine</item>
            <item>Orange</item>
            <item>Olive</item>
            <item>Prunes</item>
            <item>Pears</item>
            <item>Plum</item>
            <item>Pineapple</item>
            <item>Peach</item>
            <item>Papaya</item>
            <item>Passionfruit</item>
            <item>Pomegranate</item>
            <item>Pomelo</item>
            <item>Raspberries</item>
            <item>Rock melon</item>
            <item>Rambutan</item>
            <item>Strawberries</item>
            <item>Sweety</item>
            <item>Salmonberry</item>
            <item>Satsuma</item>
            <item>Tangerines</item>
            <item>Tomato</item>
            <item>Ugli</item>
            <item>Watermelon</item>
            <item>Woodapple</item>
        </string-array>

最后这是这些代码的输出......

随时询问您是否卡在代码之间的任何地方......

注意：- FastScroll 图像在不同版本的 android（例如：-lollipop、marshmallow 等）中会有所不同，下面的输出是针对棒棒糖的

对于自定义字母快速滚动视图，只需将这两行添加到您的style.xml 文件中的AppTheme。

<item name="android:fastScrollTextColor">@color/apptheme_color</item>         //this is used for the color of the Alphabetical Fast scrollView
<item name="android:fastScrollPreviewBackgroundRight">@drawable/bg_default_focused_holo_light</item>          //this is the image or and drawable file you want to set on Alphabetical Fast scrollView

自定义快速滚动输出：-

Answer 2

有一个很好的库here 和这个example。还有一个很好的教程here，这个例子在Github。

用法：

制作一个实现 BubbleTextGetter 的 RecyclerView.Adapter，给定数据中的位置将返回文本以显示在气泡弹出窗口中。 将 FastScroller 放置在包含 RecyclerView 的布局内（可能位于右侧区域）。

自定义 FastScroller 的一些缺点：

不支持方向更改，但可能很容易修复。 不支持其他布局管理器。只有线性布局管理器 需要 API 11 及更高版本。

代码：

BubbleTextGetter

public interface BubbleTextGetter
  {
  String getTextToShowInBubble(int pos);
  }

recycler_view_fast_scroller__fast_scroller.xml

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

  <TextView
    android:id="@+id/fastscroller_bubble"
    android:layout_gravity="right|end"
    android:gravity="center"
    android:textSize="48sp" tools:text="A"
    android:layout_width="wrap_content"
    android:textColor="#FFffffff"
    android:layout_height="wrap_content"
    android:background="@drawable/recycler_view_fast_scroller__bubble"
    android:visibility="visible"/>

  <ImageView
    android:id="@+id/fastscroller_handle"
    android:layout_width="wrap_content"
    android:layout_marginRight="8dp"
    android:layout_marginLeft="8dp"
    android:layout_height="wrap_content"
    android:src="@drawable/recycler_view_fast_scroller__handle"/>

</merge>

现在这个 ScrollListener：

private class ScrollListener extends OnScrollListener
    {
    @Override
    public void onScrolled(RecyclerView rv,int dx,int dy)
      {
      View firstVisibleView=recyclerView.getChildAt(0);
      int firstVisiblePosition=recyclerView.getChildPosition(firstVisibleView);
      int visibleRange=recyclerView.getChildCount();
      int lastVisiblePosition=firstVisiblePosition+visibleRange;
      int itemCount=recyclerView.getAdapter().getItemCount();
      int position;
      if(firstVisiblePosition==0)
        position=0;
      else if(lastVisiblePosition==itemCount-1)
        position=itemCount-1;
      else
        position=firstVisiblePosition;
      float proportion=(float)position/(float)itemCount;
      setPosition(height*proportion);
      }
    }
  }

这个自定义的线性布局：

public class FastScroller extends LinearLayout
  {
  private static final int BUBBLE_ANIMATION_DURATION=100;
  private static final int TRACK_SNAP_RANGE=5;

  private TextView bubble;
  private View handle;
  private RecyclerView recyclerView;
  private final ScrollListener scrollListener=new ScrollListener();
  private int height;

  private ObjectAnimator currentAnimator=null;

  public FastScroller(final Context context,final AttributeSet attrs,final int defStyleAttr)
    {
    super(context,attrs,defStyleAttr);
    initialise(context);
    }

  public FastScroller(final Context context)
    {
    super(context);
    initialise(context);
    }

  public FastScroller(final Context context,final AttributeSet attrs)
    {
    super(context,attrs);
    initialise(context);
    }

  private void initialise(Context context)
    {
    setOrientation(HORIZONTAL);
    setClipChildren(false);
    LayoutInflater inflater=LayoutInflater.from(context);
    inflater.inflate(R.layout.recycler_view_fast_scroller__fast_scroller,this,true);
    bubble=(TextView)findViewById(R.id.fastscroller_bubble);
    handle=findViewById(R.id.fastscroller_handle);
    bubble.setVisibility(INVISIBLE);
    }

  @Override
  protected void onSizeChanged(int w,int h,int oldw,int oldh)
    {
    super.onSizeChanged(w,h,oldw,oldh);
    height=h;
    }

  @Override
  public boolean onTouchEvent(@NonNull MotionEvent event)
    {
    final int action=event.getAction();
    switch(action)
      {
      case MotionEvent.ACTION_DOWN:
        if(event.getX()<handle.getX())
          return false;
        if(currentAnimator!=null)
          currentAnimator.cancel();
        if(bubble.getVisibility()==INVISIBLE)
          showBubble();
        handle.setSelected(true);
      case MotionEvent.ACTION_MOVE:
        setPosition(event.getY());
        setRecyclerViewPosition(event.getY());
        return true;
      case MotionEvent.ACTION_UP:
      case MotionEvent.ACTION_CANCEL:
        handle.setSelected(false);
        hideBubble();
        return true;
      }
    return super.onTouchEvent(event);
    }

  public void setRecyclerView(RecyclerView recyclerView)
    {
    this.recyclerView=recyclerView;
    recyclerView.setOnScrollListener(scrollListener);
    }

  private void setRecyclerViewPosition(float y)
    {
    if(recyclerView!=null)
      {
      int itemCount=recyclerView.getAdapter().getItemCount();
      float proportion;
      if(handle.getY()==0)
        proportion=0f;
      else if(handle.getY()+handle.getHeight()>=height-TRACK_SNAP_RANGE)
        proportion=1f;
      else
        proportion=y/(float)height;
      int targetPos=getValueInRange(0,itemCount-1,(int)(proportion*(float)itemCount));
      recyclerView.scrollToPosition(targetPos);
      String bubbleText=((BubbleTextGetter)recyclerView.getAdapter()).getTextToShowInBubble(targetPos);
      bubble.setText(bubbleText);
      }
    }

  private int getValueInRange(int min,int max,int value)
    {
    int minimum=Math.max(min,value);
    return Math.min(minimum,max);
    }

  private void setPosition(float y)
    {
    int bubbleHeight=bubble.getHeight();
    int handleHeight=handle.getHeight();
    handle.setY(getValueInRange(0,height-handleHeight,(int)(y-handleHeight/2)));
    bubble.setY(getValueInRange(0,height-bubbleHeight-handleHeight/2,(int)(y-bubbleHeight)));
    }

  private void showBubble()
    {
    AnimatorSet animatorSet=new AnimatorSet();
    bubble.setVisibility(VISIBLE);
    if(currentAnimator!=null)
      currentAnimator.cancel();
    currentAnimator=ObjectAnimator.ofFloat(bubble,"alpha",0f,1f).setDuration(BUBBLE_ANIMATION_DURATION);
    currentAnimator.start();
    }

  private void hideBubble()
    {
    if(currentAnimator!=null)
      currentAnimator.cancel();
    currentAnimator=ObjectAnimator.ofFloat(bubble,"alpha",1f,0f).setDuration(BUBBLE_ANIMATION_DURATION);
    currentAnimator.addListener(new AnimatorListenerAdapter()
    {
    @Override
    public void onAnimationEnd(Animator animation)
      {
      super.onAnimationEnd(animation);
      bubble.setVisibility(INVISIBLE);
      currentAnimator=null;
      }

    @Override
    public void onAnimationCancel(Animator animation)
      {
      super.onAnimationCancel(animation);
      bubble.setVisibility(INVISIBLE);
      currentAnimator=null;
      }
    });
    currentAnimator.start();
    }

活动的最后一步onCreate：

    setContentView(R.layout.activity_main);
    RecyclerView recyclerView =(RecyclerView)findViewById(R.id.activity_main_recyclerview);


    FastScroller fastScroller=(FastScroller)findViewById(R.id.fastscroller);
    fastScroller.setRecyclerView(recyclerView);

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/theme_background"
    android:id="@+id/drawerlayout">

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:id="@+id/activity_main_id"
        tools:context="objectdistance.ajai.ram.sita.gallery.MainActivity">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleMarginEnd="64dp"
                android:fitsSystemWindows="true">

                <ImageView
                    android:id="@+id/imagetoolbar"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    android:foreground="@drawable/image_header_foreground"
                    app:layout_scrollFlags="scroll"
                    app:layout_collapseMode="parallax"/>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    android:background="@drawable/theme_background"
                    app:layout_collapseMode="pin" >

                    <Spinner
                        android:id="@+id/spinner_nav"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:dropDownVerticalOffset="?attr/actionBarSize" />

                </android.support.v7.widget.Toolbar>

            </android.support.design.widget.CollapsingToolbarLayout>

        </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/activity_main_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="@dimen/activity_main_height"
        android:background="@android:color/darker_gray" />
 </android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>

Answer 3

要实现类似于电话联系人列表或与问题中给出的图像相同且具有文本和图像的图像，This 是我遇到的最佳解决方案！

这适用于自定义列表，因为图像可能需要与名称一起存在。以上解决方案只有String的列表或数组，可能不是每个人都需要！

只需 3 个简单步骤：

1.添加依赖implementation 'com.simplecityapps:recyclerview-fastscroll:2.0.1'

2.将您的RecyclerView 替换为com.simplecityapps.recyclerview_fastscroll.views.FastScrollRecyclerView

3. 在您的 recyclerview 适配器中实现 FastScrollRecyclerView.SectionedAdapter

完成了！