Android 自訂View視圖

建立全新的視圖將滿足我們獨特的UI需求。

本文介紹在指南針開發中會用到的羅盤的介面UI，通過繼承View類實現的自訂視圖，以此來深刻瞭解自訂視圖。

實現：

原始碼：

布局檔案activity_main(其中CompassView繼承View類):

<frameLayout 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"    tools:context=".MainActivity" >    </frameLayout>

res/values檔案夾下的：

string.xml:

    ProfessionalAndroidDemo6    Settings    Hello world!NESW

colors.xml:

    #F555    #AFFF    #AFFF    

代碼檔案;

MainActivity:

package com.professionalandroiddemo6;import android.app.Activity;import android.os.Bundle;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}

CompassView:

package com.professionalandroiddemo6;/** * 自訂視圖--指南針介面 */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;public class CompassView extends View {private Paint markerPaint;private Paint circlePaint;private Paint textPaint;private String north, south, east, west;private int textHeight;private String dirString;private float bearing;public void setBearing(float _bearing) {bearing = _bearing;sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_TEXT_CHANGED);}public float getBearing() {return bearing;}public CompassView(Context context) {super(context);initCompassView();}public CompassView(Context context, AttributeSet attrs) {super(context, attrs);initCompassView();}public CompassView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initCompassView();}private void initCompassView() {setFocusable(true);Resources resources = this.getResources();circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);circlePaint.setColor(resources.getColor(R.color.background));circlePaint.setStrokeWidth(1);circlePaint.setStyle(Paint.Style.FILL_AND_STROKE);north = resources.getString(R.string.north);south = resources.getString(R.string.south);east = resources.getString(R.string.east);west = resources.getString(R.string.west);textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);textPaint.setColor(resources.getColor(R.color.text));textPaint.setTextSize((float) 30);// 此處設定將要顯示的字型的大小。textHeight = (int) textPaint.measureText("yY");markerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);markerPaint.setColor(resources.getColor(R.color.maker));}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// 羅盤是一個填充儘可能多的空間的圓，通過設定最短的邊界、高度或者寬度來設定測量的尺寸。int measuredWidth = measure(widthMeasureSpec);int measuredHeight = measure(heightMeasureSpec);int d = Math.min(measuredWidth, measuredHeight);setMeasuredDimension(d, d);}private int measure(int measureSpec) {int result = 0;// 對測量說明進行解碼int specMode = MeasureSpec.getMode(measureSpec);int specSize = MeasureSpec.getSize(measureSpec);if (specMode == MeasureSpec.UNSPECIFIED) {// 如果沒有指定界限了，則預設傳回值為200result = 200;} else {// 由於你希望填充可用的空間，所以總是返回整個可用的邊界result = specSize;}return result;}@Overrideprotected void onDraw(Canvas canvas) {// 找到控制項的中心，並將最小邊的長度作為羅盤的半徑儲存起來。int mMeasuredWidth = getMeasuredWidth();int mMeasuredHeight = getMeasuredHeight();int px = mMeasuredWidth / 2;int py = mMeasuredHeight / 2;int radius = Math.min(px, py);// 使用drawCircle方法畫出羅盤字元的邊界，並為其北京著色。canvas.drawCircle(px, py, radius, circlePaint);canvas.save();canvas.rotate(-bearing, px, py);// 剩下要做的就只有繪製標記了。把畫布旋轉一圈，並且每15度畫一個標記，每45度畫一個方向的縮寫。int textWidth = (int) textPaint.measureText("W");int cardinalX = px - textWidth / 2;int cardinalY = py - radius + textHeight;// 每15度繪製一個標記，每45度繪製一個文本for (int i = 0; i < 24; i++) {canvas.drawLine(px, py - radius, px, py - radius + 20, markerPaint);canvas.save();canvas.translate(0, textHeight);// 繪製基本方位if (i % 6 == 0) {switch (i) {case 0: {dirString = north;int arrowY = 2 * textHeight;canvas.drawLine(px, arrowY, px - 5, 5 * textHeight,markerPaint);canvas.drawLine(px, arrowY, px + 5, 5 * textHeight,markerPaint);}break;case 6:dirString = east;break;case 12:dirString = south;break;case 18:dirString = west;break;}canvas.drawText(dirString, cardinalX, cardinalY, textPaint);} else if (i % 3 == 0) {// 每45度繪製文本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();}@Overridepublic boolean dispatchPopulateAccessibilityEvent(AccessibilityEvent event) {super.dispatchPopulateAccessibilityEvent(event);if (isShown()) {String bearingStr = String.valueOf(bearing);if (bearingStr.length() > AccessibilityEvent.MAX_TEXT_LENGTH)bearingStr = bearingStr.substring(0,AccessibilityEvent.MAX_TEXT_LENGTH);event.getText().add(bearingStr);return true;}return false;}}

原始碼下載：

點擊下載源碼