用一种有趣的方式探索自定义IndicatorView和ViewPager2的联动实现

2024-01-01 08:33:56

自定义IndicatorView

首先，我们需要自定义IndicatorView，它将负责在屏幕上绘制圆点，代表ViewPager2中不同页面的状态。为此，我们将创建一个自定义的View类，该类继承自View。在该类中，我们需要重写onDraw()方法，以便根据需要绘制圆点。

public class IndicatorView extends View {
    private int count;
    private int selectedPosition;
    private float radius;
    private Paint paint;

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

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

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

    private void init() {
        count = 0;
        selectedPosition = 0;
        radius = 10f;
        paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLACK);
    }

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

        for (int i = 0; i < count; i++) {
            float x = i * (2 * radius + 10) + radius;
            float y = getHeight() / 2;

            if (i == selectedPosition) {
                paint.setColor(Color.RED);
            } else {
                paint.setColor(Color.BLACK);
            }

            canvas.drawCircle(x, y, radius, paint);
        }
    }

    public void setCount(int count) {
        this.count = count;
        invalidate();
    }

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

与ViewPager2联动

接下来，我们需要将自定义的IndicatorView与ViewPager2联动起来。为此，我们需要在Activity或Fragment中添加ViewPager2和IndicatorView，并设置它们的适配器。我们还需要在ViewPager2的OnPageChangeListener中更新IndicatorView的selectedPosition属性。

public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager2;
    private IndicatorView indicatorView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager2 = findViewById(R.id.viewPager2);
        indicatorView = findViewById(R.id.indicatorView);

        ViewPager2Adapter adapter = new ViewPager2Adapter(this);
        viewPager2.setAdapter(adapter);

        viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                indicatorView.setSelectedPosition(position);
            }
        });

        indicatorView.setCount(adapter.getItemCount());
    }
}

Indicator小圆点的点击事件

最后，我们需要为IndicatorView添加点击事件，以便用户可以通过点击圆点来切换ViewPager2到相应页面。为此，我们需要在IndicatorView中添加一个onTouchEvent()方法，并根据用户的点击位置来更新ViewPager2的当前页面。

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        float x = event.getX();
        float y = event.getY();

        for (int i = 0; i < count; i++) {
            float cx = i * (2 * radius + 10) + radius;
            float cy = getHeight() / 2;

            if (Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) <= radius) {
                viewPager2.setCurrentItem(i, true);
                break;
            }
        }
    }

    return super.onTouchEvent(event);
}