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


107

আমি অ্যান্ড্রয়েড ব্যবহার করছি ViewPager। আমি যা করতে চাই তা হল বাম এবং ডান উভয় পৃষ্ঠার পূর্বরূপ প্রদর্শন করা। আমি যেখানে pageMarginডান পাশের পূর্বরূপ দেখানোর জন্য একটি নেতিবাচক ব্যবহার করতে পারি তা দেখেছি ।

setPageMargin(-100);

যেভাবেই আমি বাম পাশের পূর্বরূপটি পাশাপাশি দেখাতে পারি? এটি মূলত আমি যে গ্যালারী উইজেটের সন্ধান করছি তার অনুরূপ।


ভাল প্রশ্ন! আমি সম্প্রতি উত্সটি পরীক্ষা করে দেখেছি এবং মনে করি আপনি এসসিআর কোডটি সংশোধন করতে না চাইলে এর চেয়ে ভাল উপায় আর নেই। setPageMargin(-100)কাজটি কি সঠিকভাবে?
ম্যাকার্স

গ্যালারীভিউ কাজটি আরও ভাল করবে, যদি না আপনি যদি খণ্ডের সাথে ভিউপগারটি ব্যবহার করেন।
আলী আলনোইমি

আমি গ্যালারী ভিউ ব্যবহার করে এটি করতে সক্ষম হয়েছি। যে কোনও উপায়ে ভিউপ্যাজারের মতোই। কেন গ্যালারী
অবহেলা করা

এই প্রশ্নটি তার পর থেকে [পোস্টে] [১] [১]: স্ট্যাকওভারফ্লো.com
বেন পিয়ারসন

আমি টুকরা সহ ভায়ারপাগার ব্যবহার করছি o সুতরাং আমি কি একই পদ্ধতির ব্যবহার করতে পারি?
asliyanage

উত্তর:


206

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

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

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

viewpager.setPageMargin(int);

2
হ্যাঁ, আমি আপনার সাথে একমত Jiju Induchoodan .. আরও তথ্যের জন্য দেখুন blog.neteril.org/blog/2013/10/14/... এবং stackoverflow.com/questions/13914609/...
Sripathi

দুর্দান্ত, এটি এত সহজ :) ভিউ পেজারের স্যুইচ পৃষ্ঠায় ডান এবং বাম আকারের পূর্বরূপগুলি পুনরায় আকার দেওয়া সম্ভব? উদাহরণস্বরূপ - যদি টুকরো টুকরো টুকরো যদি না হয় - এটি স্কেলটি হবে ~ 0.8, তবে যখন আমরা এটিকে কেন্দ্রে টেনে আনব - স্কেলটি 1-এ বাড়বে, এবং কেন্দ্রের দৃশ্য থেকে পূর্ববর্তী খণ্ডটি স্ক্রিনের বাইরে চলে যাওয়ার সময় 0.8 এ পরিবর্তিত হবে?
iamthevoid

এই কাজ করছে! তবে যখন আমি কেন্দ্রের বিন্যাসটি জুম করার চেষ্টা করব তখন এর উপরে এবং নীচে জুম হবে। প্যাডিংয়ের কারণে বাম এবং ডান দৃশ্যমান নয়। দয়া করে প্রশ্ন দেখতে পাবেন stackoverflow.com/questions/52710076/...
Anooj কৃষ্ণান জি

ভিউপ্যাজার 2 এর সাথে কাজ করছেন না
হামিদ রেজা গোলামি

73

@ জিজু ইন্ডুচুডন এর উত্তর নিখুঁত এবং কার্যকর। তবে, যেহেতু আমি অ্যান্ড্রয়েডে তুলনামূলকভাবে নতুন, এটি বুঝতে এবং এটি সঠিকভাবে সেট করতে আমার কিছুটা সময় লেগেছে। সুতরাং, আমি ভবিষ্যতের রেফারেন্সের জন্য এই উত্তরটি পোস্ট করছি এবং আমার মতো জুতোতে থাকা অন্য যে কোনও ব্যক্তিকে সহায়তা করবে।

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"

ফাইনাল ভিউপেজার

এটি ভিউপ্যাজারের চূড়ান্ত চেহারা হবে।


62

নতুন ভিউপেজার 2 সহ সমাধান

আজকাল আপনার ভিউপেজার 2 ব্যবহার করা বিবেচনা করা উচিত যা "ভিউপাগারকে প্রতিস্থাপন করে, এর পূর্বসূরিদের বেশিরভাগ ব্যথা-পয়েন্টকে সম্বোধন করে" :

  • পুনর্ব্যবহারযোগ্য ভিউয়ের উপর ভিত্তি করে
  • আরটিএল (ডান থেকে বাম) লেআউট সমর্থন
  • উল্লম্ব অভিযোজন সমর্থন
  • নির্ভরযোগ্য টুকরা সমর্থন (অন্তর্নিহিত টুকরা সংগ্রহের পরিবর্তনগুলি পরিচালনা সহ)
  • ডেটাসেট পরিবর্তন অ্যানিমেশন ( DiffUtilসমর্থন সহ )

ফলাফল

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

কোড

আপনার ক্রিয়াকলাপ / খণ্ডে, ভিউপ্যাজার 2 সেটআপ করুন:

// 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>

পৃষ্ঠা ট্রান্সফরমার উদাহরণ

গুগল ভিউপাগের 2 তে একটি গাইড যুক্ত করেছে যার 2 টি PageTransformerবাস্তবায়ন রয়েছে যা আপনি অনুপ্রেরণা হিসাবে ব্যবহার করতে পারেন: https://developer.android.com/training/animation/screen-slide-2

নতুন ভিউপ্যাজার 2 সম্পর্কে


ওরিও ডিভাইসগুলিতে একই সমস্যা, প্যাডিং শুরু এবং শেষ অন্যান্য ডিভাইসে প্রত্যাশা অনুযায়ী কাজ করে তবে ভিউপেজার 2 এর পরে ওরিও। পেজ ট্রান্সফরমার সমস্যাটি সমাধান করেছে, প্যাডিংগুলি এখনও একইরকম এবং আমাকে যুক্ত করতে হয়েছিলviewpager.setPageTransformer { page, position -> page.translationX = -1 * position }
zgr

এই প্রভাবটি পেতে আমাকে ভিউ পেজারের পৃষ্ঠাটি কিছুটা সরিয়ে নিতে হবে
মুহাম্মদ সাকিব

কিছু মনে করবেন না, আমি এই লাইনটি যুক্ত করতে ভুলে গেছি setOffscreenPageLimit(1):)
মুহাম্মদ সাকিব

এটি আমার পক্ষে সবচেয়ে ভাল সমাধান। এটি নিখুঁতভাবে কাজ করে তবে হ্যাঁ ভিউপ্যাজার 2 এর আইটেমের প্রস্থ, উচ্চতা MATCH_PARENT এ সেট করতে ভুলবেন না।
খুশবু

26

2017 এধরনের আচরণ অতিরিক্ত সহজে ব্যবহারের মাধ্যমে অর্জন করা যেতে পারে ইন RecyclerViewসঙ্গে PagerSnapHelper (v7 সমর্থন গ্রন্থাগার সংস্করণ 25.1.0 যোগ): 

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

কিছুকাল আগে আমার এই জাতীয় ভিউপাগারের মতো বৈশিষ্ট্যটির প্রয়োজন ছিল এবং একটি ছোট লাইব্রেরি প্রস্তুত করা হয়েছিল:

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

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

আশা করি এটি কারও সাহায্য করবে এবং কিছু ঘন্টা বাঁচাবে :)


বন্ধ বিষয়, কারণ কখনও কখনও কেবল পেজারের প্রয়োজন হয় তবে তা জেনে ভাল লাগছে! ভাগ করে নেওয়ার জন্য ধন্যবাদ!
Sud007

এটা সত্যিই দারুন. আমার কাছে ইতিমধ্যে প্রচুর রিসাইক্লারভিউ হেল্পার কোড ছিল। কেবল একটি সরল যোগ করুন new PagerSnapHelper().attachToRecyclerView(recyclerView)এবং আমার পৃষ্ঠা স্ন্যাপিং রয়েছে।
স্টিভ

9

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


7

আপনি এটি এক্সএমএল ফাইলে করতে পারেন, কেবল নীচের কোডটি ব্যবহার করুন:

 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
আমি হ্রাস পেয়েছি। ভাই দুঃখিত. এবার কাজ করলেন !! আবার উত্সাহিত
শিখর বনসাল

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

নোট করুন যে কোনও ভিউজারে শূন্য প্যাডিংস সেট না করার সময়, ভিউপাগারের এজ-এফেক্ট প্লেসমেন্টটি গণ্ডগোল হয়ে যায়, এটি ভিউপ্যাজারের একটি বাগ, এখানে দেখুন: ভিউপজার এজেরেফেক্ট বাগ

হয় আপনি android:overScrollMode="never"ভিউপাগারে সেট করে প্রান্ত প্রভাবটি অক্ষম করতে পারেন, বা আপনি এজ এজ্যাক্ট শ্রেণীর সামান্য পরিবর্তিত সংস্করণ দিয়ে বাগটি ঠিক করতে পারেন: ভিউপাগারএডেজএফেক্ট ফিক্স


-10

বাম এবং ডান স্ক্রোলের ভিউপাগারটি দেখতে এই টুকরা অ্যাডাপ্টার এবং শ্রেণিটি ব্যবহার করুন next পরবর্তী পৃষ্ঠাগুলি দেখতে স্ক্রোল করতে প্রয়োজনীয় ক্লাস যুক্ত করুন।

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

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