[英]Android: Vertical ViewPager2 show next and before item
I'm trying to create a vertical carousel which shows previous and next items.我正在尝试创建一个显示上一个和下一个项目的垂直轮播。
I was able to obtain something like this:我能够获得这样的东西:
As you can see, landscape mode already shows next and before items.如您所见,横向模式已经在项目的下一个和之前显示。 I'd like to obtain the same result also in portrait mode.我也想在纵向模式下获得相同的结果。 Here is the code I used:这是我使用的代码:
activity_main.xml: 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;
}
}
SliderAdapter:滑块适配器:
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();
}
};
}
MainActivity:主要活动:
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);
}
Hope you will help me希望你能帮助我
This blogpost provides a working solution by setting padding to the RecyclerView
inside ViewPager2
.这篇博文通过在ViewPager2中为RecyclerView
设置填充来提供一个ViewPager2
的解决方案。
Kotlin version: 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 version: 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);
I solved it with the below transformer:我用下面的变压器解决了这个问题:
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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.