如何实现数字lcd显示效果(原创)

如题，我最先想到的是找一种字体，然后来显示lcd的效果，但是字体又无法满足有空位的时候那个暗灰色的文字的效果，如下所示

就是前三位那些灰色的888，因为你设置数值的时候只能是从0-9的数字，而这灰色的8你无法给他们设置，也没有这种文字，所以，

字体的方案被废弃了。于是我想到了google play上有好多hud的项目，他们说不定有人用这种方式显示，然后就找到了几个apk对

他们进行了反编译，结果发现他们内部都是从0-9的图片文件。然后通过自定义view实现了这种效果。

因此我就把它们的图片复制下来，放到自己的项目中。实现这个自定义view呢。首先我们需要一个布局文件，在一个线性布局中放入了6个imageview。

如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/eight217x324" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/eight217x324" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/eight217x324" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/eight217x324" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/eight217x324" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/eight217x324" />

</LinearLayout>

把它们的布局属性定义为填充父布局，然后横向的权重都为1.等比拉伸。

接下来写view

package com.example.customview01.view;

import com.example.customview01.R;

import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.support.v4.graphics.drawable.DrawableCompat;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class DigitalView extends LinearLayout {
    private ImageView imageView1, imageView2, imageView3, imageView4,
            imageView5, imageView6;
    private int[] images = { R.drawable.zero217x324, R.drawable.one217x324,
            R.drawable.two217x324, R.drawable.three217x324,
            R.drawable.four217x324, R.drawable.five217x324,
            R.drawable.six217x324, R.drawable.seven217x324,
            R.drawable.eight217x324, R.drawable.nine217x324,
            R.drawable.blank217x324 };
    private int six, five, four, three, two, one, numbers;
    private Drawable icon0, icon1, icon2, icon3, icon4, icon5, icon6, icon7,
            icon8, icon9, icon10;

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

    public DigitalView(Context context) {
        this(context, null);
    }

    public DigitalView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.digitalView, defStyleAttr, 0);
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = a.getIndex(i);
            switch (attr) {
            case R.styleable.digitalView_textNumbers:
                numbers = a.getInt(attr, 1);
                break;

            default:
                break;
            }
        }
        initView(context);
    }

    public void initView(Context context) {
        View view = View.inflate(getContext(), R.layout.digitalview, null);
        view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT));
        addView(view);
        imageView1 = (ImageView) findViewById(R.id.imageView1);
        imageView2 = (ImageView) findViewById(R.id.imageView2);
        imageView3 = (ImageView) findViewById(R.id.imageView3);
        imageView4 = (ImageView) findViewById(R.id.imageView4);
        imageView5 = (ImageView) findViewById(R.id.imageView5);
        imageView6 = (ImageView) findViewById(R.id.imageView6);
        icon0 = context.getResources().getDrawable(images[0]);
        icon1 = context.getResources().getDrawable(images[1]);
        icon2 = context.getResources().getDrawable(images[2]);
        icon3 = context.getResources().getDrawable(images[3]);
        icon4 = context.getResources().getDrawable(images[4]);
        icon5 = context.getResources().getDrawable(images[5]);
        icon6 = context.getResources().getDrawable(images[6]);
        icon7 = context.getResources().getDrawable(images[7]);
        icon8 = context.getResources().getDrawable(images[8]);
        icon9 = context.getResources().getDrawable(images[9]);
        icon10 = context.getResources().getDrawable(images[10]);
        setNumbers(numbers);
    }

    /**
     * <br/>
     * 概述：着色 <br/>
     * 
     * @param color
     */
    public void setColor(int color) {
        icon0 = tintDrawable(icon0, ColorStateList.valueOf(color));
        icon1 = tintDrawable(icon1, ColorStateList.valueOf(color));
        icon2 = tintDrawable(icon2, ColorStateList.valueOf(color));
        icon3 = tintDrawable(icon3, ColorStateList.valueOf(color));
        icon4 = tintDrawable(icon4, ColorStateList.valueOf(color));
        icon5 = tintDrawable(icon5, ColorStateList.valueOf(color));
        icon6 = tintDrawable(icon6, ColorStateList.valueOf(color));
        icon7 = tintDrawable(icon7, ColorStateList.valueOf(color));
        icon8 = tintDrawable(icon8, ColorStateList.valueOf(color));
        icon9 = tintDrawable(icon9, ColorStateList.valueOf(color));
    }

    /**
     * <br/>
     * 概述：设置位数 <br/>
     */
    public void setNumbers(int numbers) {
        this.numbers = numbers;
        switch (numbers) {
        case 1:
            imageView1.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.GONE);
            imageView3.setVisibility(View.GONE);
            imageView4.setVisibility(View.GONE);
            imageView5.setVisibility(View.GONE);
            imageView6.setVisibility(View.GONE);
            break;
        case 2:
            imageView1.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.VISIBLE);
            imageView3.setVisibility(View.GONE);
            imageView4.setVisibility(View.GONE);
            imageView5.setVisibility(View.GONE);
            imageView6.setVisibility(View.GONE);
            break;
        case 3:
            imageView1.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.VISIBLE);
            imageView3.setVisibility(View.VISIBLE);
            imageView4.setVisibility(View.GONE);
            imageView5.setVisibility(View.GONE);
            imageView6.setVisibility(View.GONE);
            break;
        case 4:
            imageView1.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.VISIBLE);
            imageView3.setVisibility(View.VISIBLE);
            imageView4.setVisibility(View.VISIBLE);
            imageView5.setVisibility(View.GONE);
            imageView6.setVisibility(View.GONE);
            break;
        case 5:
            imageView1.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.VISIBLE);
            imageView3.setVisibility(View.VISIBLE);
            imageView4.setVisibility(View.VISIBLE);
            imageView5.setVisibility(View.VISIBLE);
            imageView6.setVisibility(View.GONE);
            break;
        case 6:
            imageView1.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.VISIBLE);
            imageView3.setVisibility(View.VISIBLE);
            imageView4.setVisibility(View.VISIBLE);
            imageView5.setVisibility(View.VISIBLE);
            imageView6.setVisibility(View.VISIBLE);
            break;

        default:
            break;
        }
    }

    /**
     * <br/>
     * 概述：设置数值 <br/>
     */
    public void setValue(int value) {
        six = value % 1000000 / 100000;
        five = value % 100000 / 10000;
        four = value % 10000 / 1000;
        three = value % 1000 / 100;
        two = value % 100 / 10;
        one = value % 10;
        imageView1.setImageResource(images[one]);
        imageView2.setImageResource(images[two]);
        imageView3.setImageResource(images[three]);
        imageView4.setImageResource(images[four]);
        imageView5.setImageResource(images[five]);
        imageView6.setImageResource(images[six]);
        if (six == 0) {
            imageView6.setImageResource(images[10]);
            if (five == 0) {
                imageView5.setImageResource(images[10]);
                if (four == 0) {
                    imageView4.setImageResource(images[10]);
                    if (three == 0) {
                        imageView3.setImageResource(images[10]);
                        if (two == 0) {
                            imageView2.setImageResource(images[10]);
                        }
                    }
                }
            }
        }
    }

    /**
     * <br/>
     * 概述：给drawable着色 <br/>
     * 
     * @param drawable
     * @param colors
     * @return
     */
    public static Drawable tintDrawable(Drawable drawable, ColorStateList colors) {
        final Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
        DrawableCompat.setTintList(wrappedDrawable, colors);
        return wrappedDrawable;
    }
}

自定义的view实现了一些常用方法，例如设置位数，设置数值，设置颜色，有了源码，不用解释这些也很简单。设置颜色是使用了v4包中的着色的函数。目前还有些问题，改变颜色只改变变化了图像的颜色，猜测是设置图片的时候android使用了缓存。这个问题稍后再解决。

另外程序也支持了使用xml设置显示的位数，这个需要在res/values文件夹下加入以下xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="textNumbers" format="string" />

    <declare-styleable name="digitalView">
        <attr name="textNumbers" />
    </declare-styleable>

</resources>

然后使用的时候需要注意，在xml中加入

 xmlns:custom="http://schemas.android.com/apk/res/com.example.customview01" 

该段代码的意思是引入自定义属性

使用示例

<com.example.customview01.view.DigitalView
        android:id="@+id/digitalView"
        android:layout_width="200dp"
        android:layout_height="50dp"
        custom:textNumbers="6" >
    </com.example.customview01.view.DigitalView>

控制代码如下

package com.example.customview01;

import com.example.customview01.view.DigitalView;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;

public class MainActivity extends Activity implements OnClickListener {
    private DigitalView digitalView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        digitalView = (DigitalView) findViewById(R.id.digitalView);
        findViewById(R.id.button1).setOnClickListener(this);
        findViewById(R.id.button2).setOnClickListener(this);
        findViewById(R.id.button3).setOnClickListener(this);
        findViewById(R.id.button4).setOnClickListener(this);
        findViewById(R.id.button11).setOnClickListener(this);
        findViewById(R.id.button12).setOnClickListener(this);
        findViewById(R.id.button13).setOnClickListener(this);
        findViewById(R.id.button14).setOnClickListener(this);
        findViewById(R.id.button15).setOnClickListener(this);
        findViewById(R.id.button16).setOnClickListener(this);
        new Thread(new Runnable() {
            int value = 0;

            @Override
            public void run() {
                while (true) {
                    value++;
                    digitalView.post(new Runnable() {

                        @Override
                        public void run() {
                            digitalView.setValue(value);
                        }
                    });
                    try {
                        Thread.sleep(200);
                    } catch (InterruptedException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
                }

            }
        }).start();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.button1:
            digitalView.setColor(Color.BLUE);
            break;
        case R.id.button2:
            digitalView.setColor(Color.RED);
            break;
        case R.id.button3:
            digitalView.setColor(Color.WHITE);
            break;
        case R.id.button4:
            digitalView.setColor(Color.YELLOW);
            break;
        case R.id.button11:
            digitalView.setNumbers(1);
            break;
        case R.id.button12:
            digitalView.setNumbers(2);
            break;
        case R.id.button13:
            digitalView.setNumbers(3);
            break;
        case R.id.button14:
            digitalView.setNumbers(4);
            break;
        case R.id.button15:
            digitalView.setNumbers(5);
            break;
        case R.id.button16:
            digitalView.setNumbers(6);
            break;

        default:
            break;
        }
    }
}

代码已经上传到github，地址：https://github.com/dongweiq/study/tree/master/DigitalView

我的github地址：https://github.com/dongweiq/study

欢迎关注，欢迎star o(∩_∩)o 。有什么问题请邮箱联系 dongweiqmail@gmail.com qq714094450