自定义组件之【柱状图】详解 已封装成View

http://www.eoeandroid.com/thread-83414-1-1.html

先上图，里面的数据时伪数据，用的时候传入参数即可。柱状图会根据数值的大小来变换显示的颜色，比如绿色、土黄色和红色。柱状图升高采用了类似于动画效果，可以在创建时设置是否启动动画效果。这个柱状图实现很简单，已经封装成一个view，大家可以直接使用，有什么问题和意见欢迎大家指教。

 
上代码了：（命名不是很规范，E文不行，请见谅）
ConfigurationView   柱状图组件

1. package org.gmy.view.config;
   
2. 
   
3. import android.content.Context;
   
4. import android.graphics.Canvas;
   
5. import android.graphics.Paint;
   
6. import android.os.Handler;
   
7. import android.os.Message;
   
8. import android.view.View;
   
9. import android.widget.TextView;
   
10. 
    
11. public class ConfigurationView extends View {
    
12. 
    
13. private Paint paint;
    
14. private Paint font_Paint;
    
15. // 数值显示的偏移量
    
16. private int numWidth = 9;
    
17. 
    
18. // 起始高度为 最大高度减去 80 【注意这里的高度是反的，也就是说，y轴是逐渐减少的】
    
19. private float startHeight = Configuration.HEIGHT-80;
    
20. private float endHeight = startHeight;
    
21. // 柱状图的宽度
    
22. private int viewWidth = 20;
    
23. 
    
24. // 组态图的高度 【显示的数值，100 为 100%】
    
25. private int maxSize = 43;
    
26. private int indexSize = 0;
    
27. // 要显示的模式 【类型，比如：℃和百分比等】
    
28. private String displayMode = "%";
    
29. // 模式
    
30. private boolean mode = false;
    
31. // 线程控制
    
32. private boolean display = true;
    
33. // 是否开启动画效果
    
34. private boolean animMode = true;
    
35. 
    
36. /**
    
37. * 
    
38. * @param context
    
39. * @param maxSize 需要显示的数值
    
40. * @param displayMode 显示的类型
    
41. */
    
42. public ConfigurationView(Context context, int maxSize, String displayMode) {
    
43. super(context);
    
44. this.maxSize = maxSize;
    
45. this.displayMode = displayMode;
    
46. init();
    
47. }
    
48. 
    
49. /**
    
50. * 
    
51. * @param context
    
52. * @param maxSize 需要显示的数值
    
53. * @param displayMode 显示的类型
    
54. * @param mode 显示的模式，默认为false，数值越高，颜色越偏向红色。为true反之
    
55. */
    
56. public ConfigurationView(Context context, int maxSize, String displayMode, boolean mode) {
    
57. super(context);
    
58. this.maxSize = maxSize;
    
59. this.displayMode = displayMode;
    
60. this.mode = mode;
    
61. init();
    
62. }
    
63. 
    
64. /**
    
65. * 
    
66. * @param context
    
67. * @param maxSize 需要显示的数值
    
68. * @param displayMode 显示的类型
    
69. * @param mode 显示的模式，默认为false，数值越高，颜色越偏向红色。为true反之
    
70. * @param animMode 是否显示动画加载效果，默认为true
    
71. */
    
72. public ConfigurationView(Context context, int maxSize, String displayMode, boolean mode, boolean animMode) {
    
73. super(context);
    
74. this.maxSize = maxSize;
    
75. this.displayMode = displayMode;
    
76. this.mode = mode;
    
77. this.animMode = animMode;
    
78. init();
    
79. }
    
80. 
    
81. // 绘制界面
    
82. @Override
    
83. protected void onDraw(Canvas canvas) {
    
84. super.onDraw(canvas);
    
85. canvas.drawRect(10, endHeight, 10+viewWidth, startHeight, paint);
    
86. if(!display){
    
87. // 这段if语句可以放在初始化中，这个就交给大家吧。
    
88. if(!mode && indexSize >= 50){
    
89. paint.setARGB(255, 200, 200, 60);
    
90. if(!mode && indexSize >= 80){
    
91. paint.setARGB(255, (indexSize<100)?(110+indexSize+45):255, (indexSize<100)?210-(indexSize+45):0, 20);
    
92. }
    
93. }else if(mode && indexSize <= 50){
    
94. paint.setARGB(255, 200, 200, 60);
    
95. if(mode && indexSize <= 30){
    
96. paint.setARGB(255, 255-indexSize, indexSize, 20);
    
97. }
    
98. }
    
99. canvas.drawRect(10, endHeight, 10+viewWidth, startHeight, paint);
    
100. paint.setARGB(255, 99, 66, 0);
     
101. canvas.drawText(""+indexSize, numWidth, endHeight-5, paint);
     
102. paint.setARGB(255, 110, 210, 60);
     
103. }
     
104. canvas.drawText(displayMode, 0, startHeight+15, font_Paint);
     
105. }
     
106. 
     
107. // 初始化
     
108. private void init(){
     
109. // 数值初始化
     
110. paint = new Paint();
     
111. paint.setARGB(255, 110, 210, 20);
     
112. font_Paint = new Paint();
     
113. font_Paint.setARGB(255, 66, 66, 66);
     
114. 
     
115. // 设置顶端数值显示的偏移量，数值越小，偏移量越大
     
116. numWidth = 9;
     
117. if(maxSize < 10){
     
118. numWidth = 15;
     
119. }else if(maxSize < 100){
     
120. numWidth = 12;
     
121. }
     
122. 
     
123. if(animMode){
     
124. // 启动一个线程来实现柱状图缓慢增高
     
125. thread.start();
     
126. }else{
     
127. // 不启用动画效果，则直接赋值进行绘制
     
128. display = false;
     
129. indexSize = maxSize;
     
130. endHeight = startHeight-(float) (maxSize*1.5);
     
131. invalidate();
     
132. }
     
133. }
     
134. 
     
135. private Handler handler = new Handler(){
     
136. @Override
     
137. public void handleMessage(Message msg) {
     
138. super.handleMessage(msg);
     
139. // 通过endHeight >= 20将柱状图的高度控制在150以内，这样刚好循环一百次到顶部
     
140. if(msg.what == 1 && indexSize < maxSize && endHeight >= 20){
     
141. endHeight -= 1.5;
     
142. indexSize += 1;
     
143. }else{
     
144. display = false;
     
145. }
     
146. invalidate();
     
147. }
     
148. };
     
149. 
     
150. 
     
151. private Thread thread = new Thread(){
     
152. @Override
     
153. public void run(){
     
154. while(!Thread.currentThread().isInterrupted() && display )
     
155. {
     
156. Message msg = new Message();
     
157. msg.what = 1;
     
158. handler.sendMessage(msg);
     
159. try {
     
160. // 每隔15毫秒触发，尽量使升高的效果看起来平滑
     
161. Thread.sleep(15);
     
162. } catch (InterruptedException e) {
     
163. System.err.println("InterruptedException！线程关闭");
     
164. this.interrupt();
     
165. }
     
166. }
     
167. }
     
168. };
     
169. 
     
170. }

复制代码

Configuration 类
一个普通的activity，创建了五个柱状图用于测试。第一个view = new ConfigurationView(this, 100, "温度/℃", false, false);没有使用动画效果。

1. package org.gmy.view.config;
   
2. 
   
3. import org.gmy.view.R;
   
4. 
   
5. import android.app.Activity;
   
6. import android.os.Bundle;
   
7. import android.view.Gravity;
   
8. import android.view.ViewGroup.LayoutParams;
   
9. import android.widget.EditText;
   
10. import android.widget.LinearLayout;
    
11. import android.widget.TableRow;
    
12. 
    
13. public class Configuration extends Activity {
    
14. 
    
15. public static final int WIDTH = 280;
    
16. public static final int HEIGHT = 250;
    
17. 
    
18. private ConfigurationView view, view1, view2, view3, view4;
    
19. private LinearLayout layout;
    
20. 
    
21. @Override
    
22. protected void onCreate(Bundle savedInstanceState) {
    
23. super.onCreate(savedInstanceState);
    
24. setContentView(R.layout.config_dialog);
    
25. layout = (LinearLayout) findViewById(R.id.configLayout);
    
26. 
    
27. view = new ConfigurationView(this, 100, "温度/℃", false, false);
    
28. layout.addView(view, new LayoutParams(50, LayoutParams.FILL_PARENT));
    
29. 
    
30. view1 = new ConfigurationView(this, 100, "电量/%", true);
    
31. layout.addView(view1, new LayoutParams(50, LayoutParams.FILL_PARENT));
    
32. 
    
33. view2 = new ConfigurationView(this, 80, "电量/%", true);
    
34. layout.addView(view2, new LayoutParams(50, LayoutParams.FILL_PARENT));
    
35. 
    
36. view3 = new ConfigurationView(this, 40, "电量/%", true);
    
37. layout.addView(view3, new LayoutParams(50, LayoutParams.FILL_PARENT));
    
38. 
    
39. view4 = new ConfigurationView(this, 2, "电量/%", true);
    
40. layout.addView(view4, new LayoutParams(50, LayoutParams.FILL_PARENT));
    
41. }
    
42. 
    
43. }

复制代码

config_dialog.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout
   
3. xmlns:android="http://schemas.android.com/apk/res/android"
   
4. android:orientation="vertical"
   
5. android:layout_width="280dip"
   
6. android:layout_height="250dip"
   
7. android:padding="10dip"
   
8. android:layout_gravity="center_horizontal"
   
9. android:background="@drawable/dialog_alert_bg2" 
   
10. >
    
11. <TextView
    
12. android:id="@+id/configTitle"
    
13. android:layout_width="fill_parent"
    
14. android:layout_height="wrap_content"
    
15. android:gravity="center_horizontal"
    
16. android:text="柱状图"
    
17. android:textSize="18dip"
    
18. android:textColor="#fdb814"
    
19. />
    
20. <LinearLayout
    
21. android:orientation="horizontal"
    
22. android:id="@+id/configLayout"
    
23. android:layout_width="260dip"
    
24. android:layout_height="220dip"
    
25. >
    
26. 
    
27. </LinearLayout>
    
28. </LinearLayout>

复制代码

AndroidManifest.xml  使用了对话框的主题

1. <activity android:name=".Configuration" android:label="@string/app_name" android:theme="@android:style/Theme.Dialog" >
   
2. <intent-filter>
   
3. <action android:name="android.intent.action.MAIN" />
   
4. <category android:name="android.intent.category.LAUNCHER" />
   
5. </intent-filter>
   
6. </activity>

复制代码

有问题的随时问我，代码已给出，demo已经上传，欢迎提意见，觉得不错请顶下，3Q
背景图片：
 

  Configuration.rar (36.5 KB, 下载次数: 134)