Android viewPager2实现画廊效果

最新推荐文章于 2025-03-28 10:42:27 发布

LW帝国余辉

最新推荐文章于 2025-03-28 10:42:27 发布

阅读量2.4k

点赞数

分类专栏： Android 文章标签： android java

本文链接：https://blog.youkuaiyun.com/lw1389074/article/details/126518875

版权

Android 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用Java实现的ViewPager2动画效果方法，通过自定义ScaleAlphaPageTransformer类来控制页面缩放和平滑过渡，同时提供了RecAdapter适配器类以配合动画效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

public class ScaleAlphaPageTransformer implements ViewPager2.PageTransformer {

    public static final float MAX_SCALE = 1.0f;
    public static final float MIN_SCALE = 0.8f;
    public static final float MAX_ALPHA = 1.0f;
    public static final float MIN_ALPHA = 0.7f;

    private boolean alpha = true;
    private boolean scale = true;

    @Override
    public void transformPage(View page, float position) {

        //翻转效果
        float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
        float rotate = 20 * Math.abs(position);
        float transla = 20 * Math.abs(position);
        if (position > 0) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
            page.setRotationY(-rotate);
            page.setTranslationX(-transla);
        } else {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
            page.setRotationY(rotate);
            page.setTranslationX(transla);
        }

        //无效果
//        if (position < -1) {
//            position = -1;
//        } else if (position > 1) {
//            position = 1;
//        }

        float tempScale = position < 0 ? 1 + position : 1 - position;
        if (scale) {
            float slope = (MAX_SCALE - MIN_SCALE) / 1;
            //一个公式
            float scaleValue = MIN_SCALE + tempScale * slope;
            page.setScaleX(scaleValue);
            page.setScaleY(scaleValue);
        }
        if (alpha) {
            //模糊
            float alope = (MAX_ALPHA - MIN_ALPHA) / 1;
            float alphaValue = MIN_ALPHA + tempScale * alope;
            page.setAlpha(alphaValue);
        }
    }

    /***
     * 设置是否模糊和改变大小
     * @param alpha
     * @param scale
     */
    public void setType(boolean alpha, boolean scale) {
        this.alpha = alpha;
        this.scale = scale;
    }

}

public class RecAdapter extends RecyclerView.Adapter<RecAdapter.ViewHolder> {

    protected LayoutInflater inflater;
    protected Context context;
    protected List<Object> dataList;

    public RecAdapter(Context context, List<Object> dataList) {
        this.context = context;
        this.dataList = dataList;
        inflater = LayoutInflater.from(context);
    }

    @NonNull
    @Override
    public RecAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        if (viewType == 0){
            return new ViewHolder(inflater.inflate(R.layout.item_home_tab, parent, false));
        }
        return null;
    }

    @Override
    public void onBindViewHolder(@NonNull RecAdapter.ViewHolder holder, int position) {
        switch (getItemViewType(position)) {
            case 0:

                break;
        }
    }

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

    class ViewHolder extends RecyclerView.ViewHolder {

        public ViewHolder(View itemView) {
            super(itemView);

        }
    }

}

布局就就是一个viewPager2

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:clipChildren="false"
    android:id="@+id/lin"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/page2"
        android:clipChildren="false"
        android:layout_marginHorizontal="60dp"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

</LinearLayout>

要加上 android:clipChildren="false" ，然后使用就简单了

page2 = findViewById(R.id.page2);
ScaleAlphaPageTransformer former = new ScaleAlphaPageTransformer();
former.setType(true,true);
page2.setOffscreenPageLimit(3);  //设置页面缓存数量
page2.setPageTransformer(former);
page2.setCurrentItem(1);
recAdapter = new RecAdapter(this, dataList);
page2.setAdapter(recAdapter);

当然还要加上父布局的事件，能够让边缘的view也能滑动

lin = findViewById(R.id.lin);
lin.setOnTouchListener((v, event) -> {
    ///
    return page.dispatchTouchEvent(event);
});

一个简单的画廊效果就实现了