如何实现数字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