FlipDotView——磁翻点阵显示效果

今日科技快讯

长达两个月之久的Note 7爆炸事件近日终于尘埃落定，三星可谓是经历了一场前所未有的噩梦。从海外版电池质量问题遭遇频繁爆炸，到三星紧急召回海外版Note 7，再到国行版双标准事件，而后Note 7被各国航空公司明令禁止带上飞机。不久，国行版Note 7也出现爆炸起火情况，而三星给出的鉴定认为爆炸是由于外部加热所导致的。但近日三星给用户更换的安全版的Note 7再次出现爆炸情况，至此三星才终于痛下决定，停止Note 7的生产和销售，召回所有已售出的Note 7。

因为这次的Note 7事件，三星的品牌形象可以说是一落千丈。三星电子的股票暴跌，市值一天蒸发了近70亿美元。但这还只是当前的损失而已，而这次事件的后续影响还远远没有结束，三星以后出产的新手机恐怕都很难让用户摆脱爆炸的阴影了。

作者简介

本篇来自 reikyZ 的投稿，是有关实现点阵显示的。大家可以自行百度一下 点阵 是什么意思（其实我也是不太讲得清楚，毕竟我也不是专业搞硬件的）。对于本文的自定义View，我第一个想到的应用是电子时钟，不知道大家跟我是不是想到一块了。好了，快让我们来看看吧！

前言

大半年前在B站看到一系列关于磁翻显示阵列的视频：

http://www.bilibili.com/video/av4526770/index_3.html

觉得挺有意思，本来打算用 Arduino (一款便捷灵活、方便上手的开源电子原型平台。包含硬件（各种型号的Arduino板）和软件（Arduino IDE)) 也实现一个，可惜一直都没有找到磁翻阵列的元器件，自己做也不太现实，就搁置了。直到最近在家休息，想起来要不就写个 View 实现一下，花了一个下午，基本算完成了，当然还有很多可以改进的地方，这个 Demo 也只是提供一个思路。

效果

目前支持显示中文字符，图片的显示，英文点阵也可以用相同思路实现（需要字符文件），还可以根据自己需要拓展不同的动画效果。

原理

原理很简单，就是 ImageView的阵列，每个 ImageView 只有两种状态，用两个图片表示，当需要改变显示图案时，逐行逐列对每个 ImageView 判断，需要改变时 播放翻转动画，改变图片内容，最后记录下当前每个点的显示状态。

实现

attrs.xml

目前抽取的属性有以上这些：

• dotSize 为每个ImageView 的边长（默认为正方形）；

• dotPadding 为 ImageView 的 Padding 值，四边相同；

• widthNum 为显示点阵列数；

• heightNum 为行数；

• dotDrawable 为 ImageView 状态是显示时的图片；

• dotBackDrawable 为 ImageView 状态是不显示时的图片；

• soundOn 是磁翻翻动时的声音开关。

另外还有一些参数，比如，动画总时长，动画间隔时长，动画方向 等也可以根据需要添加。

activity_main.xml

在布局文件中的使用。

FlipDotView.java

首先根据需求，这个 View 继承了 LinearLayout，在构造函数中初始化一些数据和视图：

• initStauts() 预先构造一个二维容器，存放初始化的显示状态和改变后的状态;

• initViews(context, attires) View 的主要实现，根据得到的行数、列数以 LinearLayout 为容器，生成 ImageView 的阵列；

• initSound() 初始化了 SoundPool， 作为磁翻翻动时的声效，其中存放了几个不同的轻微敲击声效，避免大量连续播放产生的机械感和爆音。

flipFromCenter(list) 实现了效果图中 show Bitmap 的从 FlipDotView 中心向外辐射渐变翻动效果：

1. 首先计算出 FlipDotView 中心的行列位置；

2. 遍历二维数组，根据坐标到中心的距离，根据每个距离间隔（示例为 300ms），加上一个随机延迟（duration * random.nextInt(5)），获得每个 ImageVIew 的动画延迟 deley；

3. 判断目标阵列（list）与当前显示阵列（oldList）中（i，j）位置上的值是否相同，相同则表示不需要翻动操作，继续遍历；

4. 如果不同，则调用当前点 ImageView.postDelayed() 方法，将步骤［2］delay传入；

5. 判断需要翻转的 list 点状态，播放翻转动画，并设置图片；

6. 最后，如果需要播放声音，则播放声效。

另外还有两种显示效果，可以参考稍后的 Demo，流程与以上类似。

使用

MainActivity.java

Demo 中，点击 FlipDotView 下方的 ImageView 与 Button，分别传入一个图形、图片、字符点阵，调用 FlipDotView 的 flipFromLeftTop(list)、 flipFromCenter(list) 方法，改变显示内容。

其中，图片与字符转点阵不是本文重点，有兴趣可以参考 Demo。

FlipDotView 的翻动音效，当翻动数量过多时声音可能会不自然或者无声，可以调整 SoundPool 构造函数的第一个参数，设置成一个比较大的数量，允许可能多的声音对象播放。

最后是 Demo Git：

https://github.com/ReikyZ/FlipDot

更多

如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：

觉得有趣可以赞赏一下

赞赏

人赞赏