Как добавить быстрый скроллер в RecyclerView
Фон
В ListView вы можете иметь быстрый скроллер, который позволял вам перетаскивать полосу прокрутки, чтобы легко прокручивать ее туда, где вы хотели (используя fastScrollEnabled)
Вместе с классом SectionIndexer "и, при необходимости, некоторыми атрибутами, вы можете иметь приятное всплывающее окно, которое показывает, как вы используйте эту полосу прокрутки (ссылка здесь).
Такое приложение отображается в приложении контактов, чтобы вы могли легко прокручивать его до определенных букв.
Проблема
У RecyclerView, похоже, нет ни одного из них. Даже быстрый прокрутка.
Вопрос
Как добавить функцию быстрого скроллера для RecyclerView?
Ответы
Ответ 1
Поскольку у всех сторонних библиотек были проблемы, я решил собрать то, что могу найти (в основном из здесь), исправить все и опубликовать мой собственный POC быстрого скроллера RecyclerView:
https://github.com/AndroidDeveloperLB/LollipopContactsRecyclerViewFastScroller
использование:
-
сделать RecyclerView.Adapter, который реализует BubbleTextGetter, который задал позицию в данных, вернет текст, который будет отображаться в всплывающем окне.
-
расположите FastScroller внутри макета, который контейнера RecyclerView (возможно, в правой области).
-
Настроить FastScroller FastScroller
Некоторые недостатки:
- не поддерживает изменение ориентации, но, вероятно, легко исправить.
- не поддерживает другие layoutManager. Только LinearLayoutManager
- Требуется 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>
MainActivity
...
fastScroller=(FastScroller)findViewById(R.id.fastscroller);
fastScroller.setRecyclerView(recyclerView);
FastScroller
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();
}
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);
}
}
}
Ответ 2
Я наткнулся на этот вопрос несколько дней назад, когда столкнулся с этой ситуацией. Вот моя реализация примера FastScroll для RecyclerView:
Попробуйте запустить пример приложения и запустите код, чтобы увидеть довольно простое использование простого виджета RecyclerViewFastScroller. Существует информация о github, но я буду включать основное использование здесь для вертикального быстрого скроллера.
В качестве полного примера см. пример приложения в репо.
Основное использование
В операции или фрагменте XML, где находится ваш RecyclerView, включите объект VerticalRecyclerViewFastScroller. Следующий пример относится к относительной схеме:
...
<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;
}
...
Надеюсь, это поможет!
EDIT: теперь добавлена поддержка индикаторов раздела Android-Lollipop-Contacts-style! Подробнее см. примерную реализацию приложения.
Ответ 3
Есть много неотвеченных вопросов о RecyclerView
и индексах быстрого прокрутки/раздела, попробуйте перегруппироваться и собрать наши мнения и информацию здесь.
Короткий ответ: НЕТ, вы не можете включить быстрый прокрутка, потому что RecyclerView не содержит объект FastScroller и любые связанные с ним переменные логического состояния. Это потому, что RecyclerView
не AbsListView.
С другой стороны, невозможно реализовать RecyclerView
, который содержит сбрасываемую версию FastScroller
и необходимую логику для быстрой прокрутки, но я пока не видел никакой реализации этого.
Пожалуйста, поделитесь своим мнением об этом или, если вы считаете, что я не прав.
Ответ 4
Библиотека поддержки Android 26.0.0 теперь поддерживает fastScrollEnabled
Новый флаг буфера fastScrollEnabled для RecyclerView.
Если включено, необходимо установить fastScrollHorizontalThumbDrawable, fastScrollHorizontalTrackDrawable, fastScrollVerticalThumbDrawable и fastScrollVerticalTrackDrawable.
Образец - https://android.jlelse.eu/fast-scrolling-with-recyclerview-2b89d4574688
Ответ 5
Вы также можете использовать A-Z Fastscroll для RecyclerView. Это стиль iOS.
https://github.com/code-computerlove/FastScrollRecyclerView/
Как использовать его:
- Замените
android.support.v7.widget.RecyclerView
на com.codecomputerlove.fastscrollrecyclerviewdemo.FastScrollRecyclerView
- Адаптеру необходимо реализовать FastScrollRecyclerViewInterface и переопределить
getMapIndex()
. Функция должна возвращать mapIndex. Загляните в calculateIndexesForName()
за вдохновение в том, как его создать. После создания передайте его адаптеру в конструкторе.
- Создайте экземпляр
FastScrollRecyclerViewItemDecoration
и добавьте его в свой RecyclerView
FastScrollRecyclerViewItemDecoration decoration = new FastScrollRecyclerViewItemDecoration(this); mRecyclerView.addItemDecoration(decoration);
- добавить
<dimen name="fast_scroll_overlay_text_size">100dp</dimen>
к вашему
/values/dimens.xml
. Это размер dp наложенной буквы
Ответ 6
Вы можете попробовать наш lib: https://github.com/FutureMind/recycler-fast-scroll. Он все еще находится на раннем этапе разработки, но был разработан специально для решения проблемы гладкости, с которой мы столкнулись с другими библиотеками. Он использует немного другой механизм. Он также поддерживает горизонтальный LayoutManager, а также поддерживает многоколоночные настройки в ближайшем будущем.
Изменить: теперь есть некоторые опрятные настройки.
Ответ 7
Функциональность FastScroller добавлена из библиотеки Android 26.0.0 для RecyclerView
скомпилировать зависимость
compile 'com.android.support:recyclerview-v7:26.1.0'
compile 'com.android.support:design:26.1.0'
добавьте depedency в project.gradle
maven {
url "https://maven.google.com"
}
ваш файл recyclerview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:tool="http://schemas.android.com/tools"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tool:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/songlist"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:fastScrollEnabled="true"
app:fastScrollVerticalThumbDrawable="@drawable/thumb_drawable"
app:fastScrollVerticalTrackDrawable="@drawable/line_drawable"
app:fastScrollHorizontalThumbDrawable="@drawable/thumb_drawable"
app:fastScrollHorizontalTrackDrawable="@drawable/line_drawable"
/></LinearLayout>
thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="44dp"
android:topRightRadius="44dp"
android:bottomLeftRadius="44dp"
android:bottomRightRadius="44dp" />
<padding
android:paddingLeft="22dp"
android:paddingRight="22dp" />
<solid android:color="#f73831" />
</shape>
line.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/dark_grey" />
<padding
android:top="10dp"
android:left="10dp"
android:right="10dp"
android:bottom="10dp"/>
</shape>
thumb_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/thumb"
android:state_focused="true"
android:state_pressed="true" />
<item android:drawable="@drawable/thumb"
android:state_focused="false"
android:state_pressed="true" />
<item android:drawable="@drawable/thumb"
android:state_focused="true" />
<item android:drawable="@drawable/thumb"
android:state_focused="false"
android:state_pressed="false" />
</selector>
line_drawble.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/line"
android:state_focused="true"
android:state_pressed="true" />
<item android:drawable="@drawable/line"
android:state_focused="false"
android:state_pressed="true" />
<item android:drawable="@drawable/line"
android:state_focused="true" />
<item android:drawable="@drawable/line"
android:state_focused="false"
android:state_pressed="false" />
</selector>
Ответ 8
Существует положение реализации полос прокрутки с RecycleView
и его LayoutManager
.
Например: computeVerticalScrollExtent()
, computeVerticalScrollOffset()
и computeVerticalScrollRange()
может предоставить информацию для постоянного позиционирования вертикального большого пальца прокрутки в нужном месте.
Эти методы также присутствуют в LayoutManager
для делегирования фактических измерений. Поэтому используемая реализация LayoutManager
должна поддерживать эти измерения.
Кроме того, перетаскивание пальца прокрутки может быть перехвачено путем переопределения onInterceptTouchEvent()
RecyclerView
. И после вычисления нужного прокрутки scrollTo()
можно вызвать для обновления RecyclerView
.
Ответ 9
Просто включите быструю прокрутку и добавьте большой палец, трекер для полосы прокрутки, как показано ниже.
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_sensors"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:fastScrollEnabled="true"
app:fastScrollHorizontalThumbDrawable="@drawable/thumb_drawable"
app:fastScrollHorizontalTrackDrawable="@drawable/line_drawable"
app:fastScrollVerticalThumbDrawable="@drawable/thumb_drawable"
app:fastScrollVerticalTrackDrawable="@drawable/line_drawable" />