পূর্ববর্তী এবং পরবর্তী পৃষ্ঠার সীমানা সহ ভিউপাগার


144

আমি একাধিক পৃষ্ঠা সহ একটি ভিউ ডিজাইন করছি। আমি চাই পূর্ববর্তী এবং পরবর্তী পৃষ্ঠাগুলির কিনারা নীচের মতো প্রদর্শিত হোক এবং পৃষ্ঠাগুলির মধ্যে স্যুইচ করতে 2 আঙুলের সোয়াইপ প্রয়োগ করুন implement

এখানে চিত্র বর্ণনা লিখুন

আমি এখানেViewPager প্রস্তাবিত হিসাবে নেতিবাচক পৃষ্ঠার মার্জিন সহ ব্যবহার করার চেষ্টা করেছি তবে এটি কেবল পর্দার একটি প্রান্তই দেখায়, দুটোই একই সাথে নয়।

বিকল্পভাবে, আমার দৃষ্টিভঙ্গির অংশের বাইরে পর্দার বাইরে অবস্থান করার কোনও উপায় আছে এবং তারপরে এটিকে ViewPagerপ্রকারভেদ করে এনিমেট করতে পারি ।

আমি এটি সম্পর্কে কিভাবে যেতে হবে? ধন্যবাদ!


"পর্দায় কেবল একটি প্রান্ত দেখায়, দুটোই একই সাথে নয়" " আপনি কি পৃষ্ঠা 0 এ আছেন এবং আপনি কেবল পৃষ্ঠা 1 এর অংশ দেখতে পাচ্ছেন? সম্ভবত আপনাকে একটি বৃত্তাকার পেজার ব্যবহার করতে হবে, উদাহরণস্বরূপ এবং তারপরে আপনার পৃষ্ঠাটিকে সর্বদা "মাঝারি" অবস্থানে সেট করুন। : এই পোস্ট এবং মন্তব্য দেখুন stackoverflow.com/a/8304474/1851478
logray

উত্তর:


100

এই বিষয়ে একটি ব্লগ পোস্ট থেকে নিজেকে উদ্ধৃত :

তৃতীয় পদ্ধতিটি সম্মানিত বই অ্যান্ড্রয়েড রেসিপিগুলির সহ-লেখক ডেভ স্মিথের কাছ থেকে এসেছে। তিনি একেবারে ভিন্ন দিকে চলে গিয়েছিলেন, এমন একটি কাস্টম পাত্রে ব্যবহার করেছিলেন যা শিশুরা একবারে একাধিক পৃষ্ঠা দেখানোর জন্য ক্লিপিং অক্ষম করে।

তাঁর প্রকাশিত নমুনা কোডটি পুরো বিষয়টি কার্যকরভাবে দেখায়। তাঁর ধারক ( com.example.pagercontainer.PagerContainer) গোপন ViewPagerএবং কলের setClipChildren(false);নিজেই, যাতে যদিও ViewPagerএক নির্বাচিত পৃষ্ঠা চাইলে অন্যান্য পাতায় আছে যে অতিক্রম স্থানাঙ্ক উপর দৃষ্টি নিবদ্ধ করা হয় ViewPager, তাই যতদিন তারা মধ্যে মাপসই যেমন সীমা এখনো দৃশ্যমান PagerContainer। নির্ধারন করে ViewPagerচেয়ে ছোট হতে PagerContainer, ViewPagerকরতে পারেন আকার যে আকার তার পৃষ্ঠা, অন্যান্য পৃষ্ঠাগুলির জন্য রুম ছাড়ার দেখা হবে। PagerContainerতবে, স্পর্শ ইভেন্টগুলির সাথে কিছুটা সাহায্য করার প্রয়োজন রয়েছে, ViewPagerকেবল পাশের কাছে দৃশ্যমান কোনও পৃষ্ঠা উপেক্ষা করে কেবলমাত্র দৃশ্যমান সীমানায় সোয়াইপ ইভেন্টগুলি পরিচালনা করবে।

এখানে চিত্র বর্ণনা লিখুন


1
এটি ব্যবহার করে, আমি উপরের চিত্রের মতো আগের এবং পরবর্তী পৃষ্ঠার অংশটি প্রদর্শন করতে সক্ষম হয়েছি, তবে এখন আমি চিত্রগুলিতে তীক্ষ্ণ প্রান্তগুলি দেখাতে চাই না want আমি তাদের প্রান্তগুলির দিকে ঝাপসা করে দিতে চাই ... দয়া করে আমাকে কীভাবে করতে পারেন তার গাইড করুন আমি এটি অর্জনের জন্য জেড-সূচক ব্যবহার করি
শ্রুতি

2
@ শ্রুতি - আপনার পছন্দসই প্রভাবের সাথে একটি ওভারলে চিত্র যুক্ত করুন
ড্যানিয়েল এল।

2
আমি একই কাজ করি তবে এটি শেষ আইটেমটির জন্য ওভার-স্ক্রোল প্রভাবকে অক্ষম করে। কোন নেতৃত্ব?
স্বয়াম

1
@ কমন্সওয়্যার: স্যার, আমি আপনার সমাধান চেষ্টা করেছিলাম! এটি বেশ ভাল কাজ করেছে। ওভারস্ক্রোল তো আছেই। কেবলমাত্র এখন সমস্যাটি হ'ল পরবর্তী কার্ডটি দেখায় তবে আগের কার্ডটি নয়। এটি হ'ল, আমি যদি পৃষ্ঠা 2 এ থাকি তবে আমি পৃষ্ঠা 3 দেখতে পেলাম, কিন্তু পৃষ্ঠা 1 টি দেখতে পাচ্ছি Where আমি কোথায় ভুল হতে পারছিলাম?
স্বয়াম

2
@ স্বয়ম: আমার কোনও ধারণা নেই।
কমন্সওয়্যার

110

আমার অনুরূপ সমাধান রয়েছে:

ভিউপ্যাজারে বাম এবং ডান প্যাডিং সেট করুন, যেমন 20 ডিপি। ভিউপ্যাজারে পৃষ্ঠা মার্জিন সেট করুন, যেমন পেজার প্যাডিংয়ের অর্ধেক। এবং ক্লিপ প্যাডিং অক্ষম করতে ভুলবেন না।

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

2
ভাল সমাধান সরবরাহ করা হয়েছে।
akash89

সবচেয়ে সহজ এবং সর্বোত্তম উপায়
হান্না কার্নি

নামকরণের মান বিবেচনার জন্য এটি জন্তু হ্যাঁ জন্তুটির উত্তর xd
সিলেন্টসডো

1
পার্শ্ব দ্রষ্টব্য: এই কাস্টম ভিউ পেজার ট্রান্সফর্মার দিয়ে কাজ করবে না
ভয়েটেজ

ট্রান্সফরমারের জন্য কোন সমাধান @ ভয়েটেজ?
অ্যালেক্স

76
  1. পুরো আইটেম দর্শনের জন্য বাম এবং ডান প্যাডিং সেট করুন। উদাহরণস্বরূপ এক্সএমএল (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খণ্ড শ্রেণিতে করতে পারেন।


@ সার্জি, আমি আপনার সমাধান দিয়ে এই কাজটি করতে পারছি না, আপনি কি একটি উদাহরণ পোস্ট করতে পারেন? thx
মারকারাউজো

12
কেবল একটি নোট যুক্ত করুন: এই সমাধানের সাথে আপনি পৃষ্ঠা 1 থেকে পৃষ্ঠা 2 এ স্লাইড করবেন, পৃষ্ঠা 3 স্মৃতিতে নেই, সুতরাং এটি বিলম্বের সাথে উপস্থিত হবে। এটিকে ঠিক যুক্ত করতে ঠিক করুন - আপনার ভিউপেজ.আর.সেটআফসস্ক্রিনপেজ লিমিট (2);
জোসে বার্বোসা

আমি একই কাজ করি তবে এটি শেষ আইটেমটির জন্য ওভার-স্ক্রোল প্রভাবকে অক্ষম করে। কোন নেতৃত্ব?
স্বয়াম

আমি এটি কোনওভাবেই কাজ করতে পারব বলে মনে হচ্ছে না ... আমি যদি চিত্রগুলি ডাব্লু / স্কেলটিকে কেন্দ্রের ফসলে সেট করে ব্যবহার করি তবে মার্জিনগুলি এলোমেলোভাবে প্রদর্শিত হবে বলে মনে হচ্ছে। কারও কাছে একটি ওয়ার্কিং কোড উদাহরণ রয়েছে যা তারা ভাগ করতে পারে?
কেনেই

2
প্রথম এবং শেষ আইটেমটি কীভাবে স্পর্শ করবেন? অনপেজলাইস্টেনারে পৃষ্ঠা সূচকটি পরীক্ষা করে?
Hardik9850

47

বাম এবং ডান পৃষ্ঠাগুলির পূর্বরূপ দেখানোর জন্য নিম্নলিখিত দুটি মান সেট করুন

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

আপনার যদি ভিউপিজারে দুটি পৃষ্ঠার মধ্যে স্থানের প্রয়োজন হয় তবে ভিউপেজ.সেটপেজমার্জিন (ইনট) যুক্ত করুন

অ্যান্ড্রয়েড ভিউপেজার - বাম এবং ডানদিকে পৃষ্ঠাটির পূর্বরূপ দেখান


3
এটি সঠিক উত্তর হওয়া উচিত। আমি মনে করি এটি ভিউপ্যাজারের পূর্ববর্তী সংস্করণগুলিতে কাজ করে না তবে এটি এখন কাজ করে।
গ্রেগ এনিস

এটি সর্বশেষ পৃষ্ঠার প্রথম এবং ডানদিকে বাম দিকে একই মার্জিন যুক্ত করে। যে কোনও স্থির
উমেশ আওতে

1
সংক্ষিপ্ত এবং আরও পরিষ্কার উত্তর।
ইমরান আহমেদ

10

যদি কেউ এখনও সমাধানের সন্ধান করেন, আমি নেতিবাচক মার্জিন ব্যবহার না করে এটি অর্জনের জন্য ভিউপেজটি কাস্টমাইজ করেছি, একটি নমুনা প্রকল্প এখানে পেয়েছি https://github.com/44kksharma/Android- ভিউপাগার- কারাউসেল- ইউ এটি বেশিরভাগ ক্ষেত্রেই কাজ করা উচিত তবে আপনি এখনও পৃষ্ঠা মার্জিনের সাথে সংজ্ঞা দিতে পারে mPager.setPageMargin(margin in pixel);


1

এখান থেকে উত্স কোডটি ডাউনলোড করুন ( পূর্ববর্তী এবং পরবর্তী পৃষ্ঠার সীমানা সহ ভিউপাগার )

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

1
এই কোডটি সঠিকভাবে কাজ করছে না, এটির বাম দিকের পৃষ্ঠাটি ডান পাশের চেয়ে কিছুটা বড় দেখায়
চিরাগ জোশী

1

কিছুদিন আগে আমি যেমন বৈশিষ্ট্য প্রয়োজন এবং একটি ক্ষুদ্র গ্রন্থাগার যা ব্যবহার প্রস্তুত RecyclerViewসঙ্গে PagerSnapHelper সর্বোত্তম পরিবর্তে (v7 সমর্থন গ্রন্থাগার সংস্করণ 25.1.0 যোগ) ViewPager:

ধাতবসাইক্লারপেজারভিউ - আপনি উদাহরণ সহ সমস্ত কোড সন্ধান করতে পারেন।

মূলত এটিতে একটি একক শ্রেণীর ফাইল থাকে: ধাতবসাইক্লারভিউপেজ.আরজাভা (এবং দুটি এক্সএমএলএস: attrs.xML এবং ids.xML )।

আশা করি এটি কাউকে সাহায্য করবে :)

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.