Android开发 自定义View_利用canvas的clipRect实现文字颜色滚动效果

前言

　　实现原理很简单，就是绘制2层不同颜色的文本，然后将其中一个的画布裁剪到合适的大小在向一个方向移动起来。

效果图

代码

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Rect
import android.util.AttributeSet
import android.util.TypedValue
import android.view.View


class ScrollGradientText(context: Context, attrs: AttributeSet?) : View(context, attrs) {
    private var mTextSize = 24f
    private var mBottomTextColor = Color.WHITE
    private var mTopTextColor = Color.parseColor("#48F3D0")
    private var mText = "hello world"
    private var mBottomPaint = Paint()
    private var mTopPaint = Paint()
    private var mWidth = 0
    private var mHeight = 0
    private var mStepCount = 0
    private var mSpeed = 150
    private var mLeft = 0
    private var mRight = 0

    init {
        updatePaint()
    }

    /**
     * 文本内容
     */
    fun setText(text: String) {
        mText = text
        invalidate()
    }

    /**
     * 文字颜色
     */
    fun setTextColor(topTextColor: Int, bottomTextColor: Int) {
        mTopTextColor = topTextColor
        mBottomTextColor = bottomTextColor
        updatePaint()
        invalidate()
    }

    /**
     * 设置文字大小
     */
    fun setTextSize(textSize: Float) {
        mTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, textSize, resources.displayMetrics)
        updatePaint()
        invalidate()
    }

    /**
     * 设置速度
     */
    fun setSpeed(speed: Int) {
        mSpeed = speed
    }

    /**
     * 测量尺寸
     */
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        mWidth = mBottomPaint.measureText(mText).toInt()
        mHeight = MeasureSpec.getSize(heightMeasureSpec)
        mLeft = -mWidth / 3
        mRight = 0
        setMeasuredDimension(mWidth, mHeight)
    }

    private fun updatePaint() {
        mBottomPaint = Paint().apply {
            color = mBottomTextColor
            textSize = mTextSize
            textAlign = Paint.Align.CENTER
            isAntiAlias = true
        }
        mTopPaint = Paint().apply {
            color = mTopTextColor
            textSize = mTextSize
            textAlign = Paint.Align.CENTER
            isAntiAlias = true
        }
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        drawBottomText(canvas)
        drawTopText(canvas)
    }

    private fun drawBottomText(canvas: Canvas) {
        canvas.save()
        val offset = textCenteredOffset(mBottomPaint)
        canvas.drawText(mText, (width / 2).toFloat(), (height / 2).toFloat() - offset, mBottomPaint)
        canvas.restore()
    }

    private fun drawTopText(canvas: Canvas) {
        canvas.save()
        if (mLeft > width) {
            mLeft = -mWidth / 3
            mRight = 0
            mStepCount = 0
        }
        mStepCount += 5
        mLeft += mStepCount
        mRight += mStepCount
        canvas.clipRect(mLeft, 0, mRight, mHeight)
        val offSet = textCenteredOffset(mTopPaint)
        canvas.drawText(mText, (width / 2).toFloat(), (height / 2).toFloat() - offSet, mTopPaint)
        canvas.restore()
        postInvalidateDelayed(150)
    }

    /**
     * 文字居中偏移量
     */
    private fun textCenteredOffset(paint: Paint): Int {
        val bounds = Rect()
        paint.getTextBounds(mText, 0, mText.length, bounds)
        return (bounds.top + bounds.bottom) / 2
    }
}

 

 

End