阅读 359

Android MarqueeTextView : 轻松实现文本滚动(跑马灯)效果

前言

Android 的 TextView 虽然有属性 android:ellipsize="marquee"有文字滚动效果,但是坑多,比如焦点变化了就不动了,而且不能控制滚动的速度,在RecyclerView里的表现更是灾难级的。为了解决以上问题,所以就有了MarqueeTextView:一个由 Kotlin 实现的文本滚动自定义 View。MarqueeTextView: Kotlin 实现文本横向滚动,跑马灯效果。 (gitee.com)

demo.jpg

集成方式

  • 工程build.gradle添加 maven { url 'https://jitpack.io' }
allprojects {
      repositories {
         //...
         maven { url 'https://jitpack.io' }
      }
}
复制代码
  • 模块build.gradle
dependencies {
    implementation 'com.gitee.zjianxin:MarqueeTextView:1.1'
}
复制代码

相关属性

xml 属性

属性说明
android:textSize文字大小
android:textColor文字颜色
android:text文本内容
marqueeRepeat循环模式:singe-单次执行;singleLoop-单项循环;fillLoop-填充循环
marqueeItemDistance每个item之间的距离, marqueeRepeat=fillLoop 有效
marqueeStartLocationDistance开始的起始位置 按距离控件左边的百分比 0~1之间
marqueeSpeed文字滚动速度
marqueeResetLocation重新改变内容的时候 , 是否初始化 位置,默认为true,改变

主要方法

  • start : 滚动开始
  • stop : 滚动停止
  • toggle : 切换滚动开始/停止

使用方式

<com.xin.marquee.text.view.MarqueeTextView
    android:id="@+id/tv1"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp"
    android:layout_marginBottom="16dp"
    android:text="Kotlin 实现文本横向滚动,跑马灯效果。"
    android:textSize="14dp"
    app:marqueeRepeat="fillLoop"
    app:marqueeSpeed="5" />
复制代码

代码里调用start方法

具体实现

让文字滚动起来其实就是定时在短时间内把文来,这样看着就会有连续滚动的感觉。 下面仅说明实现效果的核心方法,源码自取:MarqueeTextView: Kotlin 实现文本横向滚动,跑马灯效果。 (gitee.com)

  1. 核心类:android.text.TextPaintandroid.os.handler
  2. 获取绘制文本的宽度
private fun getTextWidth(text: String?): Float {
    if (text.isNullOrEmpty()) {
        return 0f
    }
    return textPaint.measureText(text)
}
复制代码
  1. 填充循环模式下的文本拼接
if (repeat == REPEAT_FILL_LOOP) {
    mFinalDrawText = ""
    //计算文本的宽度
    mSingleContentWidth = getTextWidth(targetContent)
    if (mSingleContentWidth > 0) {
        // 最大可见内容项数
        val maxVisibleCount = ceil(width / mSingleContentWidth.toDouble()).toInt() + 1
        repeat(maxVisibleCount) {
            mFinalDrawText += targetContent
        }
    }
    contentWidth = getTextWidth(mFinalDrawText)
} 
复制代码
  1. 绘制文本内容
override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    // 忽略部分代码 ...
    // 绘制文本
    if (mFinalDrawText.isNotBlank()) {
        canvas.drawText(mFinalDrawText, xLocation, height / 2 + textHeight / 2, textPaint)
    }
}
复制代码
  1. 定时绘制内容——滚起来
override fun handleMessage(msg: Message) {
    super.handleMessage(msg)
    if (msg.what == WHAT_RUN) {
        mRef.get()?.apply {
            if (speed > 0) {
                xLocation -= speed
                invalidate()
                // 50 毫秒绘制一次
                sendEmptyMessageDelayed(WHAT_RUN, 50)
            }
        }
    }
}
复制代码

总结

整个实现下来总的来说还是比较简单的,能够满足平时文本滚动(跑马灯)效果的需求了,实用!。代码量很少的,也比较清晰,大家看下源码应该就清楚了。有不清楚的欢迎交流。

文章分类
Android
文章标签