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

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

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

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

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

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

如下

 1 xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="@android:color/black"
 6     android:orientation="horizontal" >
 7 
 8     <ImageView
 9         android:id="@+id/imageView6"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent"
12         android:layout_weight="1"
13         android:scaleType="fitXY"
14         android:src="@drawable/eight217x324" />
15 
16     <ImageView
17         android:id="@+id/imageView5"
18         android:layout_width="match_parent"
19         android:layout_height="match_parent"
20         android:layout_weight="1"
21         android:scaleType="fitXY"
22         android:src="@drawable/eight217x324" />
23 
24     <ImageView
25         android:id="@+id/imageView4"
26         android:layout_width="match_parent"
27         android:layout_height="match_parent"
28         android:layout_weight="1"
29         android:scaleType="fitXY"
30         android:src="@drawable/eight217x324" />
31 
32     <ImageView
33         android:id="@+id/imageView3"
34         android:layout_width="match_parent"
35         android:layout_height="match_parent"
36         android:layout_weight="1"
37         android:scaleType="fitXY"
38         android:src="@drawable/eight217x324" />
39 
40     <ImageView
41         android:id="@+id/imageView2"
42         android:layout_width="match_parent"
43         android:layout_height="match_parent"
44         android:layout_weight="1"
45         android:scaleType="fitXY"
46         android:src="@drawable/eight217x324" />
47 
48     <ImageView
49         android:id="@+id/imageView1"
50         android:layout_width="match_parent"
51         android:layout_height="match_parent"
52         android:layout_weight="1"
53         android:scaleType="fitXY"
54         android:src="@drawable/eight217x324" />
55 
56 LinearLayout>

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

接下来写view

  1 package com.example.customview01.view;
  2 
  3 import com.example.customview01.R;
  4 
  5 import android.content.Context;
  6 import android.content.res.ColorStateList;
  7 import android.content.res.TypedArray;
  8 import android.graphics.Color;
  9 import android.graphics.drawable.Drawable;
 10 import android.support.v4.graphics.drawable.DrawableCompat;
 11 import android.util.AttributeSet;
 12 import android.view.View;
 13 import android.widget.ImageView;
 14 import android.widget.LinearLayout;
 15 
 16 public class DigitalView extends LinearLayout {
 17     private ImageView imageView1, imageView2, imageView3, imageView4,
 18             imageView5, imageView6;
 19     private int[] images = { R.drawable.zero217x324, R.drawable.one217x324,
 20             R.drawable.two217x324, R.drawable.three217x324,
 21             R.drawable.four217x324, R.drawable.five217x324,
 22             R.drawable.six217x324, R.drawable.seven217x324,
 23             R.drawable.eight217x324, R.drawable.nine217x324,
 24             R.drawable.blank217x324 };
 25     private int six, five, four, three, two, one, numbers;
 26     private Drawable icon0, icon1, icon2, icon3, icon4, icon5, icon6, icon7,
 27             icon8, icon9, icon10;
 28 
 29     public DigitalView(Context context, AttributeSet attrs) {
 30         this(context, attrs, 0);
 31     }
 32 
 33     public DigitalView(Context context) {
 34         this(context, null);
 35     }
 36 
 37     public DigitalView(Context context, AttributeSet attrs, int defStyleAttr) {
 38         super(context, attrs, defStyleAttr);
 39         TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
 40                 R.styleable.digitalView, defStyleAttr, 0);
 41         int n = a.getIndexCount();
 42         for (int i = 0; i < n; i++) {
 43             int attr = a.getIndex(i);
 44             switch (attr) {
 45             case R.styleable.digitalView_textNumbers:
 46                 numbers = a.getInt(attr, 1);
 47                 break;
 48 
 49             default:
 50                 break;
 51             }
 52         }
 53         initView(context);
 54     }
 55 
 56     public void initView(Context context) {
 57         View view = View.inflate(getContext(), R.layout.digitalview, null);
 58         view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
 59                 LayoutParams.MATCH_PARENT));
 60         addView(view);
 61         imageView1 = (ImageView) findViewById(R.id.imageView1);
 62         imageView2 = (ImageView) findViewById(R.id.imageView2);
 63         imageView3 = (ImageView) findViewById(R.id.imageView3);
 64         imageView4 = (ImageView) findViewById(R.id.imageView4);
 65         imageView5 = (ImageView) findViewById(R.id.imageView5);
 66         imageView6 = (ImageView) findViewById(R.id.imageView6);
 67         icon0 = context.getResources().getDrawable(images[0]);
 68         icon1 = context.getResources().getDrawable(images[1]);
 69         icon2 = context.getResources().getDrawable(images[2]);
 70         icon3 = context.getResources().getDrawable(images[3]);
 71         icon4 = context.getResources().getDrawable(images[4]);
 72         icon5 = context.getResources().getDrawable(images[5]);
 73         icon6 = context.getResources().getDrawable(images[6]);
 74         icon7 = context.getResources().getDrawable(images[7]);
 75         icon8 = context.getResources().getDrawable(images[8]);
 76         icon9 = context.getResources().getDrawable(images[9]);
 77         icon10 = context.getResources().getDrawable(images[10]);
 78         setNumbers(numbers);
 79     }
 80 
 81     /**
 82      * 

 83      * 概述：着色 

 84      * 
 85      * @param color
 86      */
 87     public void setColor(int color) {
 88         icon0 = tintDrawable(icon0, ColorStateList.valueOf(color));
 89         icon1 = tintDrawable(icon1, ColorStateList.valueOf(color));
 90         icon2 = tintDrawable(icon2, ColorStateList.valueOf(color));
 91         icon3 = tintDrawable(icon3, ColorStateList.valueOf(color));
 92         icon4 = tintDrawable(icon4, ColorStateList.valueOf(color));
 93         icon5 = tintDrawable(icon5, ColorStateList.valueOf(color));
 94         icon6 = tintDrawable(icon6, ColorStateList.valueOf(color));
 95         icon7 = tintDrawable(icon7, ColorStateList.valueOf(color));
 96         icon8 = tintDrawable(icon8, ColorStateList.valueOf(color));
 97         icon9 = tintDrawable(icon9, ColorStateList.valueOf(color));
 98     }
 99 
100     /**
101      * 

102      * 概述：设置位数 

103      */
104     public void setNumbers(int numbers) {
105         this.numbers = numbers;
106         switch (numbers) {
107         case 1:
108             imageView1.setVisibility(View.VISIBLE);
109             imageView2.setVisibility(View.GONE);
110             imageView3.setVisibility(View.GONE);
111             imageView4.setVisibility(View.GONE);
112             imageView5.setVisibility(View.GONE);
113             imageView6.setVisibility(View.GONE);
114             break;
115         case 2:
116             imageView1.setVisibility(View.VISIBLE);
117             imageView2.setVisibility(View.VISIBLE);
118             imageView3.setVisibility(View.GONE);
119             imageView4.setVisibility(View.GONE);
120             imageView5.setVisibility(View.GONE);
121             imageView6.setVisibility(View.GONE);
122             break;
123         case 3:
124             imageView1.setVisibility(View.VISIBLE);
125             imageView2.setVisibility(View.VISIBLE);
126             imageView3.setVisibility(View.VISIBLE);
127             imageView4.setVisibility(View.GONE);
128             imageView5.setVisibility(View.GONE);
129             imageView6.setVisibility(View.GONE);
130             break;
131         case 4:
132             imageView1.setVisibility(View.VISIBLE);
133             imageView2.setVisibility(View.VISIBLE);
134             imageView3.setVisibility(View.VISIBLE);
135             imageView4.setVisibility(View.VISIBLE);
136             imageView5.setVisibility(View.GONE);
137             imageView6.setVisibility(View.GONE);
138             break;
139         case 5:
140             imageView1.setVisibility(View.VISIBLE);
141             imageView2.setVisibility(View.VISIBLE);
142             imageView3.setVisibility(View.VISIBLE);
143             imageView4.setVisibility(View.VISIBLE);
144             imageView5.setVisibility(View.VISIBLE);
145             imageView6.setVisibility(View.GONE);
146             break;
147         case 6:
148             imageView1.setVisibility(View.VISIBLE);
149             imageView2.setVisibility(View.VISIBLE);
150             imageView3.setVisibility(View.VISIBLE);
151             imageView4.setVisibility(View.VISIBLE);
152             imageView5.setVisibility(View.VISIBLE);
153             imageView6.setVisibility(View.VISIBLE);
154             break;
155 
156         default:
157             break;
158         }
159     }
160 
161     /**
162      * 

163      * 概述：设置数值 

164      */
165     public void setValue(int value) {
166         six = value % 1000000 / 100000;
167         five = value % 100000 / 10000;
168         four = value % 10000 / 1000;
169         three = value % 1000 / 100;
170         two = value % 100 / 10;
171         one = value % 10;
172         imageView1.setImageResource(images[one]);
173         imageView2.setImageResource(images[two]);
174         imageView3.setImageResource(images[three]);
175         imageView4.setImageResource(images[four]);
176         imageView5.setImageResource(images[five]);
177         imageView6.setImageResource(images[six]);
178         if (six == 0) {
179             imageView6.setImageResource(images[10]);
180             if (five == 0) {
181                 imageView5.setImageResource(images[10]);
182                 if (four == 0) {
183                     imageView4.setImageResource(images[10]);
184                     if (three == 0) {
185                         imageView3.setImageResource(images[10]);
186                         if (two == 0) {
187                             imageView2.setImageResource(images[10]);
188                         }
189                     }
190                 }
191             }
192         }
193     }
194 
195     /**
196      * 

197      * 概述：给drawable着色 

198      * 
199      * @param drawable
200      * @param colors
201      * @return
202      */
203     public static Drawable tintDrawable(Drawable drawable, ColorStateList colors) {
204         final Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
205         DrawableCompat.setTintList(wrappedDrawable, colors);
206         return wrappedDrawable;
207     }
208 }

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

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

 1 xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3 
 4     <attr name="textNumbers" format="string" />
 5 
 6     <declare-styleable name="digitalView">
 7         <attr name="textNumbers" />
 8     declare-styleable>
 9 
10 resources>

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

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

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

使用示例

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

控制代码如下

 1 package com.example.customview01;
 2 
 3 import com.example.customview01.view.DigitalView;
 4 
 5 import android.os.Bundle;
 6 import android.app.Activity;
 7 import android.graphics.Color;
 8 import android.view.Menu;
 9 import android.view.View;
10 import android.view.View.OnClickListener;
11 
12 public class MainActivity extends Activity implements OnClickListener {
13     private DigitalView digitalView;
14 
15     @Override
16     protected void onCreate(Bundle savedInstanceState) {
17         super.onCreate(savedInstanceState);
18         setContentView(R.layout.activity_main);
19         digitalView = (DigitalView) findViewById(R.id.digitalView);
20         findViewById(R.id.button1).setOnClickListener(this);
21         findViewById(R.id.button2).setOnClickListener(this);
22         findViewById(R.id.button3).setOnClickListener(this);
23         findViewById(R.id.button4).setOnClickListener(this);
24         findViewById(R.id.button11).setOnClickListener(this);
25         findViewById(R.id.button12).setOnClickListener(this);
26         findViewById(R.id.button13).setOnClickListener(this);
27         findViewById(R.id.button14).setOnClickListener(this);
28         findViewById(R.id.button15).setOnClickListener(this);
29         findViewById(R.id.button16).setOnClickListener(this);
30         new Thread(new Runnable() {
31             int value = 0;
32 
33             @Override
34             public void run() {
35                 while (true) {
36                     value++;
37                     digitalView.post(new Runnable() {
38 
39                         @Override
40                         public void run() {
41                             digitalView.setValue(value);
42                         }
43                     });
44                     try {
45                         Thread.sleep(200);
46                     } catch (InterruptedException e) {
47                         // TODO Auto-generated catch block
48                         e.printStackTrace();
49                     }
50                 }
51 
52             }
53         }).start();
54     }
55 
56     @Override
57     public void onClick(View v) {
58         switch (v.getId()) {
59         case R.id.button1:
60             digitalView.setColor(Color.BLUE);
61             break;
62         case R.id.button2:
63             digitalView.setColor(Color.RED);
64             break;
65         case R.id.button3:
66             digitalView.setColor(Color.WHITE);
67             break;
68         case R.id.button4:
69             digitalView.setColor(Color.YELLOW);
70             break;
71         case R.id.button11:
72             digitalView.setNumbers(1);
73             break;
74         case R.id.button12:
75             digitalView.setNumbers(2);
76             break;
77         case R.id.button13:
78             digitalView.setNumbers(3);
79             break;
80         case R.id.button14:
81             digitalView.setNumbers(4);
82             break;
83         case R.id.button15:
84             digitalView.setNumbers(5);
85             break;
86         case R.id.button16:
87             digitalView.setNumbers(6);
88             break;
89 
90         default:
91             break;
92         }
93     }
94 }

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

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

欢迎关注，欢迎star o(∩_∩)o 。有什么问题请邮箱联系 [email protected] qq714094450