केंद्र में RecyclerView क्षैतिज स्क्रॉल स्नैप


89

मैं एक हिंडोला जैसा दृश्य बनाने की कोशिश कर रहा हूँ यहाँ 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();
                        }
                    }

दाएं से बाएं स्वाइप अब ठीक काम कर रहा है, लेकिन दूसरे तरीके से नहीं, मैं यहां क्या याद कर रहा हूं?

जवाबों:


165

इसके साथ 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"

यह मेरे काम नहीं आया (लेकिन समाधान @Albert Vila Calvo ने किया)। क्या आपने इसे लागू किया है? क्या हम इससे तरीकों को ओवरराइड करने वाले हैं? मुझे लगता है कि कक्षा को बॉक्स से बाहर का सारा काम करना चाहिए
galaxigirl

हां, इसलिए जवाब। मैंने हालांकि पूरी तरह से परीक्षण नहीं किया है। स्पष्ट होने के लिए, मैंने इसे एक क्षैतिज के साथ किया LinearLayoutManagerजहां सभी आकार आकार में नियमित थे। और कुछ नहीं बल्कि ऊपर दिए गए स्निपेट की जरूरत है।
razzledazzle 15

@galaxigirl माफी, मैं समझ गया हूं कि आपका क्या मतलब है और कुछ संपादन को स्वीकार करते हुए, कृपया टिप्पणी करें। इस के साथ एक वैकल्पिक समाधान है LinearSnapHelper
razzledazzle

यह मेरे लिए सही काम किया। @galaxigirl इस विधि को ओवरराइड करने में मदद करता है कि रैखिक स्नैप हेल्पर अन्यथा निकटतम आइटम पर स्नैप करेगा जब स्क्रॉल बस रहा है, न कि केवल अगले / पिछले आइटम। इसके लिए बहुत बहुत धन्यवाद, razzledazzle
AA_PV

LinearSnapHelper मेरे लिए काम करने वाला प्रारंभिक समाधान था, लेकिन ऐसा लगता है कि PagerSnapHelper ने स्वाइपिंग को एक बेहतर एनीमेशन दिया।
लियोनार्डो

77

Google I / O 2019 अपडेट

ViewPager2 यहाँ है!

Google ने सिर्फ 'व्हाट्स न्यू इन एंड्रॉइड' (उर्फ 'एंड्रॉइड कीनोट') की बात करते हुए घोषणा की कि वे RecyclerView पर आधारित एक नए ViewPager पर काम कर रहे हैं!

स्लाइड्स से:

ViewPager की तरह, लेकिन बेहतर

  • ViewPager से आसान प्रवास
  • RecyclerView पर आधारित है
  • दाएँ-से-बाएँ मोड का समर्थन
  • ऊर्ध्वाधर पेजिंग की अनुमति देता है
  • बेहतर डेटासेट सूचनाएँ बदलते हैं

आप यहां नवीनतम संस्करण और यहां जारी नोटों की जांच कर सकते हैं । एक आधिकारिक नमूना भी है ।

व्यक्तिगत राय: मुझे लगता है कि यह वास्तव में आवश्यक जोड़ है। मुझे हाल ही में PagerSnapHelper अनिश्चित काल के लिए बाएं ओर के दोलन के साथ बहुत परेशानी हुई है - मैंने जो टिकट खोला है, उसे देखें।


नया उत्तर (2016)

अब आप केवल SnapHelper का उपयोग कर सकते हैं ।

यदि आप ViewPager के समान एक केंद्र-संरेखित तड़क- भड़क वाला व्यवहार चाहते हैं, तो PagerSnapHelper का उपयोग करें :

SnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(recyclerView);

एक LinearSnapHelper भी है । मैंने इसे आज़माया है और अगर आप ऊर्जा के साथ भागते हैं तो यह 1 आइटम के साथ 2 वस्तुओं को स्क्रॉल करता है। व्यक्तिगत रूप से मुझे यह पसंद नहीं था, लेकिन बस खुद से निर्णय लें - यह कोशिश करने में केवल सेकंड लगते हैं।


मूल उत्तर (2016)

एसओ में यहां मिले 3 अलग-अलग समाधानों की कोशिश करने के कई घंटों के बाद मैंने आखिरकार एक समाधान बनाया है जो एक में पाए जाने वाले व्यवहार की बहुत बारीकी से नकल करता है ViewPager

समाधान @eDizzle समाधान पर आधारित है , जो मुझे लगता है कि मैंने यह कहने के लिए पर्याप्त सुधार किया है कि यह लगभग एक तरह से काम करता है ViewPager

महत्वपूर्ण: मेरे RecyclerViewआइटम की चौड़ाई स्क्रीन के समान है। मैंने अन्य आकारों के साथ प्रयास नहीं किया है। इसके अलावा मैं इसे एक क्षैतिज के साथ उपयोग करता हूं LinearLayoutManager। मुझे लगता है कि यदि आप वर्टिकल स्क्रॉल चाहते हैं तो आपको कोड को अनुकूलित करने की आवश्यकता होगी।

यहाँ आपके पास कोड है:

public class SnappyRecyclerView extends RecyclerView {

    // Use it with a horizontal LinearLayoutManager
    // Based on https://stackoverflow.com/a/29171652/4034572

    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);
            }
        }
    }

}

का आनंद लें!


OnScrollStateChanged () पर अच्छा कैच; अन्यथा, एक छोटा सा बग मौजूद है यदि हम धीरे-धीरे RecyclerView को स्वाइप करते हैं। धन्यवाद!
मौरिसियो सार्तोरी

मार्जिन का समर्थन करने के लिए (एंड्रॉइड: लेआउट_मारिनस्टार्ट = "16 डीपी") मैंने इंट्री स्क्रीनशॉट के साथ कोशिश की = गेटविथ (); और यह काम करने लगता है।
ईगल

AWESOOOMMEEEEEEEEE
3

1
@galaxigirl नहीं, मैंने अभी तक LinearSnapHelper का प्रयास नहीं किया है। मैंने सिर्फ जवाब अपडेट किया ताकि लोगों को आधिकारिक समाधान के बारे में पता चले। मेरा समाधान मेरे ऐप पर बिना किसी समस्या के काम करता है।
अल्बर्ट विला कैल्वो

1
@AlbertVilaCalvo मैंने LinearSnapHelper की कोशिश की। LinearSnapHelper एक Scroller के साथ काम करता है। यह गुरुत्वाकर्षण और चमकते वेग के आधार पर स्क्रॉल और स्नैप करता है। अधिक गति से अधिक पृष्ठ स्क्रॉल किए जाते हैं। मैं व्यवहार की तरह एक ViewPager के लिए यह सिफारिश नहीं करेंगे।
21

47

यदि लक्ष्य 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
मैं LinearSnapHelperइसके बजाय का उपयोग कर रहा हूं PagerSnapHelper और यह मेरे लिए काम करता है
fanjavaid

1
हां, इसमें कोई स्नैप इफेक्ट नहीं हैLinearSnapHelper
Boonya Kitpitak

1
यह देखने पर आइटम चिपक जाता है स्केलेबल सक्षम करता है
सैम

@BoonyaKitpitak, मैंने कोशिश की LinearSnapHelper, और यह एक मध्य वस्तु को झपकी लेता है। PagerSnapHelperआसानी से स्क्रॉल करने में बाधा (कम से कम, चित्रों की एक सूची)।
कूलमाइंड

@BoonyaKitpitak आप मुझे बता सकते हैं कि यह कैसे करना है, सेंटी में एक आइटम पूरी तरह से दिखाई देता है और साइड आइटम आधा दिखाई देता है?
रूचा भट्ट जोशी

30

आपको विपरीत दिशा में जाने के लिए findFirstVoubleItemPosition का उपयोग करने की आवश्यकता है। और यह पता लगाने के लिए कि स्वाइप किस दिशा में है, आपको या तो फ्लशिंग वेग या एक्स में परिवर्तन की आवश्यकता होगी। मैंने आपकी तुलना में इस समस्या को थोड़ा अलग कोण से संपर्क किया।

एक नया वर्ग बनाएं जो RecyclerView वर्ग का विस्तार करता है और फिर 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;
}

स्क्रीनविद को कहाँ परिभाषित किया गया है?
ltsai

@ इत्साई: उफ़! अच्छा प्रश्न। यह एक वैरिएबल है जिसे मैंने कक्षा में कहीं और सेट किया है। यह पिक्सेल में डिवाइस की स्क्रीन चौड़ाई है, घनत्व पिक्सेल नहीं, क्योंकि smoothScrollBy विधि के लिए आपके द्वारा स्क्रॉल करने के लिए इच्छित पिक्सेल की संख्या की आवश्यकता होती है।
eDizzle

3
@ltsai आप स्क्रीनवार्ड के बजाय getWidth () (recyclerview.getWidth ()) में बदल सकते हैं। ScreenWidth सही ढंग से काम नहीं करता है जब RecyclerView स्क्रीन की चौड़ाई से छोटा है।
VAdaihiep

मैंने RecyclerView का विस्तार करने की कोशिश की, लेकिन मुझे "क्लास कस्टम RecyclerView को त्रुटि देने में त्रुटि हो रही है"। क्या आप मदद कर सकते हैं? धन्यवाद

@bEtTyBarnes: आप किसी अन्य प्रश्न फ़ीड में खोज करना चाहते हैं। यहां प्रारंभिक प्रश्न के साथ यह बहुत अच्छा है।
ईज़्ज़ेल

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 से px:

public static int dpToPx(int dp) {
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().getDisplayMetrics());
}

परिणाम:

यहाँ छवि विवरण दर्ज करें


क्या वस्तुओं के बीच परिवर्तनशील पैडिंग प्राप्त करने का एक तरीका है? जैसे अगर पहले और आखिरी कार्ड को अगले / प्रचलित कार्डों के अधिक दिखाने के लिए केंद्रित करने की आवश्यकता नहीं है बनाम मध्यवर्ती कार्ड केंद्रित हो रहे हैं?
रामप्रसाद बिस्मिल

2

मेरा समाधान:

/**
 * 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 में पास करता हूं और केंद्र आइटम के लिए आवश्यक ऑफसेट सेट करता हूं। मेरे सभी आइटमों की चौड़ाई समान है इसलिए निरंतर ऑफसेट ठीक है


0

PagerSnapHelperGridLayoutManagerस्पैनकाउंट> 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
    }
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.