Android自定義View：黑客帝國數字雨

滑板上的老砒霜發表於2018-04-23
AndroidView黑客

0.

昨天又看了一遍黑客帝國，怎麼說了，時隔多年，依舊那麼經典，小時候看不懂，現在再看卻有很多體味。小時候看時印象最深的就是數字雨了，導致我現在寫程式碼也要是黑屏。所以今天上午，閒來無事，拿出兩個小時寫了一個數字雨控制元件，直接上圖。

Android自定義View：黑客帝國數字雨

1.

先分析，再動筆。這裡我將程式碼分為兩部分，一個數字雨中的每一列NumberRainItem，還有就是所有列合併起來的NumberRain。 NumberRain比較簡單，就是繼承自LinearLayout的一個控制元件，在計算出寬度後新增NumberRainItem，很簡單，這裡就不作說明了，這裡主要說一下NumberRainItem控制元件。

2.

每一個NumberRainItem分為兩個部分，從上向下流下來的狀態，現在稱其為下流狀態，下流狀態時最後一個數字是高亮的；第二個狀態就是佈滿全屏後的狀態，稱其為完全狀態。完全狀態時高亮數字是從上向下順序高亮的。想好以後就開搞吧。

3.

上程式碼

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

        if (isShowAllNumber())
        {
            drawTotalNumbers(it)
        } else
        {
            drawPartNumbers(it)
        }

    }
}
複製程式碼

看onDraw方法，裡面的drawParNumbers方法就是用來繪製下流狀態，自然drawTotalNumbers就是繪製完全狀態的。究竟繪製那個狀態是有isShowAllNumber方法來判斷的

private fun isShowAllNumber(): Boolean
{
    return nowHeight >= height
}
複製程式碼

其中nowHeight是一個成員變數，代表著現在所有文字的高度，在下流狀態，每次多繪製一個文字，就會增加一個文字的高度。 接下來我們看drawTotalNumbers和drawPartNumbers

private fun drawPartNumbers(canvas: Canvas)
{
    val count = (nowHeight / textSize).toInt()
    nowHeight += textSize
    drawNumbers(canvas, count)

}

private fun drawTotalNumbers(canvas: Canvas)
{
    val count = (height / textSize).toInt()
    drawNumbers(canvas, count)
}
複製程式碼

其中都用了drawNumbers,其中的區別就是傳入的count值不一樣，這裡的count代表文字的個數。所以重中之重就在於drawNumbers方法了

private fun drawNumbers(canvas: Canvas, count: Int)
{
    if (count == 0)
    {
        postInvalidateDelayed(startOffset)
    } else
    {
        var offset = 0f
        for (i in 0 until count)
        {
           //生成隨機文字
            val text = ((Math.random() * 9).toInt()).toString()
         
            //高亮文字顏色變高亮，否則就是一般顏色
            if (hightLightNumIndex == i)
            {
                paint.color = hightLightColor
                paint.setShadowLayer(10f, 0f, 0f, hightLightColor)

            } else
            {
                paint.color = normalColor
                paint.setShadowLayer(10f, 0f, 0f, normalColor)
            }
            //繪製文字
            canvas.drawText(text, 0f, textSize + offset, paint)
            offset += textSize
        }
          //找到下一個高亮數字的位置
        if (!isShowAllNumber())
        {
            hightLightNumIndex++
        } else
        {
            hightLightNumIndex = (++hightLightNumIndex) % count
        }
        postInvalidateDelayed(100L)
    }
}
複製程式碼

這段代買主要就是繪製數字，判斷高亮，沒什麼難度，可以看一下注釋。

4.

這個控制元件難度不大，但是做出來感覺還是很有意思的,NumberRain還有自定義屬性什麼的，就不說了，大家看程式碼就可以了 最後附上github地址 github

相關文章