Android自定义View实现跑马灯效果：100行代码搞定

2023-07-05 15:51:53

利用自定义 View，打造强悍的 Android 跑马灯效果

简介

在 Android 开发中，跑马灯效果可谓常见，用于新闻公告、商品轮播、图片轮播等多种场景。传统实现方式依赖 ViewPager 或轮播库，却存在代码冗余、使用繁琐、自定义度低的缺陷。本文将介绍如何利用自定义 View 实现跑马灯效果，简洁高效、功能强大，支持 List 跑马灯，满足多种自定义需求。

实现原理

自定义 View 实现跑马灯效果的原理很简单，利用 Canvas 在 View 上绘制文字或图片，通过持续调整 Canvas 的偏移量，实现内容滚动效果。

核心代码

以下是自定义 View 的核心代码：

绘制文字

@Override
protected void onDraw(Canvas canvas) {
    // ...

    // 获取文字宽度和高度
    int textWidth = paint.measureText(text);
    int textHeight = paint.getTextSize();

    // 计算文字起始绘制位置
    int startX = (getWidth() - textWidth) / 2;
    int startY = (getHeight() - textHeight) / 2;

    // 平移 Canvas 至指定位置
    canvas.translate(offsetX, 0);

    // 绘制文字
    canvas.drawText(text, startX, startY, paint);
}

处理触控事件

@Override
public boolean onTouchEvent(MotionEvent event) {
    // ...

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            startX = (int) event.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            offsetX += event.getX() - startX;
            startX = (int) event.getX();
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            break;
    }

    return true;
}