從0開始在Android下開發生活方向盤應用（自繪雷達圖）

    在30天敏捷生活（1）：意識你的生活方向盤、敏捷個人：你有自己的生活方向盤嗎？中提到生活方向盤是敏捷個人的一個重要工具，之前發不過圖片和Excel格式的方向盤工具。

但現在是移動時代，所以利用空閑時間也編寫了一個Android應用，效果圖如下。這是我在Android下開發的第一個應用，所以本篇將介紹一下如何從0開始在Android開發這個應用。

下載SDK http://developer.android.com/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

在https://dl-ssl.google.com/android/eclipse/下載，具體如何使用Eclipse這里就不說了

 

以上把開發環境都准備好了，現在開始新建一個項目，取名AgileMe。Android的基本概念和常識這里也不介紹了，大家網上可以找到很多。在開始之前，簡單介紹一下方向盤應用的需求。

需求

方向盤分為8個維度，每個維度采用10分制打分，每個維度的分值區域是我們生活的飽滿度。程序初始化后，我們可以通過直接在各維度點擊來設定維度的分值，系統自動重繪方向盤圖形。當然，支持數據保存是必要地：）

思路

之前找過有沒有直接的雷達圖控件，發現還沒有發現好用的。因為繪制這個圖也簡單，所以干脆自己操刀從頭開始。這個圖元也少，所以可以不必像工作中那樣關注性能。

1. 繪制靜態的雷達格線
2. 繪制文字：這里需要按照角度來設定文字的對齊方式，否則左邊的文字可能就要壓線了
3. 繪制分值點
4. 對分值區域進行着色繪制
5. 為了能夠響應點擊操作，對每一個分值刻度周圍都條件一個小矩形Region，這樣可以響應onTouch事件來判斷打幾分

代碼也不復雜，主要就是根據想繪制的點進行計算，然后再drawText、drawLine等參數中傳遞正確即可。數據上主要是通過設定了很多對應的數組（維度點、刻度值、區域等）。具體代碼如下：

public class LifeWheelRadarGraph extends View {
    private int count = 8;
    private float angle = 360/count;    
    private int point_radius = 5;   //畫點的半徑
    private int regionwidth = 40;   //選擇分值小區域寬度
    private int valueRulingCount = 5;      //畫等分值線
    private int radius;
    private int centerX;
    private int centerY;
    private String[] titles = {"工作","財富","健康","娛樂","家庭","社交","精神","貢獻"};
    
    private Point[] pts;  //維度端點
    private Region[] regions;       //打分點區域
    private float[] regionValues;   //打分點分數
    private Path valuePath;
    private float[] values = {8,6,8,6,6,6,4,5}; //各維度分值
    private int maxValue = 10;
    private Point[] value_pts;  //維度端點    
    private Paint paint;
    private Paint valuePaint;
    
    public float[] getValues() {
        return values;
    }
    
    public void setValues(float[] values) {
        Assert.assertTrue("傳遞的values數組大小不是"+count, values.length == count);
        this.values = values;
    }
    
    public LifeWheelRadarGraph(Context context) {
        super(context);
        init();    
    }
    
    private void init() {
        paint = new Paint();
        valuePaint = new Paint();
        pts = new Point[count];
        value_pts = new Point[count];
        valuePath = new Path();
        for(int i=0; i<count; i++) {
            pts[i] = new Point();
            value_pts[i] = new Point();
        }
        
        regionValues = new float[count*valueRulingCount*2];
        regions = new Region[count*valueRulingCount*2];   
        for(int i=0; i<regions.length; i++) {
            regions[i] = new Region();
        }

    }

    public LifeWheelRadarGraph(Context context, AttributeSet attrs) {   
        super(context, attrs);
        init();
    }   
  
    public LifeWheelRadarGraph(Context context, AttributeSet attrs, int defStyle) {   
        super(context, attrs, defStyle);   
        init();
    }  

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        radius = Math.min(h, w)/2 - 40;
        centerX = w/2;
        centerY = h/2;
        
        for(int i=0; i<count; i++)
        {
            pts[i].x = centerX+(int)(radius*Math.cos(Math.toRadians(angle*i)));
            pts[i].y = centerY-(int)(radius*Math.sin(Math.toRadians(angle*i)));
            
            for(int j=1; j<=valueRulingCount*2; j++)
            {
                int x = centerX + (pts[i].x-centerX)/(valueRulingCount*2)*j;
                int y = centerY + (pts[i].y-centerY)/(valueRulingCount*2)*j;
                regions[i*valueRulingCount*2+j-1].set(x-regionwidth/2, y-regionwidth/2, x+regionwidth/2, y+regionwidth/2);   
                regionValues[i*valueRulingCount*2+j-1] = j;
            }            
        }                
        postInvalidate();
        super.onSizeChanged(w, h, oldw, oldh);
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        float x = event.getX();
        float y = event.getY();
        
        switch(event.getAction()) 
        {
        case MotionEvent.ACTION_DOWN:
            for(int i = 0; i<regions.length; i++)
            {
                if (regions[i].contains((int)x, (int)y))
                {
                    values[(int)(i/(valueRulingCount*2))] = regionValues[i];
                    break;
                }
            }
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:

            break;
        case MotionEvent.ACTION_UP:

            break;
        }
        return super.onTouchEvent(event); 
    }
   
   
    @Override
    public boolean onKeyLongPress(int keyCode, KeyEvent event) {
        // TODO Auto-generated method stub
        return super.onKeyLongPress(keyCode, event);
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        /* 設置畫布的顏色 */
        canvas.drawColor(Color.WHITE);

        paint.setAntiAlias(true);
        //畫邊框線
        paint.setColor(Color.GRAY);      
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        for(int i=0; i<count; i++)
        {
            int end = i+1 == count? 0:i+1;

            for(int j=1; j<=valueRulingCount; j++)
            {
                canvas.drawLine(centerX+(pts[i].x-centerX)/5*j, centerY+(pts[i].y-centerY)/5*j, 
                        centerX+(pts[end].x-centerX)/5*j, centerY+(pts[end].y-centerY)/5*j,  paint);
            }
            
            canvas.drawLine(centerX, centerY, pts[i].x, pts[i].y, paint);            
        }
        
        //寫文字
        paint.setTextSize(20);
        paint.setColor(Color.BLACK);
        FontMetrics fontMetrics = paint.getFontMetrics();
        float fontHegiht = -fontMetrics.ascent;
        for(int i=0; i<count; i++)
        {
            if ((angle * i == 90.0) || (angle * i == 270.0))
                paint.setTextAlign(Align.CENTER);
            else if ((angle * i < 90) || (angle * i > 270))
                paint.setTextAlign(Align.LEFT);
            else if ((angle * i > 90) || (angle * i < 270))
                paint.setTextAlign(Align.RIGHT);
            
            if (angle * i == 270.0)
                canvas.drawText(titles[i], pts[i].x, pts[i].y+fontHegiht, paint);
            else
                canvas.drawText(titles[i], pts[i].x, pts[i].y, paint);
        }        

        //畫方向盤分值區域
        for(int i=0; i<count; i++)
        {
            value_pts[i].x = (int)(centerX + (pts[i].x-centerX) * values[i]/maxValue);
            value_pts[i].y = (int)(centerY + (pts[i].y-centerY) * values[i]/maxValue);
        }
        
        valuePath.reset();
        valuePaint.setAntiAlias(true);
        valuePaint.setColor(Color.BLUE);  
        valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);        
        for(int i = 0; i< pts.length; i++)
        {
            //給valuePath賦值
            if (i == 0)
                valuePath.moveTo(value_pts[i].x, value_pts[i].y);
            else
                valuePath.lineTo(value_pts[i].x, value_pts[i].y);
            //畫取分圓圈
            canvas.drawCircle(value_pts[i].x, value_pts[i].y, point_radius, paint);
        }
        valuePaint.setAlpha(150);     
        canvas.drawPath(valuePath, valuePaint);
    }
}

保存方向盤分值

最后我們還要保存分值，這里使用了簡單的SharedPreferences

public class AgileMeActivity 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 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 float[valuesStr.length];
            for(int i = 0; i <valuesStr.length; i++)
                values[i] = Float.parseFloat(valuesStr[i]);
            
            graph.setValues(values);
        } catch (Exception e) {
        }
    }
    
    protected void onStop(){   
        super.onStop();    
        SharedPreferences.Editor editor = settings.edit();
        float[] values = graph.getValues();
        String valueStr= "";
        for(int i=0; i <values.length; i++)
            valueStr =  valueStr + "," + values[i];
        valueStr = valueStr.substring(1);
        editor.putString("values", valueStr);   
        editor.commit();            
    }
}

 

 應用下載

#敏捷個人# 生活方向盤#工具#Android應用提供下載 通過@微盤 分享文件"AgileMe.apk" http://t.cn/zWvgPgO

 

推薦：你可能需要的在線電子書

我的微博：http://weibo.com/openexpressapp

敏捷個人sina圍裙：http://q.t.sina.com.cn/135484    

歡迎轉載，轉載請注明：轉載自敏捷個人網站