Android ViewPager - बाईं और दाईं ओर पृष्ठ का पूर्वावलोकन दिखाएं


107

मैं Android का उपयोग कर रहा हूँ ViewPager। मैं जो करना चाहता हूं वह पृष्ठ का पूर्वावलोकन बाईं और दाईं ओर दिखाना है। मैंने देखा है कि मैं pageMarginदाईं ओर का पूर्वावलोकन दिखाने के लिए एक नकारात्मक का उपयोग कैसे कर सकता हूं ।

setPageMargin(-100);

क्या ऐसा भी है कि मैं बाईं ओर के पूर्वावलोकन को दिखा सकता हूं? यह मूल रूप से गैलरी विजेट के समान है जिसे मैं खोज रहा हूं।


अच्छा प्रश्न! मैंने हाल ही में स्रोत की जाँच की है और मुझे लगता है कि अगर आप src कोड को संशोधित नहीं करना चाहते तो कोई बेहतर तरीका नहीं है। क्या setPageMargin(-100)काम सही ढंग से?
मकारसी

जब तक आप टुकड़े के साथ ViewPger का उपयोग नहीं कर रहे हैं, तो GalleryView काम को बेहतर तरीके से करेगा।
अली अलनोमी

मैं गैलरी दृश्य का उपयोग करके ऐसा करने में सक्षम था। किसी भी तरह से दृश्यदर्शी के रूप में। पता नहीं क्यों गैलरी पदावनत है
WillingLearner

यह प्रश्न तब से व्यापक रूप से [यहाँ पोस्ट]] [1] [१]
बेन पियर्सन

मैं टुकड़े के साथ Vierpager का उपयोग कर रहा हूँ। क्या मैं एक ही दृष्टिकोण का उपयोग कर सकता हूं?

जवाबों:


206

बाएं और दाएं पृष्ठों का पूर्वावलोकन दिखाने के लिए निम्नलिखित दो मान निर्धारित करें

  1. viewpager.setClipToPadding(false);
  2. viewpager.setPadding(left,0,right,0);

अगर आपको व्यू पेज में दो पेज के बीच की जगह चाहिए तो ऐड करें

viewpager.setPageMargin(int);

2
हाँ, मैं आपसे सहमत हूँ जीजू Induchoodan .. अधिक जानकारी के लिए देखें blog.neteril.org/blog/2013/10/14/... और stackoverflow.com/questions/13914609/...
श्रीपति

शांत, यह बहुत आसान है :) क्या पेजर के स्विच पृष्ठों पर दाएं और बाएं आकार पर पूर्वावलोकन का आकार संभव है? उदाहरण के लिए - अगर फ़ोकस आउट आउट फ़ोकस - यह स्केल ~ 0.8 होगा, लेकिन जब हम इसे केंद्र में खींचेंगे - स्केल 1 तक बढ़ जाएगा, और सेंटर व्यू से पिछला टुकड़ा स्क्रीन से बाहर जाने पर स्केल बदलकर 0.8 हो जाएगा?
IAMthevoid

यह काम कर रहा है! लेकिन जब मैं केंद्र के लेआउट को ज़ूम करने की कोशिश करता हूं, तो ऊपर और नीचे ज़ूम होता है। पैडिंग के कारण बाएं और दाएं दिखाई नहीं देता है। कृपया प्रश्न को देखें stackoverflow.com/questions/52710076/…
Anooj Krishnan G


73

@JijuInduchoodan द्वारा उत्तर एकदम सही और काम कर रहा है। हालाँकि, चूंकि मैं एंड्रॉइड के लिए अपेक्षाकृत नया हूं, इसलिए इसे ठीक से समझने और सेट करने में मुझे थोड़ा समय लगा। इसलिए, मैं भविष्य के संदर्भ के लिए इस उत्तर को पोस्ट कर रहा हूं और किसी और की मदद करूंगा जो मेरे जैसे ही जूते में है।

if (viewPager == null) 
        {

            // Initializing view pager
            viewPager = (ViewPager) findViewById(R.id.vpLookBook);

            // Disable clip to padding
            viewPager.setClipToPadding(false);
            // set padding manually, the more you set the padding the more you see of prev & next page
            viewPager.setPadding(40, 0, 40, 0);
            // sets a margin b/w individual pages to ensure that there is a gap b/w them
            viewPager.setPageMargin(20);
        }

ViewPager'sएडॉप्टर में पेज की किसी भी चौड़ाई को सेट करने की कोई आवश्यकता नहीं है । पिछले और अगले पृष्ठ को देखने के लिए कोई अतिरिक्त कोड की आवश्यकता नहीं है ViewPager। हालाँकि, यदि आप प्रत्येक पृष्ठ के ऊपरी और निचले भाग में रिक्त स्थान जोड़ना चाहते हैं, तो आप निम्न कोड को ViewPager'sचाइल्ड पेज के पेरेंट लेआउट में सेट कर सकते हैं ।

android:paddingTop="20dp"
android:paddingBottom="20dp"

अंतिम दृश्य पेजर

यह ViewPager का अंतिम रूप होगा।


62

नए ViewPager2 के साथ समाधान

आजकल आपको ViewPager2 का उपयोग करने पर विचार करना चाहिए जो "ViewPager को प्रतिस्थापित करता है, अपने पूर्ववर्ती के अधिकांश दर्द-बिंदुओं को संबोधित करते हुए : "

  • RecyclerView पर आधारित है
  • RTL (दाएँ-से-बाएँ) लेआउट समर्थन
  • ऊर्ध्वाधर अभिविन्यास समर्थन
  • विश्वसनीय फ्रेग्मेंट समर्थन (अंतर्निहित फ़्रैगमेंट संग्रह में परिवर्तन से निपटने सहित)
  • डेटासेट परिवर्तन एनिमेशन ( DiffUtilसमर्थन सहित )

परिणाम

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

कोड

अपनी गतिविधि / प्रगति में, ViewPager2 सेटअप करें:

// MyRecyclerViewAdapter is an standard RecyclerView.Adapter :)
viewPager2.adapter = MyRecyclerViewAdapter() 

// You need to retain one page on each side so that the next and previous items are visible
viewPager2.offscreenPageLimit = 1

// Add a PageTransformer that translates the next and previous items horizontally
// towards the center of the screen, which makes them visible
val nextItemVisiblePx = resources.getDimension(R.dimen.viewpager_next_item_visible)
val currentItemHorizontalMarginPx = resources.getDimension(R.dimen.viewpager_current_item_horizontal_margin)
val pageTranslationX = nextItemVisiblePx + currentItemHorizontalMarginPx
val pageTransformer = ViewPager2.PageTransformer { page: View, position: Float ->
    page.translationX = -pageTranslationX * position
    // Next line scales the item's height. You can remove it if you don't want this effect
    page.scaleY = 1 - (0.25f * abs(position))
    // If you want a fading effect uncomment the next line:
    // page.alpha = 0.25f + (1 - abs(position))
}
viewPager2.setPageTransformer(pageTransformer)

// The ItemDecoration gives the current (centered) item horizontal margin so that
// it doesn't occupy the whole screen width. Without it the items overlap
val itemDecoration = HorizontalMarginItemDecoration(
    context,
    R.dimen.viewpager_current_item_horizontal_margin
)
viewPager2.addItemDecoration(itemDecoration)

जोड़ें HorizontalMarginItemDecoration, जो एक तुच्छ है ItemDecoration:

/**
 * Adds margin to the left and right sides of the RecyclerView item.
 * Adapted from https://stackoverflow.com/a/27664023/4034572
 * @param horizontalMarginInDp the margin resource, in dp.
 */
class HorizontalMarginItemDecoration(context: Context, @DimenRes horizontalMarginInDp: Int) :
    RecyclerView.ItemDecoration() {

    private val horizontalMarginInPx: Int =
        context.resources.getDimension(horizontalMarginInDp).toInt()

    override fun getItemOffsets(
        outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State
    ) {
        outRect.right = horizontalMarginInPx
        outRect.left = horizontalMarginInPx
    }

}

उन आयामों को जोड़ें जो यह नियंत्रित करते हैं कि पिछला / अगला आइटम कितना दिखाई दे रहा है, और वर्तमान आइटम क्षैतिज मार्जिन:

<dimen name="viewpager_next_item_visible">26dp</dimen>
<dimen name="viewpager_current_item_horizontal_margin">42dp</dimen>

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

अंत में ViewPager2अपने लेआउट में जोड़ें :

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

एक महत्वपूर्ण बात: एक ViewPager2आइटम होना चाहिए layout_height="match_parent"(अन्यथा यह एक अवैध तरीके से फेंकता है), इसलिए आपको कुछ ऐसा करना चाहिए:

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" <-- this!
    app:cardCornerRadius="8dp"
    app:cardUseCompatPadding="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="280dp">

        <!-- ... -->

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

PageTransformer उदाहरण

Google ने ViewPager2 पर एक गाइड जोड़ा है जिसमें 2 PageTransformerकार्यान्वयन हैं जो आप एक प्रेरणा के रूप में उपयोग कर सकते हैं: https://developer.android.com/training/animation/screen-slide-2

नए ViewPager2 के बारे में


ओरिओ डिवाइसेस पर समान समस्या, स्टार्टिंग और एंडिंग अन्य डिवाइसेस पर अपेक्षा के अनुसार काम करता है लेकिन व्यूपेजर 2 के बाद ओरिओ। पेजट्रांसफॉर्मर ने इस मुद्दे को हल किया, पैडिंग अभी भी समान हैं और मुझे जोड़ना होगाviewpager.setPageTransformer { page, position -> page.translationX = -1 * position }
zgr

मुझे इस प्रभाव को पाने के लिए व्यू पेज के पेज को थोड़ा आगे बढ़ाना होगा
मुहम्मद साकिब

कोई बात नहीं, मैं इस लाइन को जोड़ना भूल गया setOffscreenPageLimit(1):)
मुहम्मद साकिब

यह अब तक का सबसे अच्छा उपाय है। यह पूरी तरह से काम करता है, लेकिन हां देखें नहीं है कि ViewPager2 के आइटम की चौड़ाई, MATCH_PARENT को ऊंचाई निर्धारित करें।
ख़ुशबू

26

2017 में इस तरह के व्यवहार RecyclerViewको PagerSnapHelper (v7 समर्थन पुस्तकालय के संस्करण 25.1.0 में जोड़ा गया) के साथ उपयोग करके आसानी से प्राप्त किया जा सकता है: ally

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

कुछ समय पहले मुझे इस तरह के दृश्य-चित्र की आवश्यकता थी और एक छोटे पुस्तकालय की तैयारी की:

MetalRecyclerPagerView - आप वहाँ उदाहरण के साथ सभी कोड पा सकते हैं।

मुख्य रूप से इसमें एकल वर्ग फ़ाइल होती है: MetalRecyclerViewPager.java (और दो xmls: attrs.xml और ids.xml )।

आशा है कि यह किसी की मदद करेगा और कुछ घंटे बचाएगा :)


ऑफ टॉपिक, क्योंकि कभी-कभी केवल पेजर की जरूरत होती है, लेकिन जानकर अच्छा लगा! साझा करने के लिए धन्यवाद!
सूद .००

यह कमाल का है। मेरे पास पहले से ही RecyclerView हेल्पर कोड का टन था। बस एक सरल जोड़ने new PagerSnapHelper().attachToRecyclerView(recyclerView)और मैं पृष्ठ तड़क है।
स्टीव

9

अगर कोई अभी भी समाधान की तलाश में है, तो मैंने नकारात्मक मार्जिन का उपयोग किए बिना इसे प्राप्त करने के लिए व्यूपेज को अनुकूलित किया था, यहां एक नमूना परियोजना देखें https://github.com/44kksharma/Android-ViewPager-Carousel-UI यह सबसे अधिक काम करना चाहिए लेकिन आप पेज मार्जिन को अभी भी परिभाषित कर सकते हैं mPager.setPageMargin(margin in pixel);


7

आप इसे xml फ़ाइल में कर सकते हैं, बस नीचे दिए गए कोड का उपयोग करें:

 android:clipToPadding="false"
 android:paddingLeft="XX"
 android:paddingRight="XX"

उदाहरण के लिए:

<androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingLeft="30dp"
        android:paddingRight="30dp" />

नोट: यदि आपको पृष्ठों के बीच स्थान की आवश्यकता है, तो बच्चे के टुकड़े करने के लिए पैडिंग / मार्जिन सेट करें


3
मैंने नीचा दिखाया। माफ़ कर दो भाई। इस बार काम किया !! फिर से उठी
shikhar bansal

1

विभिन्न स्क्रीन पर ऐसा करने के लिए संघर्ष करने वालों के लिए,

mPager.setClipToPadding(false);
DisplayMetrics displayMetrics = new DisplayMetrics();
self.getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int width = displayMetrics.widthPixels;
int paddingToSet = width/4; //set this ratio according to how much of the next and previos screen you want to show.
mPager.setPadding(paddingToSet,0,paddingToSet,0);

0

ध्यान दें कि जब कोई दृश्यदर्शी के लिए कोई भी शून्य गद्दी सेट नहीं करता है, तो दृश्यदर्शी के किनारे के प्लेसमेंट को गड़बड़ कर दिया जाता है, यह दृश्यदर्शी का एक बग है, यहां देखें: viewpager edgeeffect bug

आप android:overScrollMode="never"व्यूपेजर पर जाकर एज प्रभाव को अक्षम कर सकते हैं, या एज एज के थोड़े से संशोधित संस्करण के साथ बग को ठीक कर सकते हैं: ViewPagerEdgeEffect फिक्स


-10

अगले पृष्ठ को देखने के लिए स्क्रॉल करने के लिए बाएं और दाएं स्क्रॉल में आवश्यक व्यूअर देखने के लिए इस टुकड़ा एडाप्टर और वर्ग का उपयोग करें।

package com.rmn.viewpager;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * The <code>PagerAdapter</code> serves the fragments when paging.
 * @author mwho
 */
public class PagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;
    /**
     * @param fm
     * @param fragments
     */
    public PagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }
    /* (non-Javadoc)
     * @see android.support.v4.app.FragmentPagerAdapter#getItem(int)
     */
    @Override
    public Fragment getItem(int position) {
        return this.fragments.get(position);
    }

    /* (non-Javadoc)
     * @see android.support.v4.view.PagerAdapter#getCount()
     */
    @Override
    public int getCount() {
        return this.fragments.size();
    }
}



package com.manishkpr.viewpager;


import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private Context _context;

    public ViewPagerAdapter(Context context, FragmentManager fm) {
        super(fm);  
        _context=context;

        }
    @Override
    public Fragment getItem(int position) {
        Fragment f = new Fragment();
        switch(position){
        case 0:
            f=LayoutOne.newInstance(_context);  
            break;
        case 1:
            f=LayoutTwo.newInstance(_context);  
            break;
        }
        return f;
    }
    @Override
    public int getCount() {
        return 2;
    }

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