这次自定义是为了完成跑马灯作用。

其实跑马灯作用github上已经有许多完成且能够参阅的例子了，但他们都太花里胡哨了，又是构建者模式，又是泛型，还有用到了ViewFlipper。我的需求不需求这些，我只是一个简单的String字符串的文字跑马灯，不需求List，不需求增加animator动画，不需求扩展。

想来想去，仍是自己写一个跑马灯吧，节前最终一篇文章，估量看的人少。

没错，这次的是，100行代码完成简易跑马灯作用。

一百行代码完成简易跑马灯

在此之前，能够去看看扔物线官网上的自定义 View 1-3 drawText() 文字的制作这篇文章，看完之后就会发现，“简易”跑马灯完成起来真的太简单了。

先贴作用图

我知道太丑了，绿底黑字，不过为了显现作用明显，才这么做的，在实际中我对自己的审美很自傲的。

代码

直接上代码

class MarqueeView(context: Context, attrs: AttributeSet) : View(context, attrs) {
    private var msg: String = ""//制作的文字
    private var speed: Int = 1//文字速度
    private val duration = 5L//制作距离
    private val textColor by lazy { Color.BLACK }
    private var textSize = 12f
    private val paint by lazy {
        val p = TextPaint(Paint.ANTI_ALIAS_FLAG)
        p.style = Paint.Style.FILL
        p.color = textColor
        val scale = resources.displayMetrics.density
        p.textSize = textSize * scale + 0.5f
        p
    }
    private val rect by lazy { Rect() }
    //协程执行文字的跑马灯作用
    private var task: Job? = null
    //文字的方位
    private var xPos = 0f
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        log(msg)
        canvas?.drawText(msg, xPos, height / 2f + getTextHeight() / 2, paint)
    }
    private fun updateXPosition() {
        if (xPos < -getTextWidth()) {
            xPos = width.toFloat()
        }
    }
    private fun getTextWidth(): Int {
        if (msg.isEmpty()) return 0
        paint.getTextBounds(msg, 0, msg.length, rect)
        return rect.width()
    }
    private fun getTextHeight(): Int {
        if (msg.isEmpty()) return 0
        paint.getTextBounds(msg, 0, msg.length, rect)
        return rect.height()
    }
    fun startWithContent(msg: String): MarqueeView {
        if (msg.isEmpty()) return this
        this.msg = msg
        startRoll()
        return this
    }
    private fun startRoll() {
        if (task == null) {
            task = CoroutineScope(Dispatchers.IO).launch {
                while (isActive) {
                    kotlin.runCatching {
                        delay(duration)
                        xPos -= speed
                        updateXPosition()
                        postInvalidate()
                    }
                }
            }
        }
    }
    fun stop(): MarqueeView {
        task?.cancel()
        task = null
        return this
    }
    fun reStart(): MarqueeView {
        if (msg.isEmpty()) return this
        startRoll()
        return this
    }
    private fun log(msg:String) {
        Log.e("TAG", msg)
    }
}

一个完好的自定义View，算上import的，差不多100行不到。

解析

属性都带注释了，重点有两块，主要是这两块完成了跑马灯的作用。

drawText

canvas?.drawText(msg, xPos, height / 2f + getTextHeight() / 2, paint)

第一个参数是跑马灯的内容，第二个参数是文字制作的X轴坐标，第三个参数是文字制作的Y轴坐标，第四个参数是画笔。

只要改变制作开始方位的X轴坐标，就能完成文字的位移。假定msg=”abcdefg”，当xPos==”ab的宽度“的时分，制作作用如下，

注意的是，文本框之外的”ab”是不会对用户显现的，而”cdefg“才是真正被用户可见的内容。

updateXPosition

更新文字制作的X坐标，当字符串”abcdefg”悉数都左移到文本框外时，需求更新X轴的坐标，才能完成循环翻滚的作用。

    private fun updateXPosition() {
        if (xPos < -getTextWidth()) {
            xPos = width.toFloat()
        }
    }

调用

xml中的代码

<com.testdemo.MarqueeView
    android:id="@+id/marquee"
    android:layout_width="200dp"
    android:layout_height="40dp"
    android:background="@color/c_green"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

activity中的代码

val marqueeView = findViewById<MarqueeView>(R.id.marquee)
marqueeView.startWithContent("abcdefg")//测验文字：各方人员请注意，接下来是跑马灯，跑马灯，跑马灯要来了！

结语

以上便是简易跑马灯的悉数完成代码了。

当然，还有许多是能够优化的，现在文字有必要是悉数移除视野后才会从头从右边移入，中心有一个width宽度的空白。这个能够做优化。不过方才尝试了一下，新增一个xPos1作为联接文字的坐标，联接文字与上一个文字之间的宽度设置为8个字符，在onDraw中制作两次文字，代码如下

...省掉代码...
private var xPos1 = 0f
private val space by lazy {
    val s = "aaaaaaaa"//8个空格作为联接
    paint.getTextBounds(s, 0, s.length, rect)
    rect.width()
}
...省掉代码...
override fun onDraw(canvas: Canvas?) {
    ...省掉代码...
    canvas?.drawText(msg, xPos1, height / 2f + getTextHeight() / 2, paint)
}
...省掉代码...
/**
 * 更新制作的方位，完成循环
 * 第二个text的方位是在第一个方位后边的8个空格后
 */
private fun updateXPosition() {
    val textWidth = getTextWidth()
    if (xPos < -textWidth) {
        xPos = xPos1 + textWidth + space
    }
    if (xPos > -textWidth && xPos < width - textWidth) {
        xPos1 = xPos + space + textWidth
    } else {
        xPos1 -= speed
    }
}
...省掉代码...

gif就不放了，你们能够直接贴代码。用示例文字”各方人员请注意，接下来是跑马灯，跑马灯，跑马灯要来了！”运行起来没问题。

这就好了？

不，不！要知道，此时，文字的总长度是大于自定义View的width的，假设文字的长度小于width的话，就又要考虑不同的情形了。有点麻烦，updateXPosition()函数内的逻辑就杂乱起来了。(内心独白：我是一个简单放弃的人，这个就算了，仍是让文字死后留出一个自定义view的宽度的空白吧)

还有，假设我想要翻滚的不是一个字符串，而是字符串列表List，那怎么办？

这个也简单，直接贴代码(完好版，这个应该不用改了)

class MarqueeView(context: Context, attrs: AttributeSet) : View(context, attrs) {
    private var msg: String = ""//制作的文字
    private var speed: Int = 1//文字速度
    private var duration = 5L//制作距离
    private var textColor = Color.BLACK
    private var textSize = 12f
    private val scale by lazy { resources.displayMetrics.density }
    private val paint by lazy {
        val p = TextPaint(Paint.ANTI_ALIAS_FLAG)
        p.style = Paint.Style.FILL
        p.color = textColor
        p.textSize = textSize * scale + 0.5f
        p
    }
    private val rect by lazy { Rect() }
    //协程执行文字的跑马灯作用
    private var task: Job? = null
    //文字的方位
    private var xPos = 0f
    private val dataList by lazy { ArrayList<String>() }
    private var dataPos = 0
    private var showList = false//设置符号位，判断是否显现list
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.drawText(msg, xPos, height / 2f + getTextHeight() / 2, paint)
    }
    private fun updateXPosition() {
        val textWidth = getTextWidth()
        if (xPos < -textWidth) {
            xPos = width.toFloat()
        }
    }
    private fun getTextWidth(): Int {
        if (msg.isEmpty()) return 0
        paint.getTextBounds(msg, 0, msg.length, rect)
        return rect.width()
    }
    private fun getTextHeight(): Int {
        if (msg.isEmpty()) return 0
        paint.getTextBounds(msg, 0, msg.length, rect)
        return rect.height()
    }
    fun startWithContent(msg: String): MarqueeView {
        if (msg.isEmpty()) return this
        this.msg = msg
        startRoll()
        return this
    }
    private fun startRoll() {
        if (task == null) {
            task = CoroutineScope(Dispatchers.IO).launch {
                while (isActive) {
                    kotlin.runCatching {
                        delay(duration)
                        xPos -= speed
                        updateXPosition()
                        updateMsg()
                        postInvalidate()
                    }
                }
            }
        }
    }
    fun stop(): MarqueeView {
        task?.cancel()
        task = null
        return this
    }
    fun reStart(): MarqueeView {
        if (msg.isEmpty()) return this
        startRoll()
        return this
    }
    fun setSpeed(speed: Int): MarqueeView {
        if (speed == 0) return this
        this.speed = speed
        return this
    }
    fun setDuration(duration: Long): MarqueeView {
        if (duration == 0L) return this
        this.duration = duration
        return this
    }
    fun setTextColor(@ColorInt textColor: Int): MarqueeView {
        this.textColor = textColor
        paint.color = textColor
        return this
    }
    fun setTextSize(textSize: Float): MarqueeView {
        if (textSize < 10f) return this
        paint.textSize = textSize * scale + 0.5f
        return this
    }
    fun startWithList(data: List<String>) : MarqueeView{
        showList = true
        dataList.clear()
        dataList.addAll(data)
        if (dataList.isEmpty()) return this
        startRoll()
        dataPos = 0
        return this
    }
    private fun updateMsg() {
        if (!showList || dataList.isEmpty() || xPos <= (width - speed)) return
        msg = dataList[dataPos++ % dataList.size]
    }
}

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

先贴作用图

代码

解析

drawText

updateXPosition

调用

结语

作者信息

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

先贴作用图

代码

解析

drawText

updateXPosition

调用

结语

相关文章

一个两年前端的自我进阶之路

Flutter插件开发之HmsScanKit

Android View滑动处理大法

Solidity极简入门: 2. 数值类型

作者信息