0.

昨天又看了一遍黑客帝國(guó)，怎么說(shuō)了，時(shí)隔多年，依舊那么經(jīng)典，小時(shí)候看不懂，現(xiàn)在再看卻有很多體味。小時(shí)候看時(shí)印象最深的就是數(shù)字雨了，導(dǎo)致我現(xiàn)在寫(xiě)代碼也要是黑屏。所以今天上午，閑來(lái)無(wú)事，拿出兩個(gè)小時(shí)寫(xiě)了一個(gè)數(shù)字雨控件，直接上圖。

1.

先分析，再動(dòng)筆。這里我將代碼分為兩部分，一個(gè)數(shù)字雨中的每一列NumberRainItem，還有就是所有列合并起來(lái)的NumberRain。

NumberRain比較簡(jiǎn)單，就是繼承自LinearLayout的一個(gè)控件，在計(jì)算出寬度后添加NumberRainItem，很簡(jiǎn)單，這里就不作說(shuō)明了，這里主要說(shuō)一下NumberRainItem控件。

2.

每一個(gè)NumberRainItem分為兩個(gè)部分，從上向下流下來(lái)的狀態(tài)，現(xiàn)在稱(chēng)其為下流狀態(tài)，下流狀態(tài)時(shí)最后一個(gè)數(shù)字是高亮的；第二個(gè)狀態(tài)就是布滿全屏后的狀態(tài)，稱(chēng)其為完全狀態(tài)。完全狀態(tài)時(shí)高亮數(shù)字是從上向下順序高亮的。想好以后就開(kāi)搞吧。

3.

上代碼

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

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

 }
}

看onDraw方法，里面的drawParNumbers方法就是用來(lái)繪制下流狀態(tài)，自然drawTotalNumbers就是繪制完全狀態(tài)的。究竟繪制那個(gè)狀態(tài)是有isShowAllNumber方法來(lái)判斷的

private fun isShowAllNumber(): Boolean
{
 return nowHeight >= height
}

其中nowHeight是一個(gè)成員變量，代表著現(xiàn)在所有文字的高度，在下流狀態(tài)，每次多繪制一個(gè)文字，就會(huì)增加一個(gè)文字的高度。

接下來(lái)我們看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,其中的區(qū)別就是傳入的count值不一樣，這里的count代表文字的個(gè)數(shù)。所以重中之重就在于drawNumbers方法了

private fun drawNumbers(canvas: Canvas, count: Int)
{
 if (count == 0)
 {
  postInvalidateDelayed(startOffset)
 } else
 {
  var offset = 0f
  for (i in 0 until count)
  {
   //生成隨機(jī)文字
   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
  }
   //找到下一個(gè)高亮數(shù)字的位置
  if (!isShowAllNumber())
  {
   hightLightNumIndex++
  } else
  {
   hightLightNumIndex = (++hightLightNumIndex) % count
  }
  postInvalidateDelayed(100L)
 }
}

這段代買(mǎi)主要就是繪制數(shù)字，判斷高亮，沒(méi)什么難度，可以看一下注釋。

4.

這個(gè)控件難度不大，但是做出來(lái)感覺(jué)還是很有意思的,NumberRain還有自定義屬性什么的，就不說(shuō)了，大家看代碼就可以了
最后附上github地址

github (本地下載)

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論