Android ViewPager 中间图片放大

1. 简介

ViewPager 是 Android 平台上常用的布局控件，用于实现左右滑动切换页面的效果。在某些需求中，我们希望 ViewPager 中间的图片能够放大显示，以增加用户的交互体验。本文将介绍如何通过自定义 ViewPager 来实现这一效果。

2. 实现原理

实现 ViewPager 中间图片放大的效果，可以通过继承 ViewPager 并重写其 onDraw 方法来实现。具体步骤如下：

  1. 自定义一个类继承自 ViewPager，并重写其 onDraw 方法。
  2. 在 onDraw 方法中，获取 ViewPager 当前显示的页面以及其左右相邻的页面。
  3. 根据当前页面的位置，计算出左右相邻页面的缩放比例，并将其应用到对应的页面上。
  4. 调用父类的 onDraw 方法绘制页面。

3. 代码实现

下面是一个简单的示例代码，演示了如何实现 ViewPager 中间图片放大的效果。

public class ZoomViewPager extends ViewPager {
    private static final float MAX_SCALE = 1.0f; // 最大缩放比例
    private static final float MIN_SCALE = 0.8f; // 最小缩放比例

    public ZoomViewPager(Context context) {
        super(context);
    }

    public ZoomViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int count = getChildCount();
        if (count > 0) {
            int currentItem = getCurrentItem();
            View currentView = getChildAt(currentItem);
            View leftView = currentItem > 0 ? getChildAt(currentItem - 1) : null;
            View rightView = currentItem < count - 1 ? getChildAt(currentItem + 1) : null;

            if (currentView != null) {
                float scale = calculateScale(currentView);
                currentView.setScaleX(scale);
                currentView.setScaleY(scale);
            }

            if (leftView != null) {
                float scale = calculateScale(leftView);
                leftView.setScaleX(scale);
                leftView.setScaleY(scale);
            }

            if (rightView != null) {
                float scale = calculateScale(rightView);
                rightView.setScaleX(scale);
                rightView.setScaleY(scale);
            }
        }

        super.onDraw(canvas);
    }

    // 根据页面位置计算缩放比例
    private float calculateScale(View view) {
        int currentItem = getCurrentItem();
        int position = (int) view.getTag();
        float offset = Math.abs(currentItem - position);

        if (offset >= 1) {
            return MIN_SCALE;
        } else {
            return MIN_SCALE + (MAX_SCALE - MIN_SCALE) * (1 - offset);
        }
    }
}

4. 使用方法

使用自定义的 ZoomViewPager 非常简单，只需要在布局文件中将原来的 ViewPager 替换为 ZoomViewPager 即可。例如：

<com.example.ZoomViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

然后在代码中，通过 findViewById 方法找到 ZoomViewPager 对象，并设置适配器即可。

ZoomViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setAdapter(adapter);

5. 类图

下面是 ZoomViewPager 类的类图：

classDiagram
    class ZoomViewPager {
        +calculateScale(view: View): float
        +onDraw(canvas: Canvas): void
    }

6. 总结

通过自定义 ViewPager，并重写其 onDraw 方法，我们可以实现 ViewPager 中间图片放大的效果。以上是一个简单的示例代码，你可以根据实际需求进行修改和扩展。

希望本文对你理解 Android ViewPager 中间图片放大有所帮助。如果有任何疑问或建议，欢迎留言讨论。