Android自定义View实现黑客帝国数字雨效果

0.

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

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 (本地下载)

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Android自定义View制作仪表盘界面

    Android自定义View制作仪表盘界面

    前言 最近我跟自定义View杠上了,甚至说有点上瘾到走火入魔了.身为菜鸟的我自然要查阅大量的资料,学习大神们的代码,这不,前两天正好在郭神在微信公众号里推送一片自定义控件的文章--一步步实现精美的钟表界面.正适合我这种菜鸟来学习,闲着没事,我就差不多依葫芦画瓢也写了一个自定义表盘View,现在纯粹最为笔记记录下来.先展示下效果图: 下面进入正题 自定义表盘属性 老规矩,先在attrs文件里添加表盘自定义属性 <declare-styleable name="WatchView"&

  • Android自定义View之酷炫数字圆环

    Android自定义View之酷炫数字圆环

    先看下最终的效果 一.开始实现 新建一个DoughnutView继承View public class DoughnutView extends View { } 先重写onMeasure方法. /** * 当布局为wrap_content时设置默认长宽 * * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int hei

  • Android自定义View实现折线图效果

    Android自定义View实现折线图效果

    下面就是结果图(每种状态用一个表情图片表示): 一.主页面的布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=&quo

  • Android自定义View实现竖直跑马灯效果案例解析

    Android自定义View实现竖直跑马灯效果案例解析

    首先给出跑马灯效果图 中间的色块是因为视频转成GIF造成的失真,自动忽略哈. 大家知道,横向的跑马灯android自带的TextView就可以实现,详情请百度[Android跑马灯效果].但是竖直的跑马灯效果原生Android是不支持的.网上也有很多网友实现了自定义的效果,但是我一贯是不喜欢看别人的代码,所以这篇博客的思路完全是我自己的想法哈. 首先,我们需要给自定义的控件梳理一下格局,如下图所示: 1.首先我们将控件分为三个区块,上面绿色部分为消失不可见的块,中间黑色部分为可见区域,下面红色部

  • Android自定义View实现广告信息上下滚动效果

    Android自定义View实现广告信息上下滚动效果

    先看看效果: 实现代码: public class ScrollBanner extends LinearLayout { private TextView mBannerTV1; private TextView mBannerTV2; private Handler handler; private boolean isShow; private int startY1, endY1, startY2, endY2; private Runnable runnable; private Li

  • Android自定义view绘制圆环占比动画

    Android自定义view绘制圆环占比动画

    一.实现效果图 二.核心代码 1.自定义MyProgressView.java package com.czhappy.effectdemo.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas;

  • Android自定义view实现阻尼效果的加载动画

    Android自定义view实现阻尼效果的加载动画

    效果: 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识 先来解释下什么叫阻尼运动 阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动,又称减幅振动.衰减振动.[1] 不论是弹簧振子还是单摆由于外界的摩擦和介质阻力总是存在,在振动过程中要不断克服外界阻力做功,消耗能量,振幅就会逐渐减小,经过一段时间,振动就会完全停下来.这种振幅随时间减小的振动称为阻尼振动．因为振幅与振动的能量有关,阻尼振动也就是能量不断减少的振动．阻尼振动是非简谐运

  • Android 自定义View的使用介绍

    Android 自定义View的使用介绍

    在项目开发中,可能系统自带的一些widget不能满足我们的需求,这时就需要自定义View. 通过查看系统中的常用widget如Button,TextView,EditText,他们都继承自View,所以我们在继承自定义View的时候也自然的需要继承View.1.首先新建一个类LView继承自View 复制代码 代码如下: public class LView extends View { private Paint paint; public LView(Context context) {  

  • Android自定义View实现黑客帝国数字雨效果

    Android自定义View实现黑客帝国数字雨效果

    0. 昨天又看了一遍黑客帝国,怎么说了,时隔多年,依旧那么经典,小时候看不懂,现在再看却有很多体味.小时候看时印象最深的就是数字雨了,导致我现在写代码也要是黑屏.所以今天上午,闲来无事,拿出两个小时写了一个数字雨控件,直接上图. 1. 先分析,再动笔.这里我将代码分为两部分,一个数字雨中的每一列NumberRainItem,还有就是所有列合并起来的NumberRain. NumberRain比较简单,就是继承自LinearLayout的一个控件,在计算出宽度后添加NumberRainItem,很

  • Android自定义View实现带数字的进度条实例代码

    Android自定义View实现带数字的进度条实例代码

    第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

  • Android自定义view实现圆环进度条效果

    Android自定义view实现圆环进度条效果

    本文实例为大家分享了Android自定义view实现圆环进度条效果的具体代码,供大家参考,具体内容如下 一.实现效果图 二.核心代码 自定义view的属性 <?xml version="1.0" encoding="utf-8"?> <resources>     <declare-styleable name="RingProgressBar">         <attr name="rin

  • Android自定义View 实现水波纹动画引导效果

    Android自定义View 实现水波纹动画引导效果

    一.实现效果图 二.实现代码 1.自定义view package com.czhappy.showintroduce.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Pat

  • Android 自定义view实现水波纹动画效果

    Android 自定义view实现水波纹动画效果

    在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢: 好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比较比较不错的效果,目的只有一个,通过自定义view实现我们所能实现的动效: 今天主要分享水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个

  • Android自定义View控件实现刷新效果

    Android自定义View控件实现刷新效果

    三种得到LinearInflater的方法 a. LayoutInflater inflater = getLayoutInflater(); b. LayoutInflater localinflater = (LayoutInflater)context.getSystemService (Context.LAYOUT_INFLATER_SERVICE); c. LayoutInflater inflater = LayoutInflater.from(context); onDraw 方法

  • Android 自定义View实现芝麻分曲线图效果

    Android 自定义View实现芝麻分曲线图效果

    1.简介 其实这个效果几天之前就写了,但是一直没有更新博客,本来想着把芝麻分雷达图也做好再发博客的,然后今天看到鸿洋的微信公众号有朋友发了芝麻分的雷达图,所以就算了,算是一个互补吧.平时文章也写的比较少,所以可能有点杂乱,有什么需要改进的地方欢迎给出建议,不胜感激. 效果图: 2.步骤: 初始化View的属性 初始化画笔 绘制代表最高分和最低分的两根虚线 绘制文字 绘制代表月份的属性 绘制芝麻分折线 绘制代表芝麻分的圆点 绘制选中分数的悬浮文字以及背景 处理点击事件 3.编码: 初始化View属

  • Android自定义View实现水波纹扩散效果

    Android自定义View实现水波纹扩散效果

    目录 1.创建RippleView.class, 继承与View 1.1特殊属性解释 1.2新建attrs.xml文件(res/values) 1.3初始化画笔 2.开始绘制onDraw() 效果:水波纹扩散 场景:雷达.按钮点击效果.搜索等 实现:先上效果图,之前记得支付宝有一个咻一咻,当时就是水波纹效果,实现起来一共两步,第一画内圆,第二画多个外圆,不同时创建有间隔创建然后缓慢增大外圆半径,到达最远距离时移除掉,扩散时把透明度从255-1不断赋值即可.复杂在第二步,开工. 开工 1.创建Ri

  • Android自定义view实现圆的扩散效果

    Android自定义view实现圆的扩散效果

    本文实例为大家分享了Android自定义View的实现水波纹,供大家参考,具体内容如下 一.实现效果 MainActivity.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.andro

  • Android自定义View实现竖向滑动回弹效果

    本文实例为大家分享了Android自定义View实现滑动回弹的具体代码,供大家参考,具体内容如下 前言 Android 页面滑动的时候的回弹效果 一.关键代码 public class UniversalBounceView extends FrameLayout implements IPull {       private static final String TAG = "UniversalBounceView";     //default.     private sta

随机推荐