從0開始在Android下開發(fā)生活方向盤應(yīng)用（自繪雷達(dá)圖）

1、在30天敏捷生活（1）：意識(shí)你的生活方向盤、敏捷個(gè)人：你有自己的生活方向盤嗎？中提到生活方向盤是敏捷個(gè)人的一個(gè)重要工具，之前發(fā)不過圖片和Excel格式的方向盤工具。但現(xiàn)在是移動(dòng)時(shí)代，所以利用空閑時(shí)間也編寫了一個(gè)Android應(yīng)用，效果圖如下。這是我在Android下開發(fā)的第一個(gè)應(yīng)用，所以本篇將介紹一下如何從0開始在Android開發(fā)這個(gè)應(yīng)用。下載SDK 我是在windows下開發(fā)，所以下載了installer_r18-windows.exe安裝SDK運(yùn)行上一步下載的installer_r18-windows.exe，然后運(yùn)行SDK Manager下載你需要版本的SDK。2.3的是常用的 ，我手

2、機(jī)是2.2的，所以我還下載了一個(gè)2.2版本的。安裝ADT Plugin for Eclipse在下載，具體如何使用Eclipse這里就不說了 以上把開發(fā)環(huán)境都準(zhǔn)備好了，現(xiàn)在開始新建一個(gè)項(xiàng)目，取名AgileMe。Android的基本概念和常識(shí)這里也不介紹了，大家網(wǎng)上可以找到很多。在開始之前，簡(jiǎn)單介紹一下方向盤應(yīng)用的需求。需求方向盤分為8個(gè)維度，每個(gè)維度采用10分制打分，每個(gè)維度的分值區(qū)域是我們生活的飽滿度。程序初始化后，我們可以通過直接在各維度點(diǎn)擊來設(shè)定維度的分值，系統(tǒng)自動(dòng)重繪方向盤圖形。當(dāng)然，支持?jǐn)?shù)據(jù)保存是必要地：）思路之前找過有沒有直接的雷達(dá)圖控件，發(fā)現(xiàn)還沒有發(fā)現(xiàn)好用的。因?yàn)槔L制這

3、個(gè)圖也簡(jiǎn)單，所以干脆自己操刀從頭開始。這個(gè)圖元也少，所以可以不必像工作中那樣關(guān)注性能。1. 繪制靜態(tài)的雷達(dá)格線 2. 繪制文字：這里需要按照角度來設(shè)定文字的對(duì)齊方式，否則左邊的文字可能就要壓線了 3. 繪制分值點(diǎn) 4. 對(duì)分值區(qū)域進(jìn)行著色繪制 5. 為了能夠響應(yīng)點(diǎn)擊操作，對(duì)每一個(gè)分值刻度周圍都條件一個(gè)小矩形Region，這樣可以響應(yīng)onTouch事件來判斷打幾分 代碼也不復(fù)雜，主要就是根據(jù)想繪制的點(diǎn)進(jìn)行計(jì)算，然后再drawText、drawLine等參數(shù)中傳遞正確即可。數(shù)據(jù)上主要是通過設(shè)定了很多對(duì)應(yīng)的數(shù)組（維度點(diǎn)、刻度值、區(qū)域等）。具體代碼如下： 1publicclass LifeWheelR

4、adarGraph extends View 2privateint count = 8; 3privatefloat angle = 360/count; 4privateint point_radius = 5; /畫點(diǎn)的半徑 5privateint regionwidth = 40; /選擇分值小區(qū)域?qū)挾?6privateint valueRulingCount = 5; /畫等分值線 7privateint radius; 8privateint centerX; 9privateint centerY; 10private String titles = "工作"

5、,"財(cái)富","健康","娛樂","家庭","社交","精神","貢獻(xiàn)" 11 12private Point pts; /維度端點(diǎn) 13private Region regions; /打分點(diǎn)區(qū)域 14privatefloat regionValues; /打分點(diǎn)分?jǐn)?shù) 15private Path valuePath; 16privatefloat values = 8,6,8,6,6,6,4,5; /各維度分值 17privateint maxValue

6、 = 10; 18private Point value_pts; /維度端點(diǎn) 19private Paint paint; 20private Paint valuePaint; 21 22publicfloat getValues() 23return values; 24 25 26publicvoid setValues(float values) 27 Assert.assertTrue("傳遞的values數(shù)組大小不是"+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/* 設(shè)置畫布的顏色 */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/畫方向盤分值區(qū)域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 保存方向盤分值最后我們還要保存分值，這里使用了簡(jiǎn)單的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