Горизонтальная прокрутка RecyclerView в центре
Я пытаюсь сделать вид с карусели здесь, используя RecyclerView, я хочу, чтобы элемент защелкнул середину экрана при прокрутке, по одному элементу за раз. Я пробовал использовать recyclerView.setScrollingTouchSlop(RecyclerView.TOUCH_SLOP_PAGING);
но представление по-прежнему прокручивается плавно, я также попытался реализовать свою собственную логику с помощью прокручивающего прослушивателя следующим образом:
recyclerView.setOnScrollListener(new OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
Log.v("Offset ", recyclerView.getWidth() + "");
if (newState == 0) {
try {
recyclerView.smoothScrollToPosition(layoutManager.findLastVisibleItemPosition());
recyclerView.scrollBy(20,0);
if (layoutManager.findLastVisibleItemPosition() >= recyclerView.getAdapter().getItemCount() - 1) {
Beam refresh = new Beam();
refresh.execute(createUrl());
}
} catch (Exception e) {
e.printStackTrace();
}
}
Салфетка справа налево работает нормально сейчас, но не наоборот, что мне здесь не хватает?
Ответы
Ответ 1
С LinearSnapHelper
, это сейчас очень просто.
Все, что вам нужно сделать, это следующее:
SnapHelper helper = new LinearSnapHelper();
helper.attachToRecyclerView(recyclerView);
Обновление
Доступно с 25.1.0, PagerSnapHelper
может помочь достичь эффекта ViewPager
. Используйте его, как вы бы использовали LinearSnapHelper
.
Старый способ обхода:
Если вы хотите, чтобы он был похож на ViewPager
, попробуйте это вместо:
LinearSnapHelper snapHelper = new LinearSnapHelper() {
@Override
public int findTargetSnapPosition(RecyclerView.LayoutManager layoutManager, int velocityX, int velocityY) {
View centerView = findSnapView(layoutManager);
if (centerView == null)
return RecyclerView.NO_POSITION;
int position = layoutManager.getPosition(centerView);
int targetPosition = -1;
if (layoutManager.canScrollHorizontally()) {
if (velocityX < 0) {
targetPosition = position - 1;
} else {
targetPosition = position + 1;
}
}
if (layoutManager.canScrollVertically()) {
if (velocityY < 0) {
targetPosition = position - 1;
} else {
targetPosition = position + 1;
}
}
final int firstItem = 0;
final int lastItem = layoutManager.getItemCount() - 1;
targetPosition = Math.min(lastItem, Math.max(targetPosition, firstItem));
return targetPosition;
}
};
snapHelper.attachToRecyclerView(recyclerView);
Реализация выше просто возвращает позицию рядом с текущим элементом (в центре) в зависимости от направления скорости, независимо от величины.
Первый - это первое партийное решение, включенное в библиотеку поддержки 24.2.0.
Это означает, что вы должны добавить это в свой модуль приложения build.gradle
или обновить его.
compile "com.android.support:recyclerview-v7:24.2.0"
Ответ 2
Обновление Google I/O 2019:
ViewPager2 здесь!
Google только что объявил во время выступления "Что нового в Android" (также известное как "Сводка Android"), что они работают над новым ViewPager на основе RecyclerView!
Из слайдов:
Нравится ViewPager, но лучше
- Простая миграция из ViewPager
- Основано на RecyclerView
- Поддержка режима справа налево
- Позволяет вертикальный пейджинг
- Улучшенные уведомления об изменении набора данных
Вы можете проверить последнюю версию здесь и заметки о выпуске здесь. Существует также официальный образец.
Личное мнение: я думаю, что это действительно необходимое дополнение. Недавно у меня было много проблем с PagerSnapHelper
колеблющимся влево-вправо на неопределенное время - смотрите билет, который я открыл.
Новый ответ (2016):
Теперь вы можете просто использовать SnapHelper.
Если вы хотите, чтобы привязка по центру была похожа на ViewPager, используйте PagerSnapHelper:
SnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(recyclerView);
Существует также LinearSnapHelper. Я попробовал это, и если вы бросаете с энергией, то прокручивает 2 предмета с 1 броском. Лично мне это не понравилось, но я решил сам - попытка займет всего несколько секунд.
Оригинальный ответ (2016):
После многих часов попыток найти 3 различных решения, найденных здесь, в SO, я наконец-то нашел решение, которое очень близко имитирует поведение, обнаруженное в ViewPager
.
Решение основано на решении @eDizzle solution, которое, я считаю, я достаточно улучшил, чтобы сказать, что оно работает почти как ViewPager
.
Важно: ширина элементов RecyclerView
точно такая же, как у экрана. Я не пробовал с другими размерами. Также я использую его с горизонтальным LinearLayoutManager
. Я думаю, что вам нужно будет адаптировать код, если вы хотите вертикальную прокрутку.
Здесь у вас есть код:
public class SnappyRecyclerView extends RecyclerView {
// Use it with a horizontal LinearLayoutManager
// Based on /questions/122509/recyclerview-horizontal-scroll-snap-in-center/747319#747319
public SnappyRecyclerView(Context context) {
super(context);
}
public SnappyRecyclerView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public SnappyRecyclerView(Context context, @Nullable AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
public boolean fling(int velocityX, int velocityY) {
LinearLayoutManager linearLayoutManager = (LinearLayoutManager) getLayoutManager();
int screenWidth = Resources.getSystem().getDisplayMetrics().widthPixels;
// views on the screen
int lastVisibleItemPosition = linearLayoutManager.findLastVisibleItemPosition();
View lastView = linearLayoutManager.findViewByPosition(lastVisibleItemPosition);
int firstVisibleItemPosition = linearLayoutManager.findFirstVisibleItemPosition();
View firstView = linearLayoutManager.findViewByPosition(firstVisibleItemPosition);
// distance we need to scroll
int leftMargin = (screenWidth - lastView.getWidth()) / 2;
int rightMargin = (screenWidth - firstView.getWidth()) / 2 + firstView.getWidth();
int leftEdge = lastView.getLeft();
int rightEdge = firstView.getRight();
int scrollDistanceLeft = leftEdge - leftMargin;
int scrollDistanceRight = rightMargin - rightEdge;
if (Math.abs(velocityX) < 1000) {
// The fling is slow -> stay at the current page if we are less than half through,
// or go to the next page if more than half through
if (leftEdge > screenWidth / 2) {
// go to next page
smoothScrollBy(-scrollDistanceRight, 0);
} else if (rightEdge < screenWidth / 2) {
// go to next page
smoothScrollBy(scrollDistanceLeft, 0);
} else {
// stay at current page
if (velocityX > 0) {
smoothScrollBy(-scrollDistanceRight, 0);
} else {
smoothScrollBy(scrollDistanceLeft, 0);
}
}
return true;
} else {
// The fling is fast -> go to next page
if (velocityX > 0) {
smoothScrollBy(scrollDistanceLeft, 0);
} else {
smoothScrollBy(-scrollDistanceRight, 0);
}
return true;
}
}
@Override
public void onScrollStateChanged(int state) {
super.onScrollStateChanged(state);
// If you tap on the phone while the RecyclerView is scrolling it will stop in the middle.
// This code fixes this. This code is not strictly necessary but it improves the behaviour.
if (state == SCROLL_STATE_IDLE) {
LinearLayoutManager linearLayoutManager = (LinearLayoutManager) getLayoutManager();
int screenWidth = Resources.getSystem().getDisplayMetrics().widthPixels;
// views on the screen
int lastVisibleItemPosition = linearLayoutManager.findLastVisibleItemPosition();
View lastView = linearLayoutManager.findViewByPosition(lastVisibleItemPosition);
int firstVisibleItemPosition = linearLayoutManager.findFirstVisibleItemPosition();
View firstView = linearLayoutManager.findViewByPosition(firstVisibleItemPosition);
// distance we need to scroll
int leftMargin = (screenWidth - lastView.getWidth()) / 2;
int rightMargin = (screenWidth - firstView.getWidth()) / 2 + firstView.getWidth();
int leftEdge = lastView.getLeft();
int rightEdge = firstView.getRight();
int scrollDistanceLeft = leftEdge - leftMargin;
int scrollDistanceRight = rightMargin - rightEdge;
if (leftEdge > screenWidth / 2) {
smoothScrollBy(-scrollDistanceRight, 0);
} else if (rightEdge < screenWidth / 2) {
smoothScrollBy(scrollDistanceLeft, 0);
}
}
}
}
Наслаждайтесь!
Ответ 3
Если цель состоит в том, чтобы RecyclerView
имитировать поведение ViewPager
, существует довольно простой подход
RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false);
SnapHelper snapHelper = new PagerSnapHelper();
recyclerView.setLayoutManager(layoutManager);
snapHelper.attachToRecyclerView(mRecyclerView);
Используя PagerSnapHelper
, вы можете получить такое поведение, как ViewPager
Ответ 4
Вам нужно использовать findFirstVisibleItemPosition для перехода в противоположном направлении. И для определения того, в каком направлении находится салфетка, вам нужно получить либо скорость движения, либо изменение x. Я подошел к этой проблеме немного под другим углом, чем у вас.
Создайте новый класс, который расширяет класс RecyclerView, а затем переопределяет метод Fling RecyclerView следующим образом:
@Override
public boolean fling(int velocityX, int velocityY) {
LinearLayoutManager linearLayoutManager = (LinearLayoutManager) getLayoutManager();
//these four variables identify the views you see on screen.
int lastVisibleView = linearLayoutManager.findLastVisibleItemPosition();
int firstVisibleView = linearLayoutManager.findFirstVisibleItemPosition();
View firstView = linearLayoutManager.findViewByPosition(firstVisibleView);
View lastView = linearLayoutManager.findViewByPosition(lastVisibleView);
//these variables get the distance you need to scroll in order to center your views.
//my views have variable sizes, so I need to calculate side margins separately.
//note the subtle difference in how right and left margins are calculated, as well as
//the resulting scroll distances.
int leftMargin = (screenWidth - lastView.getWidth()) / 2;
int rightMargin = (screenWidth - firstView.getWidth()) / 2 + firstView.getWidth();
int leftEdge = lastView.getLeft();
int rightEdge = firstView.getRight();
int scrollDistanceLeft = leftEdge - leftMargin;
int scrollDistanceRight = rightMargin - rightEdge;
//if(user swipes to the left)
if(velocityX > 0) smoothScrollBy(scrollDistanceLeft, 0);
else smoothScrollBy(-scrollDistanceRight, 0);
return true;
}
Ответ 5
Мое решение:
/**
* Horizontal linear layout manager whose smoothScrollToPosition() centers
* on the target item
*/
class ItemLayoutManager extends LinearLayoutManager {
private int centeredItemOffset;
public ItemLayoutManager(Context context) {
super(context, LinearLayoutManager.HORIZONTAL, false);
}
@Override
public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
LinearSmoothScroller linearSmoothScroller = new Scroller(recyclerView.getContext());
linearSmoothScroller.setTargetPosition(position);
startSmoothScroll(linearSmoothScroller);
}
public void setCenteredItemOffset(int centeredItemOffset) {
this.centeredItemOffset = centeredItemOffset;
}
/**
* ********** Inner Classes **********
*/
private class Scroller extends LinearSmoothScroller {
public Scroller(Context context) {
super(context);
}
@Override
public PointF computeScrollVectorForPosition(int targetPosition) {
return ItemLayoutManager.this.computeScrollVectorForPosition(targetPosition);
}
@Override
public int calculateDxToMakeVisible(View view, int snapPreference) {
return super.calculateDxToMakeVisible(view, SNAP_TO_START) + centeredItemOffset;
}
}
}
Я передаю этот менеджер компоновки в RecycledView и устанавливаю смещение, необходимое для элементов центра. Все мои объекты имеют одинаковую ширину, поэтому постоянное смещение в порядке
Ответ 6
Просто добавьте padding
и margin
для recyclerView
и recyclerView item
:
recyclerView элемент:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/parentLayout"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_marginLeft="8dp" <!-- here -->
android:layout_marginRight="8dp" <!-- here -->
android:layout_width="match_parent"
android:layout_height="200dp">
<!-- child views -->
</RelativeLayout>
recyclerView:
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="8dp" <!-- here -->
android:paddingRight="8dp" <!-- here -->
android:clipToPadding="false" <!-- important!-->
android:scrollbars="none" />
и установите PagerSnapHelper
:
int displayWidth = Resources.getSystem().getDisplayMetrics().widthPixels;
parentLayout.getLayoutParams().width = displayWidth - Utils.dpToPx(16) * 4;
SnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(recyclerView);
dp to px:
public static int dpToPx(int dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().getDisplayMetrics());
}
результат:
![enter image description here]()
Ответ 7
PagerSnapHelper
не работает с GridLayoutManager
с spanCount> 1, поэтому мое решение в этом случае:
class GridPagerSnapHelper : PagerSnapHelper() {
override fun findTargetSnapPosition(layoutManager: RecyclerView.LayoutManager?, velocityX: Int, velocityY: Int): Int {
val forwardDirection = if (layoutManager?.canScrollHorizontally() == true) {
velocityX > 0
} else {
velocityY > 0
}
val centerPosition = super.findTargetSnapPosition(layoutManager, velocityX, velocityY)
return centerPosition +
if (forwardDirection) (layoutManager as GridLayoutManager).spanCount - 1 else 0
}
}