Android - Compass(羅盤) 詳解

Compass(羅盤) 詳解

本文地址: http://blog.csdn.net/caroline_wendy/article/details/21379067

Compass(羅盤)是一個定制的視圖, 繼承View類, 重寫了視圖的邊界(onMeasure)和內(nèi)容(onDraw);

如圖:

以下是Compass的具體設(shè)計(jì):

1. 創(chuàng)建CompassView類, 羅盤視圖

位置: java->package->CompassView

package mzx.spike.compass.app;  import android.content.Context; import android.content.res.Resources; import android.graphics.Canvas; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; import android.view.accessibility.AccessibilityEvent;  /**  * Created by C.L.Wang on 14-3-16.  */ public class CompassView extends View {      private float bearing; //方位      public void setBearing(float _bearing) {         bearing = _bearing;         sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_TEXT_CHANGED);     }      public float getBearing() {         return bearing;     }      private Paint markerPaint;     private Paint textPaint;     private Paint circlePaint;     private String northString;     private String eastString;     private String southString;     private String westString;     private int textHeight;      public CompassView(Context context) {         super(context);         initCompassView();     }      public CompassView(Context context, AttributeSet attrs) {         super(context, attrs);         initCompassView();     }      public CompassView(Context context, AttributeSet attrs, int defaultStyle) {         super(context, attrs, defaultStyle);         initCompassView();     }      private void initCompassView() {         setFocusable(true);          Resources r = this.getResources();          circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);         circlePaint.setColor(r.getColor(R.color.background_color));         circlePaint.setStrokeWidth(1); //筆畫寬度         circlePaint.setStyle(Paint.Style.FILL_AND_STROKE);          northString = r.getString(R.string.cardinal_north);         eastString = r.getString(R.string.cardinal_east);         southString = r.getString(R.string.cardinal_south);         westString = r.getString(R.string.cardinal_west);          textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);         textPaint.setColor(r.getColor(R.color.text_color));          textHeight = (int)textPaint.measureText("yY");          markerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);         markerPaint.setColor(r.getColor(R.color.marker_color));     }      @Override     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {         int measuredWidth = measure(widthMeasureSpec);         int measuredHeight = measure(heightMeasureSpec);          int d = Math.min(measuredWidth, measuredHeight);          setMeasuredDimension(d, d);     }      protected int measure(int measureSpec) {         int result;          int specMode = MeasureSpec.getMode(measureSpec);         int specSize = MeasureSpec.getSize(measureSpec);          if (specMode == MeasureSpec.UNSPECIFIED) {             result = 200;         } else {             result = specSize;         }          return result;     }      @Override     protected void onDraw(Canvas canvas) {         int mMeasuredWidth = getMeasuredWidth();         int mMeasuredHeight = getMeasuredHeight();          int px = mMeasuredWidth/2;         int py = mMeasuredHeight/2;          int radius = Math.min(px, py);          canvas.drawCircle(px, py, radius, circlePaint);          canvas.save();         canvas.rotate(-bearing, px, py); //相反方向旋轉(zhuǎn)          int textWidth = (int)textPaint.measureText("W");         int cardinalX = px-textWidth/2;         int cardinalY = py-radius+textHeight;          for (int i=0; i<24; i++) {             canvas.drawLine(px, py-radius, px, py-radius+10, markerPaint);              canvas.save();             canvas.translate(0, textHeight);              if (i%6 == 0) {                 String dirString = "";                 switch (i) {                     case (0) : {                         dirString = northString;                         int arrowY = 2*textHeight;                         canvas.drawLine(px, arrowY, px-5, 3*textHeight, markerPaint);                         canvas.drawLine(px, arrowY, px+5, 3*textHeight, markerPaint);                         break;                     }                      case (6) : dirString = eastString; break;                     case (12) : dirString = southString; break;                     case (18) : dirString = westString; break;                 }                  canvas.drawText(dirString, cardinalX, cardinalY, textPaint);             }              else if (i%3 == 0) {                 String angle = String.valueOf(i*15);                 float angleTextWidth = textPaint.measureText(angle);                  int angleTextX = (int)(px-angleTextWidth/2);                 int angleTextY = py-radius+textHeight;                 canvas.drawText(angle, angleTextX, angleTextY, textPaint);             }              canvas.restore();              canvas.rotate(15, px, py);         }         canvas.restore();     }      @Override     public boolean dispatchPopulateAccessibilityEvent(final AccessibilityEvent event) {         super.dispatchPopulateAccessibilityEvent(event);          if (isShown()) {             String bearingStr = String.valueOf(bearing);              event.getText().add(bearingStr);              return true;         } else             return false;     } }

這個類代碼較多, 詳解:

1. 私有變量bearing, 羅盤的方位, 包含set()和get()方法, 唯一可以操作的參數(shù);

2. 資源的私有變量, 表示圖畫, 字符串, 高度, 從資源(xml)中獲得;

3. 重載構(gòu)造函數(shù), 添加初始化資源程序initCompassView();

4. 在初始化程序initCompassView()中, 使用資源表的引用(getResources),初始化資源變量;

5. 重寫onMeasure()方法, 創(chuàng)建邊界, 使用setMeasuredDimension確定邊界;

6. 在方法measure中, 具體的邊界實(shí)現(xiàn);

7. 重寫onDraw()方法, 繪制圖像;

8. onDraw(), 繪制: 圓形(drawCircle), 旋轉(zhuǎn)(rotate), 24個線, 4個字母, 4個度數(shù), 小箭頭;

9. 注意set()方法中的sendAccessibilityEvent廣播訪問事件, 重寫dispatchPopulateAccessibilityEvent方法, 接受廣播事件, 改變應(yīng)用程序的狀態(tài);

10. set方法可以定制旋轉(zhuǎn)的角度;

2. 修改資源文件, 顏色(colors.xml)和字符串(strings.xml)

位置: res->values->colors&strings

<?xml version="1.0" encoding="utf-8"?> <resources>     <color name="background_color">#F555</color>     <color name="marker_color">#AFFF</color>     <color name="text_color">#AFFF</color> </resources>

<?xml version="1.0" encoding="utf-8"?> <resources>      <string name="app_name">Compass</string>     <string name="action_settings">Settings</string>     <string name="cardinal_north">N</string>     <string name="cardinal_east">E</string>     <string name="cardinal_south">S</string>     <string name="cardinal_west">W</string>  </resources> 

3. 修改主布局文件(activity_main.xml)

位置: res->layout->activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     android:paddingBottom="@dimen/activity_vertical_margin"     tools:context="mzx.spike.compass.app.MainActivity">      <mzx.spike.compass.app.CompassView         android:id="@+id/compassView"         android:layout_width="match_parent"         android:layout_height="match_parent"     />  </RelativeLayout>

4. 修改主Activity的實(shí)現(xiàn)(MainActivity.java)

位置: java->package->MainActivity.java

......     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         CompassView cv = (CompassView)this.findViewById(R.id.compassView);         cv.setBearing(45);     } ......

5. 執(zhí)行程序:

下載位置: http://download.csdn.net/detail/u012515223/7052999