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

在 30 天敏捷生活（1）：意识你的生活方向盘、敏捷个人：你有自己的生活方向盘吗？中提到生活方向盘是敏捷个人的一个重要工具，之前发不过图片和 Excel 格式的方向盘工具。但现在是移动时代， 所以利用空闲时间也编写了一个 Android 应用，效果图如下。这是我在 Android 下开发的第一个应用，所以本篇将介绍一下如何从 0开始在 Android 开发这个应用。下载 SDK /sdk/index.html我是在 windows 下开发，所以下载了 installer_r18-windows.exe安装 SDK运行上一步下载的 installer_r18-windows.exe，然后运行 SDK Manager 下载你需要版本的SDK。2.3 的是常用的 ， 我手机是 2.2 的，所以我还下载了一个2.2 版本的。安装 ADT Plugin for Eclipse在 /android/eclipse/下载，具体如何使用Eclipse 这里就不说了以上把开发环境都准备好了，现在开始新建一个项目，取名 AgileMe。Android 的基本概念和常识这里也不介绍了，大家网上可以找到很多。在开始之前，简单介绍一下方向盘应用的需求。需求方向盘分为 8 个维度，每个维度采用 10 分制打分，每个维度的分值区域是我们生活的饱满度。程序初始化后，我们可以通过直接在各维度点击来设定维度的分值，系统自动重绘方向盘图形。当然，支持数据保存是必要地：）思路之前找过有没有直接的雷达图控件，发现还没有发现好用的。因为绘制这个图也简单，所以干脆自己操刀从头开始。这个图元也少，所以可以不必像工作中那样关注性能。1. 绘制静态的雷达格线 2. 绘制文字：这里需要按照角度来设定文字的对齐方式，否则左边的文字可能就要压线了 3. 绘制分值点 4. 对分值区域进行着色绘制 5. 为了能够响应点击操作，对每一个分值刻度周围都条件一个小矩形 Region，这样可以响应 onTouch 事件来判断打几分 代码也不复杂，主要就是根据想绘制的点进行计算，然后再 drawText、drawLine 等参数中传递正确即可。数据上主要是通过设定了很多对应的数组（维度点、刻度值、区域等）。具体代码如下：1 public class LifeWheelRadarGraph 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 titles = “工作“,“财富“,“ 健康 “,“娱乐“,“ 家庭“,“社交“,“精神 “,“贡献“;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; /各维度分值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 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 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 = 270.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; icount; 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 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_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 AgileMeActivity extends Activity private LifeWheelRadarGraph graph = null;private SharedPreferences settings;/* Called when the activity is first created. */Overridepublic void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState);setContentView(R.layout.main);graph = (LifeWheelRadarGraph)findViewById(R.id.lifeWheelRadarGraph1);/ Restore preferences settings = getSharedPreferences(“LifeWheel“, 0);String valueStr = settings.getString(“values“, “8,6,8,6,6,6,4,5“);try String valuesStr = valueStr.split(“,“);float values = new floatvaluesStr.length;for(int i = 0; i valuesStr.length; i+)valuesi = Float.parseFloat(valuesStri);graph.setValues(values); catch (Exception e) protected void onStop() super.onStop(); SharedPreferences.Editor editor = settings.edit();fl