从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等参数中传递正确即可。数据上主要是通过设定了很多对应的数组（维度点、刻度值、区域等）。具体代码如下： 1 public class LifeWh

4、eelRadarGraph extends View 2 private int count = 8; 3 private float angle = 360/count; 4 private int point_radius = 5; /画点的半径 5 private int regionwidth = 40; /选择分值小区域宽度 6 private int valueRulingCount = 5; /画等分值线 7 private int radius; 8 private int centerX; 9 private int centerY; 10 private String ti

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

6、/各维度分值 17 private int maxValue = 10; 18 private Point value_pts; /维度端点 19 private Paint paint; 20 private Paint valuePaint; 21 22 public float getValues() 23 return values; 24 25 26 public void setValues(float values) 27 Assert.assertTrue("传递的values数组大小不是"+count, values.length = count); 28

7、 this.values = values; 29 30 31 public LifeWheelRadarGraph(Context context) 32 super(context); 33 init(); 34 35 36 private void init() 37 paint = new Paint(); 38 valuePaint = new Paint(); 39 pts = new Pointcount; 40 value_pts = new Pointcount; 41 valuePath = new Path(); 42 for(int i=0; i<count; i

8、+) 43 ptsi = new Point(); 44 value_ptsi = new Point(); 45 46 47 regionValues = new floatcount*valueRulingCount*2; 48 regions = new Regioncount*valueRulingCount*2; 49 for(int i=0; i<regions.length; i+) 50 regionsi = new Region(); 51 52 53 54 55 public LifeWheelRadarGraph(Context context, Attribute

9、Set attrs) 56 super(context, attrs); 57 init(); 58 59 60 public LifeWheelRadarGraph(Context context, AttributeSet attrs, int defStyle) 61 super(context, attrs, defStyle); 62 init(); 63 64 65 Override 66 protected void onSizeChanged(int w, int h, int oldw, int oldh) 67 radius = Math.min(h, w)/2 - 40;

10、 68 centerX = w/2; 69 centerY = h/2; 70 71 for(int i=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 76 for(int j=1; j<=valueRulingCount*2; j+) 77 78 int x = centerX + (ptsi.x-centerX)/(

11、valueRulingCount*2)*j; 79 int y = centerY + (ptsi.y-centerY)/(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(); 85 super.onSizeChanged(w, h, oldw,

12、oldh); 86 87 88 Override 89 public boolean onTouchEvent(MotionEvent event) 90 int action = event.getAction(); 91 float x = event.getX(); 92 float y = event.getY(); 93 94 switch(event.getAction() 95 96 case MotionEvent.ACTION_DOWN: 97 for(int i = 0; i<regions.length; i+) 98 99 if (regionsi.contain

13、s(int)x, (int)y)100 101 values(int)(i/(valueRulingCount*2) = regionValuesi;102 break;103 104 105 invalidate();106 break;107 case MotionEvent.ACTION_MOVE:108 109 break;110 case MotionEvent.ACTION_UP:111 112 break;113 114 return super.onTouchEvent(event); 115 116 117 118 Override119 public boolean onK

14、eyLongPress(int keyCode, KeyEvent event) 120 / TODO Auto-generated method stub121 return super.onKeyLongPress(keyCode, event);122 123 124 Override125 protected void onDraw(Canvas canvas) 126 /* 设置画布的颜色 */127 canvas.drawColor(Color.WHITE);128 129 paint.setAntiAlias(true);130 /画边框线131 paint.setColor(C

15、olor.GRAY); 132 paint.setStyle(Paint.Style.FILL_AND_STROKE);133 for(int i=0; i<count; i+)134 135 int end = i+1 = count? 0:i+1;136 137 for(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, cen

16、terY+(ptsend.y-centerY)/5*j, paint);141 142 143 canvas.drawLine(centerX, centerY, ptsi.x, ptsi.y, paint); 144 145 146 /写文字147 paint.setTextSize(20);148 paint.setColor(Color.BLACK);149 FontMetrics fontMetrics = paint.getFontMetrics();150 float fontHegiht = -fontMetrics.ascent;151 for(int i=0; i<co

17、unt; i+)152 153 if (angle * i = 90.0) | (angle * i = 270.0)154 paint.setTextAlign(Align.CENTER);155 else if (angle * i < 90) | (angle * i > 270)156 paint.setTextAlign(Align.LEFT);157 else if (angle * i > 90) | (angle * i < 270)158 paint.setTextAlign(Align.RIGHT);159 160 if (angle * i = 2

18、70.0)161 canvas.drawText(titlesi, ptsi.x, ptsi.y+fontHegiht, paint);162 else163 canvas.drawText(titlesi, ptsi.x, ptsi.y, paint);164 165 166 /画方向盘分值区域167 for(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-

19、centerY) * valuesi/maxValue);171 172 173 valuePath.reset();174 valuePaint.setAntiAlias(true);175 valuePaint.setColor(Color.BLUE); 176 valuePaint.setStyle(Paint.Style.FILL_AND_STROKE); 177 for(int i = 0; i< pts.length; i+)178 179 /给valuePath赋值180 if (i = 0)181 valuePath.moveTo(value_ptsi.x, value_

20、ptsi.y);182 else183 valuePath.lineTo(value_ptsi.x, value_ptsi.y);184 /画取分圆圈185 canvas.drawCircle(value_ptsi.x, value_ptsi.y, point_radius, paint);186 187 valuePaint.setAlpha(150); 188 canvas.drawPath(valuePath, valuePaint);189 190 保存方向盘分值最后我们还要保存分值，这里使用了简单的SharedPreferencespublic class AgileMeActivi

21、ty extends Activity private LifeWheelRadarGraph graph = null; private SharedPreferences settings; /* Called when the activity is first created. */ Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); graph = (LifeWheelRadarGraph)findViewById(R.id.lifeWheelRadarGraph1); / Restore prefe