从0开始在Android下开发生活方向盘应用（自绘雷达图）

1、在30天敏捷生活（1）：意识你的生活方向盘、敏捷个人：你有自己的生活方向盘吗？中提到生活方向盘是敏捷个人的一个重要工具，之前发不过图片和Excel格式的方向盘工具。但现在是移动时代，所以利用空闲时间也编写了一个Android应用，效果图如下。这是我在Android下开发的第一个应用，所以本篇将介绍一下如何从0开始在Android开发这个应用。下载SDK 我是在windows下开发，所以下载了installer_r18-windows.exe安装SDK运行上一步下载的installer_r18-windows.exe，然后运行SDK Manager下载你需要版本的SDK。2.3的是常用的 ，我手

2、机是2.2的，所以我还下载了一个2.2版本的。安装ADT Plugin for Eclipse在下载，具体如何使用Eclipse这里就不说了 以上把开发环境都准备好了，现在开始新建一个项目，取名AgileMe。Android的基本概念和常识这里也不介绍了，大家网上可以找到很多。在开始之前，简单介绍一下方向盘应用的需求。需求方向盘分为8个维度，每个维度采用10分制打分，每个维度的分值区域是我们生活的饱满度。程序初始化后，我们可以通过直接在各维度点击来设定维度的分值，系统自动重绘方向盘图形。当然，支持数据保存是必要地：）思路之前找过有没有直接的雷达图控件，发现还没有发现好用的。因为绘制这

3、个图也简单，所以干脆自己操刀从头开始。这个图元也少，所以可以不必像工作中那样关注性能。1. 绘制静态的雷达格线 2. 绘制文字：这里需要按照角度来设定文字的对齐方式，否则左边的文字可能就要压线了 3. 绘制分值点 4. 对分值区域进行着色绘制 5. 为了能够响应点击操作，对每一个分值刻度周围都条件一个小矩形Region，这样可以响应onTouch事件来判断打几分 代码也不复杂，主要就是根据想绘制的点进行计算，然后再drawText、drawLine等参数中传递正确即可。数据上主要是通过设定了很多对应的数组（维度点、刻度值、区域等）。具体代码如下： 1publicclass LifeWheelR

4、adarGraph extends View 2privateint count = 8; 3privatefloat angle = 360/count; 4privateint point_radius = 5; /画点的半径 5privateint regionwidth = 40; /选择分值小区域宽度 6privateint valueRulingCount = 5; /画等分值线 7privateint radius; 8privateint centerX; 9privateint centerY; 10private String titles = "工作"

5、,"财富","健康","娱乐","家庭","社交","精神","贡献" 11 12private Point pts; /维度端点 13private Region regions; /打分点区域 14privatefloat regionValues; /打分点分数 15private Path valuePath; 16privatefloat values = 8,6,8,6,6,6,4,5; /各维度分值 17privateint maxValue

6、 = 10; 18private Point value_pts; /维度端点 19private Paint paint; 20private Paint valuePaint; 21 22publicfloat getValues() 23return values; 24 25 26publicvoid setValues(float values) 27 Assert.assertTrue("传递的values数组大小不是"+count, values.length = count); 28this.values = values; 29 30 31public L

7、ifeWheelRadarGraph(Context context) 32super(context); 33 init(); 34 35 36privatevoid init() 37 paint = new Paint(); 38 valuePaint = new Paint(); 39 pts = new Pointcount; 40 value_pts = new Pointcount; 41 valuePath = new Path(); 42for(int i=0; i<count; i+) 43 ptsi = new Point(); 44 value_ptsi = ne

8、w Point(); 45 46 47 regionValues = newfloatcount*valueRulingCount*2; 48 regions = new Regioncount*valueRulingCount*2; 49for(int i=0; i<regions.length; i+) 50 regionsi = new Region(); 51 52 53 54 55public LifeWheelRadarGraph(Context context, AttributeSet attrs) 56super(context, attrs); 57 init();

9、58 59 60public LifeWheelRadarGraph(Context context, AttributeSet attrs, int defStyle) 61super(context, attrs, defStyle); 62 init(); 63 64 65 Override 66protectedvoid onSizeChanged(int w, int h, int oldw, int oldh) 67 radius = Math.min(h, w)/2 - 40; 68 centerX = w/2; 69 centerY = h/2; 70 71for(int i=

10、0; i<count; i+) 72 73 ptsi.x = centerX+(int)(radius*Math.cos(Math.toRadians(angle*i); 74 ptsi.y = centerY-(int)(radius*Math.sin(Math.toRadians(angle*i); 75 76for(int j=1; j<=valueRulingCount*2; j+) 77 78int x = centerX + (ptsi.x-centerX)/(valueRulingCount*2)*j; 79int y = centerY + (ptsi.y-cent

11、erY)/(valueRulingCount*2)*j; 80 regionsi*valueRulingCount*2+j-1.set(x-regionwidth/2, y-regionwidth/2, x+regionwidth/2, y+regionwidth/2); 81 regionValuesi*valueRulingCount*2+j-1 = j; 82 83 84 postInvalidate(); 85super.onSizeChanged(w, h, oldw, oldh); 86 87 88 Override 89publicboolean onTouchEvent(Mot

12、ionEvent event) 90int action = event.getAction(); 91float x = event.getX(); 92float y = event.getY(); 93 94switch(event.getAction() 95 96case MotionEvent.ACTION_DOWN: 97for(int i = 0; i<regions.length; i+) 98 99if (regionsi.contains(int)x, (int)y)100 101 values(int)(i/(valueRulingCount*2) = regio

13、nValuesi;102break;103 104 105 invalidate();106break;107case MotionEvent.ACTION_MOVE:108109break;110case MotionEvent.ACTION_UP:111112break;113 114returnsuper.onTouchEvent(event); 115 116117118 Override119publicboolean onKeyLongPress(int keyCode, KeyEvent event) 120/ TODO Auto-generated method stub121

14、returnsuper.onKeyLongPress(keyCode, event);122 123124 Override125protectedvoid onDraw(Canvas canvas) 126/* 设置画布的颜色 */127 canvas.drawColor(Color.WHITE);128129 paint.setAntiAlias(true);130/画边框线131 paint.setColor(Color.GRAY); 132 paint.setStyle(Paint.Style.FILL_AND_STROKE);133for(int i=0; i<count; i

15、+)134 135int end = i+1 = count? 0:i+1;136137for(int j=1; j<=valueRulingCount; j+)138 139 canvas.drawLine(centerX+(ptsi.x-centerX)/5*j, centerY+(ptsi.y-centerY)/5*j, 140 centerX+(ptsend.x-centerX)/5*j, centerY+(ptsend.y-centerY)/5*j, paint);141 142143 canvas.drawLine(centerX, centerY, ptsi.x, ptsi

16、.y, paint); 144 145146/写文字147 paint.setTextSize(20);148 paint.setColor(Color.BLACK);149 FontMetrics fontMetrics = paint.getFontMetrics();150float fontHegiht = -fontMetrics.ascent;151for(int i=0; i<count; i+)152 153if (angle * i = 90.0) | (angle * i = 270.0)154 paint.setTextAlign(Align.CENTER);155

17、elseif (angle * i < 90) | (angle * i > 270)156 paint.setTextAlign(Align.LEFT);157elseif (angle * i > 90) | (angle * i < 270)158 paint.setTextAlign(Align.RIGHT);159160if (angle * i = 270.0)161 canvas.drawText(titlesi, ptsi.x, ptsi.y+fontHegiht, paint);162else163 canvas.drawText(titlesi, p

18、tsi.x, ptsi.y, paint);164 165166/画方向盘分值区域167for(int i=0; i<count; i+)168 169 value_ptsi.x = (int)(centerX + (ptsi.x-centerX) * valuesi/maxValue);170 value_ptsi.y = (int)(centerY + (ptsi.y-centerY) * valuesi/maxValue);171 172173 valuePath.reset();174 valuePaint.setAntiAlias(true);175 valuePaint.se

19、tColor(Color.BLUE); 176 valuePaint.setStyle(Paint.Style.FILL_AND_STROKE); 177for(int i = 0; i< pts.length; i+)178 179/给valuePath赋值180if (i = 0)181 valuePath.moveTo(value_ptsi.x, value_ptsi.y);182else183 valuePath.lineTo(value_ptsi.x, value_ptsi.y);184/画取分圆圈185 canvas.drawCircle(value_ptsi.x, valu

20、e_ptsi.y, point_radius, paint);186 187 valuePaint.setAlpha(150); 188 canvas.drawPath(valuePath, valuePaint);189 190 保存方向盘分值最后我们还要保存分值，这里使用了简单的SharedPreferencespublicclass AgileMeActivity extends Activity private LifeWheelRadarGraph graph = null;private SharedPreferences settings;/* Called when the activity is first created. */ Overridepublicvoid onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); graph = (LifeWheelRadarGraph)findViewById(R.id.lifeWheelRadarGraph1);/ Restore preferences