当前位置: 首页 > 知识库问答 >
问题:

Android:Vertical ViewPager2显示下一个和前一个项目

仉伟兆
2023-03-14

我试图创建一个垂直轮播,显示上一个和下一个项目。

我能得到这样的东西:

肖特

风景

如您所见,横向模式已经显示下一个和项目之前。我想在竖屏中获得相同的结果。这是我使用的代码:

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>

SliderItem:

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

    }

希望你能帮助我

共有2个答案

孔征
2023-03-14

我用下面的变压器解决了这个问题:

 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
           }    
}
谭研
2023-03-14

这篇博文通过在ViewPager2中将填充设置为RecyclizerView来提供一种有效的解决方案

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);
 类似资料:
  • 我想在屏幕中的页面预览之前显示viewpager。前一页和下一页在屏幕中显示深度,并用深度动画滑动下一页。 你可以看看这个图像 我怎么做?

  • 问题内容: 引导轮播是否可扩展以在滑块中显示下一个和上一个图像? 目前,我的轮播看起来像这样,如何将上一张和下一张图像添加到当前活动的幻灯片中? 问题答案: Bootstrap是可能的,但是需要一些自定义… 您必须使用CSS和jQuery自定义幻灯片的位置。 另一个变化是仅显示下一张和上一张幻灯片的一部分。这可以通过在.. 的左侧和右侧上放置绝对位置叠加来完成。

  • 最后是我的适配器类

  • 问题就在这里:我创建了世界上最简单的RecyclerView,但它只显示第一个项目。我不明白为什么。谢谢你的帮助。 item_layout.xml mainactivity.java

  • 我一直在努力解决这个问题。我正在尝试的是只显示下一个和上一个按钮。直到我得到 我不想要邮政的链接,我想要邮政的子页链接。我在一篇文章中使用多个页面。我正在使用分页符 nextpage注释功能

  • 我创建了一个类,它有一个名为cards的面板,其布局是CardLAyout。我添加了卡片项目。在这个类中,我想通过调用layout来创建一个单独的方法,该方法将切换到下一张卡片。 } 正如你所看到的,我在卡片上添加了其他类的面板。我想做的是创建getNextCard()方法,该方法将当前活动的面板作为其参数。当我调用此功能时,它应该将当前活动的面板切换到我的CardLayout列表中的下一个面板。