ViewPager实现Gallery画廊效果——仿慕课网app-求职路线计划-效果（二）

关注

原创最新推荐文章于 2026-06-19 11:50:04 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

Android ViewPager画廊效果实战：实现中间大两边小且边缘可见的滑动页面在Android应用开发中，ViewPager作为实现横向滑动多页内容的经典控件，其核心能力依赖于适配器模式。而正是这一机制的基石，负责管理页面的创建、销毁与复用过程。虽然系统提供了和等现成实现，但在面对复杂数据结构、动态更新或性能敏感型场景时，开发者往往需要继承并重写以满足定制化需求。本章将深入剖析如何通过自定义实现高效的页面动态加载，涵盖从基础方法重写到高级内存优化的完整技术路径。要在ViewPager中实现“中间页面放大”的真实画廊感，单纯依靠静态宽度设置仍显不足。阅读详情

今晚给之前的写的收个尾
http://blog.youkuaiyun.com/codenoodles/article/details/50992113
前边没有看的可以先看一下效果。

之前写的没有背景的模糊图片效果，也没有随滑动切换背景图的效果。这里一并加上：

首先我修改了主布局文件：
原来的View背景，换成了一个不可滑动的ViewPager
关于ViewPager怎么禁止滑动请看：
http://blog.youkuaiyun.com/codenoodles/article/details/51008568

对于模糊处理，我试过高斯模糊。虽然能出来效果，但是耗时我不能忍受…… 所以我投机取巧了—— 在新加的ViewPager的Item中：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_bg"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ImageView
        android:src="@drawable/expert_list_bg_default"
        android:id="@+id/iv_forse"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</FrameLayout>

第二个ImageView是一张透明度为93%的模糊图片。哈哈~ 看上去效果还可以。

关于随着滑动切换背景图那就很简单啦，只要在主ViewPager设置滑动监听就好啦：

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//              BitmapUtils bitmapUtils = new BitmapUtils(ExperimentActivity.this);

                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }

                @Override
                public void onPageSelected(int position) {
//                  bitmapUtils.display(ivBgPic, expertDatas.get(position).getExpertPic());
//                  if (midBitmap != null) {
//                      blur(midBitmap, ivBgPic, 21f);
//                  }
                    mBgViewPager.setCurrentItem(position,false);
                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });