Android：垂直 ViewPager2 顯示項目的下一個和之前

Question

我正在嘗試創建一個顯示上一個和下一個項目的垂直輪播。

我能夠獲得這樣的東西：

肖像

景觀

如您所見，橫向模式已經在項目的下一個和之前顯示。 我也想在縱向模式下獲得相同的結果。 這是我使用的代碼：

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPagerImageSlider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="60dp"/>


</androidx.constraintlayout.widget.ConstraintLayout>

滑塊項目：

public class SliderItem {

    private int image;

    SliderItem(int image) {
        this.image = image;
    }

    public int getImage() {
        return image;
    }
}

滑塊適配器：

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.makeramen.roundedimageview.RoundedImageView;

import java.util.List;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.ViewPager2;

public class SliderAdapter extends RecyclerView.Adapter<SliderAdapter.SliderViewHolder> {

    private List<SliderItem> sliderItems;
    private ViewPager2 viewPager2;

    SliderAdapter(List<SliderItem> sliderItems, ViewPager2 viewPager2) {
        this.sliderItems = sliderItems;
        this.viewPager2 = viewPager2;
    }

    @NonNull
    @Override
    public SliderViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new SliderViewHolder(
                LayoutInflater.from(parent.getContext()).inflate(
                        R.layout.slide_item_container,
                        parent,
                        false
                )
        );
    }

    @Override
    public void onBindViewHolder(@NonNull SliderViewHolder holder, int position) {
        holder.setImage(sliderItems.get(position));
        if(position == sliderItems.size() - 2) {
            viewPager2.post(runnable);
        }
    }

    @Override
    public int getItemCount() {
        return sliderItems.size();
    }

    class SliderViewHolder extends RecyclerView.ViewHolder {
        private RoundedImageView imageView;

        SliderViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imageSlide);
        }

        void setImage(SliderItem sliderItem) {
            imageView.setImageResource(sliderItem.getImage());
        }
    }

    private Runnable runnable = new Runnable() {
        @Override
        public void run() {
            sliderItems.addAll(sliderItems);
            notifyDataSetChanged();
        }
    };

}

主要活動：

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.CompositePageTransformer;
import androidx.viewpager2.widget.MarginPageTransformer;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.os.Handler;
import android.transition.Slide;
import android.view.View;

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

public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager2 = findViewById(R.id.viewPagerImageSlider);

        List<SliderItem> sliderItems = new ArrayList<>();
        sliderItems.add(new SliderItem(R.drawable.image1));
        sliderItems.add(new SliderItem(R.drawable.image2));
        sliderItems.add(new SliderItem(R.drawable.image3));
        sliderItems.add(new SliderItem(R.drawable.image4));

        viewPager2.setAdapter(new SliderAdapter(sliderItems, viewPager2));

        viewPager2.setClipToPadding(false);
        viewPager2.setClipChildren(false);
        viewPager2.setOffscreenPageLimit(3);
        viewPager2.getChildAt(0).setOverScrollMode(RecyclerView.OVER_SCROLL_NEVER);

        CompositePageTransformer compositePageTransformer = new CompositePageTransformer();
        compositePageTransformer.addTransformer(new MarginPageTransformer(30));
        compositePageTransformer.addTransformer(new ViewPager2.PageTransformer() {
            @Override
            public void transformPage(@NonNull View page, float position) {
                float r = 1 - Math.abs(position);
                page.setScaleX(0.85f + r*0.15f);
            }
        });

        viewPager2.setPageTransformer(compositePageTransformer);

    }

希望你能幫助我

Answer 1

這篇博文通過在ViewPager2中為RecyclerView設置填充來提供一個ViewPager2的解決方案。

Kotlin 版本：

view_pager.apply {
    offscreenPageLimit = 1
    val recyclerView = getChildAt(0) as RecyclerView
    recyclerView.apply {
        val padding = card_margin + peek_offset_margin
        setPadding(padding, 0, padding, 0)
        clipToPadding = false
    }
    adapter = MyAdapterFullLength()
}

Java版本：

view_pager.setOffscreenPageLimit(1);
int pageMarginPx = getResources().getDimensionPixelOffset(R.dimen.card_margin);
int peekMarginPx = getResources().getDimensionPixelOffset(R.dimen.peek_offset_margin);

RecyclerView rv = (RecyclerView) view_pager.getChildAt(0);
rv.setClipToPadding(false);
int padding = peekMarginPx + pageMarginPx;
rv.setPadding(padding, 0, padding, 0);

Answer 2

我用下面的變壓器解決了這個問題：

 binding.viewPager2.apply {
           offscreenPageLimit = 1
           val pageMarginPx = resources.getDimensionPixelOffset(R.dimen.defaultMargin_3_5x)
           val offsetPx = resources.getDimensionPixelOffset(R.dimen.defaultMargin)
    
           setPageTransformer { page, position ->
               val offset = position * -(2 * offsetPx + pageMarginPx)
               page.translationX = offset
           }    
}