Android点阵屏效果的控件

最近发现了一个比较好玩的效果，android实现的LED点阵屏幕效果，挺有意思的，于是花了点时间实现了一下，这个用在演唱会上的粉丝当成牌子举是不是挺好的呢，或者是送给妹子？哈哈~

实现思路比较简单，主要是计算汉字对应的点阵矩阵，汉字通过GB2312编码，每个汉字对用两个byte来表示，而一个汉字被存储为点阵时，以16*16表示，需要16*16=256bit，也就是32byte，GB2312编码也是它在字库文件中的区码和位码，通过这两个值可以计算到这个汉字在字库文件中的相对位置，根据这个位置读取接下来的32位，就对应着这个汉字对应的字模信息，字模信息         其实就是一个byte数组，对于16*16的汉字，对应着长度为32的byte数组。

比如要在手机屏幕上显示两个“我”字，也就是上面的样子，其实对应一个矩阵，称之为点阵矩阵，在存储的时候就是需要保存一个点阵矩阵，如上图的样子，黑色点为true，空心点为false，这个点阵矩阵很容易根据每个汉字的字模信息局算出来，其实就是将字模信息中的每个byte处理一下它的每个bit。

比如“我”这个字，它的字模信息为

[4, -128, 14, -96, 120, -112, 8, -112, 8, -124, -1, -2, 8, -128, 8, -112, 10, -112, 12, 96, 24, 64, 104, -96, 9, 32, 10, 20, 40, 20, 16, 12,]

两个”我”得到就是

[4, -128, 14, -96, 120, -112, 8, -112, 8, -124, -1, -2, 8, -128, 8, -112, 10, -112, 12, 96, 24, 64, 104, -96, 9, 32, 10, 20, 40, 20, 16, 12,

4, -128, 14, -96, 120, -112, 8, -112, 8, -124, -1, -2, 8, -128, 8, -112, 10, -112, 12, 96, 24, 64, 104, -96, 9, 32, 10, 20, 40, 20, 16, 12]

接下来就是将其对应成下面的byte矩阵，当然，对于每个字节，我们保存它的位信息，即保存成boolean值。

0x04,0x80 | 0x04,0x80

0x0E,0xA0 | 0x0E,0xA0

0x78,0x90 | 0x78,0x90

0x08,0x90 | 0x08,0x90

0x08,0x84 | 0x08,0x84

0xFF,0xFE | 0xFF,0xFE

0x08,0x80 | 0x08,0x80

0x08,0x90 | 0x08,0x90

0x0A,0x90 | 0x0A,0x90

0x0C,0x60 | 0x0C,0x60

0x18,0x40 | 0x18,0x40

0x68,0xA0 | 0x68,0xA0

0x09,0x20 | 0x09,0x20

0x0A,0x14 | 0x0A,0x14

0x28,0x14 | 0x28,0x14

0x10,0x0C | 0x10,0x0C

在绘图时，最好还是用SurfaceView，因为滚动时，绘制任务较多，需要注意的几个参数

控件宽度w，高度h，s为点的半径，高度方向上的点的个数为num，于是

点的半径r=(h – (num + 1) * s ) / (2 * num)

第(i,j)个点的坐标为 { (s + r + (s + 2 * r) * j), (s + r + (s + 2 * r) * i)}

当画每个点的时候和点阵矩阵对比，如果对应位置在点阵矩阵中为true就画成实心点，否则为空心点。

如何让启动起来呢？其实也很简单，只需要定时的将这个点阵矩阵的列循环左右移动，然后重绘即可，移动的速度只需要调整定时重绘的间隔。

此外，支持设置颜色textColor，默认绿色

设置点间隔spacing，一般不用设置

设置是否滚动scroll，默认是

设置滚动方向scrollDirection，默认向左

设置滚动速度speed，可选normal和slow，默认normal

<com.yqh.androidled.LedView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="我爱你"
    app:scrollDirection="left"
    app:textColor="#f00"
    app:scroll="false"
/>

效果图

代码：

LedView.java

public class LedView extends TextView {

	private FontUtils utils;
	/*
	 * 一个字用16*16的点阵表示
	 */
	private int dots = 16;
	/*
	 * 点阵之间的距离 
	 */
	private float spacing = 10;
	/*
	 * 点阵中点的半径
	 */
	private float radius;
	private Paint normalPaint;
	private Paint selectPaint;
	
	private String text;
	/*
	 * 汉字对应的点阵矩阵
	 */
	private boolean[][] matrix;
	/*
	 * 是否开启滚动
	 */
	private boolean scroll;
	/*
	 * 默认颜色绿色
	 */
	private int paintColor = Color.GREEN;
	
	private Thread thread;
	/*
	 * 滚动的text
	 */
	private volatile boolean scrollText = true;
	/*
	 * 用来调整滚动速度
	 */
	private int sleepTime = 100;
	
	/*
	 * 滚动方向，默认0向左
	 */
	private int scrollDirection = 0;
	
	public LedView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LedTextView);
		int n = typedArray.getIndexCount();
		for (int i = 0; i < n; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
            case R.styleable.LedTextView_textColor:
            	paintColor = typedArray.getColor(R.styleable.LedTextView_textColor, Color.GREEN);
                break;
            case R.styleable.LedTextView_spacing:
                spacing = typedArray.getDimension(R.styleable.LedTextView_spacing, 10);
                break;
            case R.styleable.LedTextView_scroll:
            	scroll = typedArray.getBoolean(R.styleable.LedTextView_scroll, true);
                break;
	    case R.styleable.LedTextView_speed:
		int speed = typedArray.getInt(R.styleable.LedTextView_speed, 0);
		if (0 == speed) {
			sleepTime = 100;
		}
		else {
			sleepTime = 300;
		}
		break;
	    case R.styleable.LedTextView_scrollDirection:
		scrollDirection = typedArray.getInt(R.styleable.LedTextView_scrollDirection, 0);
		break;
            }
        }
		typedArray.recycle();
		selectPaint = new Paint();
		selectPaint.setStyle(Style.FILL);
		selectPaint.setColor(paintColor);

		normalPaint = new Paint();
		normalPaint.setStyle(Style.STROKE);
		normalPaint.setColor(paintColor);

		text = getText().toString();
		if (1 == scrollDirection) {
			text = reverseString(text);
		}
		
		utils = new FontUtils(context);
		matrix = utils.getWordsInfo(text);
		if (scroll) {
			thread = new ScrollThread();
			thread.start();
		}
	}

	public LedView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public LedView(Context context) {
		this(context, null, 0);
	}

	/**
	 * 翻转字符串，当设置享有滚动时调用
	 * @param str
	 * @return
	 */
	private String reverseString(String str){
		StringBuffer sb = new StringBuffer(str);
		sb=sb.reverse();
		return sb.toString();
	}
	
	/*
	 * 用于控制滚动，仅在开启滚动时启动。
	 */
	private class ScrollThread extends Thread {
		@Override
		public void run() {
			while (scrollText) {
				try {
					Thread.sleep(sleepTime);
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
				if (0 == scrollDirection) {
					matrixLeftMove(matrix);
				} else {
					matrixRightMove(matrix);
				}
				postInvalidate();
			}
		}
	}
	
	/**
	 * 向左滚动时调用，列循环左移
	 * @param matrix
	 */
	private void matrixLeftMove(boolean [][] matrix){
		for (int i = 0; i < matrix.length; i++) {
			boolean tmp = matrix[i][0];
			System.arraycopy(matrix[i], 1, matrix[i], 0, matrix[0].length - 1);
			matrix[i][matrix[0].length - 1] = tmp;
		}
	}
	
	/**
	 * 向右滚动时调用，列循环右移
	 * @param matrix
	 */
	private void matrixRightMove(boolean [][] matrix){
		for (int i = 0; i < matrix.length; i++) {
			boolean tmp = matrix[i][matrix[0].length - 1];
			System.arraycopy(matrix[i], 0, matrix[i], 1, matrix[0].length - 1);
			matrix[i][0] = tmp;
		}
	}
	
	/**
	 * 主要是想处理AT_MOST的情况，我觉得View默认的情况就挺好的，由于继承自TextView，而TextView重
	 * 写了onMeasure，因此这里参考View#onMeasure函数的写法即可
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
                getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
	}
	
	private void drawText(Canvas canvas) {
		radius = (getHeight() - (dots + 1) * spacing) / (2 * dots);
		// 行
		int row = 0;
		// 列
		int column = 0;
		while (getYPosition(row) < getHeight()) {
			while (getXPosition(column) < getWidth()) {
				// just draw
				if (row < matrix.length && column < matrix[0].length && matrix[row][column]) {
					canvas.drawCircle(getXPosition(column), getYPosition(row), radius, selectPaint);
				} else {
					canvas.drawCircle(getXPosition(column), getYPosition(row), radius, normalPaint);
				}
				column++;
			}
			row++;
			column = 0;
		}
	}
	
	/**
	 * 获取绘制第column列的点的X坐标
	 * @param column
	 * @return
	 */
	private float getXPosition(int column) {
		return spacing + radius + (spacing + 2 * radius) * column;
	}

	/**
	 * 获取绘制第row行的点的Y坐标
	 * @param row
	 * @return
	 */
	private float getYPosition(int row) {
		return spacing + radius + (spacing + 2 * radius) * row;
	}
	
	private void stopScroll() {
		scrollText = false;
	}
	@Override
	protected void onDetachedFromWindow() {
		stopScroll();
		super.onDetachedFromWindow();
	}

	@Override
	protected void onDraw(Canvas canvas) {
//		super.onDraw(canvas);
		drawText(canvas);
	}
}

FontUtils.java

public class FontUtils {
	private Context context;
	/*
	 * 字库名
	 */
	private static String dotMatrixFont = "HZK16";;
	/*
	 * 编码 GB2312
	 */
	private final static String ENCODE = "GB2312";
	
	/*
	 * 16X16的字库用16个点表示
	 */
	private int dots = 16;
	
	/*
	 * 一个字用点表示需要多少字节，16X16的字体需要32个字节
	 */
	private int wordByteByDots = 32;
	
	public FontUtils(Context context) {
		this.context = context;
	}

	/**
	 * 获取字符串的点阵矩阵
	 * @param str
	 * @return
	 */
	public boolean[][] getWordsInfo(String str) {
		byte[] dataBytes = null;
		try {
			dataBytes = str.getBytes(ENCODE);
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
		// 汉字对应的byte数组
		int[] byteCode = new int[dataBytes.length];
		// 当成无符号对待
		for (int i = 0; i < dataBytes.length; i++) {
			// 根据每两个byte数组计算一个汉字的相对位置
			byteCode[i] = dataBytes[i] < 0 ? 256 + dataBytes[i] : dataBytes[i];
		}
		// 用来存放所有汉字对应的字模信息
		// 一个汉字32 byte
		int wordNums = byteCode.length/2;
		boolean[][] matrix = new boolean[dots][wordNums * dots];
		byte [] dataResult = new byte[wordNums * wordByteByDots];
		for (int i = 0, numIndex = 0; i < byteCode.length; i += 2, numIndex++) {
			// 依次读取到这个汉字对应的32位的字模信息
			byte[] data = read(byteCode[i], byteCode[i+1]);
			System.arraycopy(data, 0, dataResult, numIndex * data.length, data.length);
		}
		for (int num = 0; num < wordNums; num++) {
			for (int i = 0; i < dots; i++) {
				for (int j1 = 0; j1 < 2; j1++) {
					// 对每个字节进行解析
					byte tmp = dataResult[num * wordByteByDots + i * 2 + j1];
					for (int j2 = 0; j2 < 8; j2++) {
						if (((tmp >> (7 - j2)) & 1) == 1) { 
							matrix[i][num*dots + j1 * 8 + j2] = true;
						} else {
							matrix[i][num*dots + j1 * 8 + j2] = false;
						}
					}
				}
			}
		}
		return matrix;
	}

	/**
	 * 获取一个汉字的点阵数组，开始测试代码时用。。
	 * @see getWordsInfo
	 * @param str
	 * @param font
	 * @return
	 */
	@SuppressWarnings("unused")
	private boolean[][] getWordInfo(String str, String font) {
		boolean[][] matrix = new boolean[16][16];
		int[] byteCode = new int[2];
		try {
			byte[] data = str.getBytes(ENCODE);
			// 当成无符号对待
			byteCode[0] = data[0] < 0 ? 256 + data[0] : data[0];
			byteCode[1] = data[1] < 0 ? 256 + data[1] : data[1];
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
		// 读取到这个汉子对应的32位的字模信息
		byte[] data = read(byteCode[0], byteCode[1]);
		// 填充16x16的矩阵
		for (int i = 0; i < dots; i++) {
			for (int j1 = 0; j1 < 2; j1++) {
				// 对每个字节进行解析
				byte tmp = data[i * 2 + j1];
				for (int j2 = 0; j2 < 8; j2++) {
					if (((tmp >> (7 - j2)) & 1) == 1) {
						matrix[i][j1 * 8 + j2] = true;
					} else {
						matrix[i][j1 * 8 + j2] = false;
					}
				}
			}
		}
		return matrix;
	}

	/**
	 * 从字库中找到这个汉字的字模信息
	 * @param areaCode 区码，对应编码的第一个字节
	 * @param posCode 位码，对应编码的第二个字节
	 * @return
	 */
	protected byte[] read(int areaCode, int posCode) {
		byte[] data = null;
		try {
			int area = areaCode - 0xa0;
			int pos = posCode - 0xa0;
			InputStream in = context.getResources().getAssets().open(dotMatrixFont);
			long offset = wordByteByDots * ((area - 1) * 94 + pos - 1);
			in.skip(offset);
			data = new byte[wordByteByDots];
			in.read(data, 0, wordByteByDots);
			in.close();
		} catch (Exception ex) {
		}
		return data;
	}

}

自定义参数文件attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name = "LedTextView">
        <attr name="textColor" format="color" />
        <attr name="spacing" format="dimension" />
        <attr name="scroll" format="boolean" />
        <attr name="speed" >
            <enum name="normal" value="0"></enum>
            <enum name="slow" value="1"></enum>
        </attr>
        <attr name="scrollDirection" >
            <enum name="left" value="0"></enum>
            <enum name="right" value="1"></enum>
        </attr>
    </declare-styleable>
</resources>

使用时需要将16*16的点阵字库放到assets文件夹中。

查看原文：http://qhyuang1992.com/index.php/2016/06/25/android_dian_zhen_ping_xiao_guo_de_kong_jian/