0.

今天是母亲节，谨以此文献和此程序给我的母亲，节日快乐。

话不多说，先看效果

image

附上git地址 Github

1.

想好再动笔，整个卷轴有左右卷轴柄，纸和文字组成，默认卷轴关闭，点击是张开，张开后点击就合上，打开时速度由快到慢。功能分析到这，思路也就很明确了，那就动笔吧。

2.

private var dis = 0 //每个卷轴到中心的距离

private var textColor = Color.BLACK //文字颜色

private var reelColor = Color.RED //卷轴柄的颜色

private var paperColor = Color.WHITE //纸的颜色

private var textSize = 20f //文字颜色

private var text = "" //卷轴上的文字

private var reelWidth = 40f //卷轴柄宽度

private var duration = 3000 //卷轴打开所需时间

private lateinit var disAnimator: ValueAnimator //操控卷轴打开进度

private var isExpand = false  //卷轴是否处于打开状态

private var reelTopBarHeight = 20f //卷轴柄上端小木块的高度

private var lineOffset = 10f //纸上分割线的距离

这里要说到的是dis变量用来控制每个卷轴柄到中心的距离，也是控制纸宽度的参数，而disAnimator是用来控制dis的改变，同时为了控制卷轴打开速度和总时间的。

private fun initAnimator()
{
    disAnimator = ValueAnimator.ofInt(0, duration / 1000)
    disAnimator.duration = duration.toLong()
    disAnimator.interpolator = AccelerateDecelerateInterpolator()
    disAnimator.addUpdateListener {

        dis = (it.animatedFraction * (width / 2 - reelWidth)).toInt()
        postInvalidate()
    }
}

disAnimator设置了的值的变化范围是从0到总时间/1000, 由dis = (it.animatedFraction * (width / 2 - reelWidth)).toInt()可知
0<=dis<=width/2-reelWidth

3.

实现文字随着纸张的展开逐渐显露出来的效果，这是这个控件的重点。首先看drawText方法

private fun drawText(canvas: Canvas)
{
    textSize = Math.min(textSize, (height - reelTopBarHeight * 2 - lineOffset * 2))
    paint.isFakeBoldText = true
    paint.textSize=textSize
    val centerX = width.toFloat() / 2
    val centerY = height.toFloat() / 2
    val rect = Rect()
    paint.getTextBounds(text, 0, text.length, rect)
    canvas.drawText(text, centerX - rect.width() / 2, centerY + rect.height() / 2, paint)
}

很简单，就是讲文字绘制在中心位置。

再看darwPaper方法

private fun drawPaper(canvas: Canvas)
{
    val centerX = width.toFloat() / 2
    val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
    val canvasTmp = Canvas(bitmap)
    paint.color = paperColor
    canvasTmp.drawRect(centerX - dis, reelTopBarHeight, centerX + dis, height - reelTopBarHeight, paint)
    paint.color = Color.BLACK
    paint.strokeWidth = 2f
    canvas.drawBitmap(bitmap, 0f, 0f, paint)
}

绘制宽度随dis改变的纸。

要想实现文字只在已有宽度的纸上显示，那么我们就需要接住xfermode了，关于xfermode我就不仔细说了，不懂的请自行百度，这里我们采用DST_ATOP来实现这个功能，大家可能发现为什么drawPaper的时候生成了一个bitmap，和一个tempCanvas，最终绘制的是一个bitmap，那是因为为了控制它的透明区域不要太小，要让它足够覆盖到要和它结合绘制的文字内容，否则得到的结果很可能不是你想要的
看onDraw方法

override fun onDraw(canvas: Canvas?)
{
    super.onDraw(canvas)
    canvas?.let {

        val count = it.saveLayer(null, null, Canvas.ALL_SAVE_FLAG) //设置离屏缓冲，不设置的话会有问题
        paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_ATOP) //设置xfermode
        drawText(it) //绘制文字
        drawPaper(it) //绘制纸
        paint.xfermode = null
        drawPaerLines(it) //绘制纸上的线
        it.restoreToCount(count) //恢复
        drawReels(it) //绘制卷轴柄
    }

}

4.

根据状态来判断点击时卷轴是打开还是收缩回去

override fun onTouchEvent(event: MotionEvent?): Boolean
{
    when (event?.action)
    {
        MotionEvent.ACTION_DOWN ->
        {
            if (!disAnimator.isRunning)
            {
                if (!isExpand)
                {
                    val centerX = width / 2.toFloat()
                    if (event.x >= centerX - reelWidth && event.x <= centerX + reelWidth)
                    {
                        startAnimator()
                        isExpand = true
                    }
                }
                else
                {
                    disAnimator.reverse()
                    isExpand = false
                }
            }
            return true
        }
    }
    return false
}

5.

因为使用了Anmator，为了避免内存泄漏，注意添加以下代码

override fun onDetachedFromWindow()
{
    super.onDetachedFromWindow()
    disAnimator.cancel()
}