使用自定义View构建美观实用的ViewPager指示器

Android

2024-02-13 20:55:49

引子

ViewPager是一个强大的控件，可以帮助我们在一个视图中展示多个页面。它常用于创建滑动式界面，比如图片浏览器、新闻资讯阅读器等。为了让用户能够更直观地了解ViewPager当前所处的页面，我们通常会为ViewPager添加一个指示器。

实现思路

1. 创建自定义View

首先，我们需要创建一个自定义View来作为ViewPager的指示器。这个View可以是任何形状，但通常情况下它都是一个圆形或矩形。

2. 实现onDraw方法

接下来，我们需要在自定义View的onDraw方法中绘制指示器。在onDraw方法中，我们可以使用画笔（Paint）对象来绘制各种图形。比如，我们可以使用drawCircle方法来绘制一个圆形，或者使用drawRect方法来绘制一个矩形。

3. 添加指示器到ViewPager

最后，我们需要将自定义View添加到ViewPager中。我们可以通过ViewPager的addIndicator方法来添加指示器。在addIndicator方法中，我们需要传入一个指示器的实例和一个指示器的位置。

4. 处理ViewPager的页面切换事件

当ViewPager的页面发生切换时，我们需要更新指示器的位置。我们可以通过ViewPager的addOnPageChangeListener方法来监听ViewPager的页面切换事件。在onPageSelected方法中，我们可以获取到当前页面的索引，并根据索引更新指示器的位置。

代码示例

public class CustomViewPagerIndicator extends View {

    private Paint paint;
    private int selectedPosition;
    private int indicatorRadius;
    private int indicatorMargin;

    public CustomViewPagerIndicator(Context context) {
        super(context);
        init();
    }

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

    public CustomViewPagerIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);

        indicatorRadius = 10;
        indicatorMargin = 20;

        selectedPosition = 0;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int width = getWidth();
        int height = getHeight();

        // 计算指示器的位置
        int indicatorX = (width / 2) - ((indicatorRadius + indicatorMargin) * (getCount() - 1) / 2);
        int indicatorY = height / 2;

        // 绘制指示器
        for (int i = 0; i < getCount(); i++) {
            if (i == selectedPosition) {
                canvas.drawCircle(indicatorX, indicatorY, indicatorRadius, paint);
            } else {
                canvas.drawCircle(indicatorX, indicatorY, indicatorRadius / 2, paint);
            }

            indicatorX += indicatorRadius + indicatorMargin;
        }
    }

    public void setSelectedPosition(int position) {
        this.selectedPosition = position;
        invalidate();
    }

    public int getCount() {
        return 3;
    }
}