实现黑客帝国数字雨 | 自定义View

滑板上的老砒霜 鸿洋 2018-05-21

点击上方“鸿洋”,选择“置顶公众号”

优质技术文第一时间送达


本文作者


作者:滑板上的老砒霜

链接:

https://www.jianshu.com/p/f4bac6abfbeb

本文由作者授权发布。


周一给大家来篇比较轻松的文章~


1
概述


昨天又看了一遍黑客帝国,怎么说了,时隔多年,依旧那么经典,小时候看不懂,现在再看却有很多体味。小时候看时印象最深的就是数字雨了,导致我现在写代码也要是黑屏。所以今天上午,闲来无事,拿出两个小时写了一个数字雨控件,直接上图。



2
分析


先分析,再动笔。这里我将代码分为两部分,一个数字雨中的每一列NumberRainItem,还有就是所有列合并起来的NumberRain。


NumberRain比较简单,就是继承自LinearLayout的一个控件,在计算出宽度后添加NumberRainItem,很简单,这里就不作说明了,这里主要说一下NumberRainItem控件。


每一个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)
   }
}


这段代买主要就是绘制数字,判断高亮,没什么难度,可以看一下注释。


这个控件难度不大,但是做出来感觉还是很有意思的,NumberRain还有自定义属性什么的,就不说了,大家看代码就可以了。


最后附上github地址
https://github.com/skateboard1991/NumberRain



推荐阅读

Android程序员面试会遇到的算法 part 4

这一次彻底弄明白Gradle相关配置



如果你想要跟大家分享你的文章,欢迎投稿~


┏(^0^)┛明天见!

    觉得不错,分享给更多人看到
    鸿洋 热门文章:

    Android 第一行代码赠书 [全球限量版]    阅读/点赞 : 9481/392

    冰冻三尺非一日之寒-自学篇    阅读/点赞 : 7510/248

    Android一些你需要知道的布局优化技巧    阅读/点赞 : 7366/175

    冰冻三尺非一日之寒-博客篇    阅读/点赞 : 6871/302

    Android程序员的专属情人节    阅读/点赞 : 6565/197

    2016的文章都在这里,2017年加油~    阅读/点赞 : 6238/173

    2016一路有你,2017一起同行    阅读/点赞 : 4601/212

    鸿洋 微信二维码

    鸿洋 微信二维码