पिछले और अगले पृष्ठ की सीमाओं के साथ ViewPager

Question

मैं कई पृष्ठों के साथ एक दृश्य तैयार कर रहा हूं। मैं चाहता हूं कि पिछले और अगले पृष्ठों के किनारों को नीचे की तरह दिखाया जाए और पृष्ठों के बीच स्विच करने के लिए 2 उंगली स्वाइप को लागू किया जाए।

मैंने यहांViewPager सुझाए गए नकारात्मक पृष्ठ मार्जिन के साथ उपयोग करने की कोशिश की, लेकिन यह केवल स्क्रीन पर किनारों में से एक को दिखाता है, दोनों को एक साथ नहीं।

वैकल्पिक रूप से, क्या कोई ऐसा तरीका है जिससे मैं अपने विचार का हिस्सा स्क्रीन के बाहर रख सकता हूं और फिर इसे एक ViewPagerप्रकार का प्रभाव दे सकता हूं ।

मुझे इसे किस प्रकार करना चाहिए ? धन्यवाद !

Comments

"केवल स्क्रीन पर किनारों में से एक दिखाता है, दोनों एक साथ नहीं।" क्या आप पृष्ठ ० पर हैं और आप केवल पृष्ठ १ का भाग देखते हैं? शायद आपको एक परिपत्र पेजर का उपयोग करने की आवश्यकता है, उदाहरण और फिर अपने पृष्ठ को हमेशा "मध्य" स्थिति में सेट करें। इस पोस्ट और टिप्पणी को देखें: stackoverflow.com/a/8304474/1851478

— logray

Answer 1

इस विषय पर एक ब्लॉग पोस्ट से खुद को उद्धृत करते हुए :

तीसरा दृष्टिकोण अच्छी तरह से माना जाने वाला पुस्तक एंड्रॉइड व्यंजनों के सह-लेखक डेव स्मिथ से आता है। वह एक बहुत ही अलग दिशा में गया, एक कस्टम कंटेनर का उपयोग करके जो एक समय में एक से अधिक पृष्ठ दिखाने के लिए बच्चों को क्लिपिंग से अक्षम करता है।

उसका प्रकाशित नमूना कोड कार्रवाई में पूरी बात दिखाता है। उसका कंटेनर ( com.example.pagercontainer.PagerContainer) खुद को लपेटता है ViewPagerऔर कॉल setClipChildren(false);करता है, इसलिए भले ही ViewPagerएक चयनित पृष्ठ पर ध्यान केंद्रित किया गया हो, अन्य पृष्ठ जिनके पास ViewPagerसीमा से परे निर्देशांक हैं वे अभी भी दिखाई दे रहे हैं, इसलिए जब तक वे भीतर फिट होते हैं PagerContainer। आकार से ViewPagerछोटा होने के लिए PagerContainer, ViewPagerअपने पृष्ठों को उस आकार में आकार दे सकता है, जिससे अन्य पृष्ठ देखने के लिए जगह छोड़ दें। PagerContainer, हालांकि, स्पर्श घटनाओं के साथ थोड़ी मदद करने की आवश्यकता है, क्योंकि ViewPagerयह केवल अपने दृश्यमान सीमा पर स्वाइप घटनाओं को संभालेगा, जो पक्षों को दिखाई देने वाले किसी भी पृष्ठ की अनदेखी करेगा।

Comments

इसका उपयोग करके, मैं पिछले और अगले पेज का हिस्सा दिखाने में सक्षम हूं जैसा कि ऊपर की छवि में दिखाया गया है, लेकिन अब मैं छवियों पर तेज किनारों को नहीं दिखाना चाहता हूं। मैं चाहता हूं कि वे किनारों की ओर धुंधला हो जाएं। मैं उसी को प्राप्त करने के लिए z- इंडेक्स का उपयोग करता हूं

— श्रुति

@ श्रुति - आप चाहते हैं प्रभाव के साथ एक ओवरले छवि जोड़ें

— डैनियल एल।

मैं भी ऐसा ही करता हूं लेकिन यह अंतिम आइटम के लिए ओवर-स्क्रॉल प्रभाव को निष्क्रिय कर देता है। उस पर कोई लीड?

— स्वयंवर

@CommonsWare: सर, मैंने आपके समाधान की कोशिश की! इसने बहुत अच्छा काम किया। ओवरसक्रोल है। अब केवल समस्या यह है कि अगला कार्ड दिखाता है, लेकिन पिछला कार्ड नहीं। यही है, अगर मैं पेज 2 पर हूं, तो मैं पेज 3 को देख सकता हूं, लेकिन पेज 1 को नहीं देख सकता हूं। मैं कहां गलत हो सकता था?

— स्वयंवर

@ स्वेम: मुझे कोई पता नहीं है।

— कॉमन्सवेअर

Answer 2

मेरे पास एक समान समाधान है:

Viewpager पर बाएँ और दाएँ पैडिंग सेट, जैसे 20dp। पेजर पर पेज मार्जिन भी सेट करें, जैसे पेजर पैडिंग का आधा हिस्सा। और क्लिप पैडिंग को अक्षम करना न भूलें।

tilePager.setPadding(defaultGap, 0, defaultGap, 0);
tilePager.setClipToPadding(false);
tilePager.setPageMargin(halfGap);

Comments

अच्छा समाधान प्रदान किया गया।

— अकाश

सबसे आसान और सबसे अच्छा तरीका

— हन्नाहार्की

नामकरण मूल्यों पर विचार करने के लिए यह जानवर हां जानवर का जवाब है

— silentsudo

ध्यान दें: यह अभ्यस्त कस्टम व्यू पेजर ट्रांसफॉर्मर के साथ काम

— करेगा

@voytez ट्रांसफार्मर के लिए कोई समाधान?

— एलेक्स

Answer 3

1. पूरे आइटम दृश्य के लिए बाएँ और दाएँ पैडिंग सेट करें। उदाहरण xml (page_item.xml):

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:paddingLeft="20dp"
   android:paddingRight="20dp"/>
   
   <TextView
       android:id="@+id/text1"
       android:text="Large Text"
       android:textAppearance="?android:attr/textAppearanceLarge" />
   
   </LinearLayout>

2. फिर PageView2 * के बराबर नकारात्मक पृष्ठ मार्जिन सेट करें (पिछले दृश्य पैडिंग)

   int margin = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20*2,     getResources().getDisplayMetrics());
   mViewPager.setPageMargin(-margin);

3. वैकल्पिक। पहले आइटम के लिए शून्य बाएं पैडिंग सेट करें और खाली किनारों को छिपाने के लिए अंतिम आइटम के लिए शून्य राइट पैडिंग। आप इसे PageAdapterया Pageखंड वर्ग में कर सकते हैं ।

Comments

@ सेरी, मैं आपके समाधान के साथ यह काम नहीं कर सकता, क्या आप एक उदाहरण पोस्ट कर सकते हैं? thx

— मर्कारौजो

बस एक नोट जोड़ना: इस समाधान के साथ जब आप पेज 1 से पेज 2 तक स्लाइड करते हैं, तो पेज 3 मेमोरी में नहीं होता है, इसलिए यह देरी के साथ दिखाई देगा। इसे ठीक करने के लिए बस जोड़ें - yourViewPager.setOffscreenPageLimit (2);

— जोस बारबोसा

मैं भी ऐसा ही करता हूं लेकिन यह अंतिम आइटम के लिए ओवर-स्क्रॉल प्रभाव को निष्क्रिय कर देता है। उस पर कोई लीड?

— स्वयंवर

मैं इसे या तो काम करने के लिए प्रतीत नहीं कर सकता ... मार्जिन बेतरतीब ढंग से प्रदर्शित करने के लिए लगता है अगर मैं छवियों का उपयोग करता हूं / क्रॉप को केंद्र में सेट करता हूं। किसी के पास एक वर्किंग कोड उदाहरण है जिसे वे साझा कर सकते हैं?

— केनेई

पहली और आखिरी वस्तु को कैसे छुएं? OnPageListener में पेज इंडेक्स चेक करके?

— हार्दिक 9850

Answer 4

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

viewpager.setClipToPadding(false)
viewpager.setPadding(left,0,right,0)

यदि आपको व्यूपेजर में दो पृष्ठों के बीच जगह चाहिए तो viewpager.setPageMargin (int) जोड़ें

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

Comments

यह सही उत्तर होना चाहिए। मुझे लगता है कि शायद यह दृश्यप्रदर्शन के पूर्व संस्करणों में काम नहीं करता था, लेकिन अब यह काम करता है।

— ग्रेग एनिस

पहले पेज के बाईं ओर और साथ ही दाईं ओर के समान मार्जिन को जोड़ना। कोई भी फिक्स

— उमेश अवेट

लघु और अधिक स्पष्ट उत्तर।

— इमरान अहमद

Answer 5

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

Answer 6

स्रोत कोड यहाँ से डाउनलोड करें ( पिछले और अगले पृष्ठ की सीमाओं के साथ ViewPager )

MainActivity.java

package com.deepshikha.viewpager;

import android.content.Context;
import android.content.res.Configuration;
import android.os.Build;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.SparseArray;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity {

    ViewPager pager;
    MyPageAdapter obj_adapter;
    String str_device;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();


    }

    private void init() {
        pager = (ViewPager) findViewById(R.id.viewpager);
        differentDensityAndScreenSize(getApplicationContext());
        List<Fragment> fragments = getFragments();
        pager.setAdapter(obj_adapter);
        pager.setClipToPadding(false);


        if (str_device.equals("normal-hdpi")){
            pager.setPadding(160, 0, 160, 0);
        }else if (str_device.equals("normal-mdpi")){
            pager.setPadding(160, 0, 160, 0);
        }else if (str_device.equals("normal-xhdpi")){
            pager.setPadding(160, 0, 160, 0);
        }else if (str_device.equals("normal-xxhdpi")){
            pager.setPadding(180, 0, 180, 0);
        }else if (str_device.equals("normal-xxxhdpi")){
            pager.setPadding(180, 0, 180, 0);
        }else if (str_device.equals("normal-unknown")){
            pager.setPadding(160, 0, 160, 0);
        }else {

        }

        obj_adapter = new MyPageAdapter(getSupportFragmentManager(), fragments);
        pager.setPageTransformer(true, new ExpandingViewPagerTransformer());
        pager.setAdapter(obj_adapter);
    }

    class MyPageAdapter extends FragmentPagerAdapter {

        private List<Fragment> fragments;

        public MyPageAdapter(FragmentManager fm, List<Fragment> fragments) {

            super(fm);

            this.fragments = fragments;

        }

        @Override

        public Fragment getItem(int position) {

            return this.fragments.get(position);

        }

        @Override

        public int getCount() {

            return this.fragments.size();

        }

    }

    private List<Fragment> getFragments() {

        List<Fragment> fList = new ArrayList<Fragment>();

        fList.add(MyFragment.newInstance("Fragment 1",R.drawable.imags));
        fList.add(MyFragment.newInstance("Fragment 2",R.drawable.image1));
        fList.add(MyFragment.newInstance("Fragment 3",R.drawable.image2));
        fList.add(MyFragment.newInstance("Fragment 4",R.drawable.image3));
        fList.add(MyFragment.newInstance("Fragment 5",R.drawable.image4));

        return fList;

    }

    public int differentDensityAndScreenSize(Context context) {
        int value = 20;
        String str = "";
        if ((context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_SMALL) {
            switch (context.getResources().getDisplayMetrics().densityDpi) {
                case DisplayMetrics.DENSITY_LOW:
                    str = "small-ldpi";
                    // Log.e("small 1","small-ldpi");
                    value = 20;
                    break;
                case DisplayMetrics.DENSITY_MEDIUM:
                    str = "small-mdpi";
                    // Log.e("small 1","small-mdpi");
                    value = 20;
                    break;
                case DisplayMetrics.DENSITY_HIGH:
                    str = "small-hdpi";
                    // Log.e("small 1","small-hdpi");
                    value = 20;
                    break;
                case DisplayMetrics.DENSITY_XHIGH:
                    str = "small-xhdpi";
                    // Log.e("small 1","small-xhdpi");
                    value = 20;
                    break;
                case DisplayMetrics.DENSITY_XXHIGH:
                    str = "small-xxhdpi";
                    // Log.e("small 1","small-xxhdpi");
                    value = 20;
                    break;
                case DisplayMetrics.DENSITY_XXXHIGH:
                    str = "small-xxxhdpi";
                    //Log.e("small 1","small-xxxhdpi");
                    value = 20;
                    break;
                case DisplayMetrics.DENSITY_TV:
                    str = "small-tvdpi";
                    // Log.e("small 1","small-tvdpi");
                    value = 20;
                    break;
                default:
                    str = "small-unknown";
                    value = 20;
                    break;
            }

        } else if ((context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_NORMAL) {
            switch (context.getResources().getDisplayMetrics().densityDpi) {
                case DisplayMetrics.DENSITY_LOW:
                    str = "normal-ldpi";
                    // Log.e("normal-ldpi 1","normal-ldpi");
                    str_device = "normal-ldpi";
                    value = 82;
                    break;
                case DisplayMetrics.DENSITY_MEDIUM:
                    // Log.e("normal-mdpi 1","normal-mdpi");
                    str = "normal-mdpi";
                    value = 82;
                    str_device = "normal-mdpi";
                    break;
                case DisplayMetrics.DENSITY_HIGH:
                    // Log.e("normal-hdpi 1","normal-hdpi");
                    str = "normal-hdpi";
                    str_device = "normal-hdpi";
                    value = 82;
                    break;
                case DisplayMetrics.DENSITY_XHIGH:
                    //Log.e("normal-xhdpi 1","normal-xhdpi");
                    str = "normal-xhdpi";
                    str_device = "normal-xhdpi";
                    value = 90;
                    break;
                case DisplayMetrics.DENSITY_XXHIGH:
                    // Log.e("normal-xxhdpi 1","normal-xxhdpi");
                    str = "normal-xxhdpi";
                    str_device = "normal-xxhdpi";
                    value = 96;
                    break;
                case DisplayMetrics.DENSITY_XXXHIGH:
                    //Log.e("normal-xxxhdpi","normal-xxxhdpi");
                    str = "normal-xxxhdpi";
                    str_device = "normal-xxxhdpi";
                    value = 96;
                    break;
                case DisplayMetrics.DENSITY_TV:
                    //Log.e("DENSITY_TV 1","normal-mdpi");
                    str = "normal-tvdpi";
                    str_device = "normal-tvmdpi";
                    value = 96;
                    break;
                default:
                    // Log.e("normal-unknown","normal-unknown");
                    str = "normal-unknown";
                    str_device = "normal-unknown";
                    value = 82;
                    break;
            }
        } else if ((context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_LARGE) {
            switch (context.getResources().getDisplayMetrics().densityDpi) {
                case DisplayMetrics.DENSITY_LOW:
                    str = "large-ldpi";
                    // Log.e("large-ldpi 1","normal-ldpi");
                    value = 78;
                    break;
                case DisplayMetrics.DENSITY_MEDIUM:
                    str = "large-mdpi";
                    //Log.e("large-ldpi 1","normal-mdpi");
                    value = 78;
                    break;
                case DisplayMetrics.DENSITY_HIGH:
                    //Log.e("large-ldpi 1","normal-hdpi");
                    str = "large-hdpi";
                    value = 78;
                    break;
                case DisplayMetrics.DENSITY_XHIGH:
                    // Log.e("large-ldpi 1","normal-xhdpi");
                    str = "large-xhdpi";
                    value = 125;
                    break;
                case DisplayMetrics.DENSITY_XXHIGH:
                    //Log.e("large-ldpi 1","normal-xxhdpi");
                    str = "large-xxhdpi";
                    value = 125;
                    break;
                case DisplayMetrics.DENSITY_XXXHIGH:
                    // Log.e("large-ldpi 1","normal-xxxhdpi");
                    str = "large-xxxhdpi";
                    value = 125;
                    break;
                case DisplayMetrics.DENSITY_TV:
                    //Log.e("large-ldpi 1","normal-tvdpi");
                    str = "large-tvdpi";
                    value = 125;
                    break;
                default:
                    str = "large-unknown";
                    value = 78;
                    break;
            }

        } else if ((context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_XLARGE) {
            switch (context.getResources().getDisplayMetrics().densityDpi) {
                case DisplayMetrics.DENSITY_LOW:
                    // Log.e("large-ldpi 1","normal-ldpi");
                    str = "xlarge-ldpi";
                    value = 125;
                    break;
                case DisplayMetrics.DENSITY_MEDIUM:
                    // Log.e("large-ldpi 1","normal-mdpi");
                    str = "xlarge-mdpi";
                    value = 125;
                    break;
                case DisplayMetrics.DENSITY_HIGH:
                    //Log.e("large-ldpi 1","normal-hdpi");
                    str = "xlarge-hdpi";
                    value = 125;
                    break;
                case DisplayMetrics.DENSITY_XHIGH:
                    // Log.e("large-ldpi 1","normal-hdpi");
                    str = "xlarge-xhdpi";
                    value = 125;
                    break;
                case DisplayMetrics.DENSITY_XXHIGH:
                    // Log.e("large-ldpi 1","normal-xxhdpi");
                    str = "xlarge-xxhdpi";
                    value = 125;
                    break;
                case DisplayMetrics.DENSITY_XXXHIGH:
                    // Log.e("large-ldpi 1","normal-xxxhdpi");
                    str = "xlarge-xxxhdpi";
                    value = 125;
                    break;
                case DisplayMetrics.DENSITY_TV:
                    //Log.e("large-ldpi 1","normal-tvdpi");
                    str = "xlarge-tvdpi";
                    value = 125;
                    break;
                default:
                    str = "xlarge-unknown";
                    value = 125;
                    break;
            }
        }

        return value;
    }
}

Comments

यह कोड ठीक से काम नहीं कर रहा है, इसका लेफ्ट साइड पेज राइट साइड से थोड़ा बड़ा है

— चिराग जोशी

Answer 7

कुछ समय पहले मुझे इस तरह की सुविधा की आवश्यकता थी और क्लासिक के बजाय PagerSnapHelper (वर्जन 25.1.0 के संस्करण 25.1.0 में जोड़ा गया) के RecyclerViewसाथ उपयोग करने वाली एक छोटी सी लाइब्रेरी तैयार की :ViewPager

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

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

आशा है कि यह किसी की मदद करता है :)