Android之——自定义罗盘视图

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47337949

在前面的一些关于Android的博文中，涉及到一些自定义控件的文章。那么，在这篇博文中，我将向大家介绍以自定义控件的方式来实现罗盘视图的效果。我们将会通过扩展View类来创建一个新的罗盘视图。它通过显示传统的罗盘来指示当前朝向的方向。

一、实现

1、新建CompassView类

这个类扩展自View类，然后添加允许在代码中对视图进行实例化或者从资源布局填充它的构造函数。之后，添加一个新的initCompassView方法，用来初始化控件，并在每个构造函数中调用它。

具体结构代码如下:

package com.lyz.compass.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;

/**
 * 自定义View类
 * @author liuyazhuang
 *
 */
public class CompassView extends View {
	
	public CompassView(Context context){
		super(context);
		initCompassView();
	}
	
	public CompassView(Context context, AttributeSet attrs){
		super(context, attrs);
		initCompassView();
	}

	public CompassView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initCompassView();
	}
	
	/**
	 * 初始化视图的各个属性
	 */
	protected void initCompassView(){
		setFocusable(true);
	}
}

2、覆写onMeasure方法

罗盘视图应该是一个正圆，而且应该占据画布允许的尽可能大的空间。因此，可以通过重写onMeasure方法来计算最短边的长度，然后通过这个值并通过setMeasuredDimension方法来设置高度和宽度。

具体代码如下:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
	//罗盘是一个尽可能填充更多的空间的圆，通过设置最短的边界，高度或者宽度来设置测量的尺寸
	int measureWidth = measure(widthMeasureSpec);
	int measureHeight = measure(heightMeasureSpec);
	
	int d = Math.min(measureWidth, measureHeight);
	setMeasuredDimension(d, d);
}

/**
 * 解码数据值
 * @param measureSpec
 * @return
 */
private int measure(int measureSpec) {
	int result = 0;
	//对测量说明进行解码
	int specMode = MeasureSpec.getMode(measureSpec);
	int specSize = MeasureSpec.getSize(measureSpec);
	//如果没有指定界限，则返回默认大小200
	if(specMode == MeasureSpec.UNSPECIFIED){
		result = 200;
	}else{
		//由于是希望填充可用的空间，所以总是返回整个可用的边界
		result = specSize;
	}
	return result;
}

3、修改activity_main.xml

用新的CompassView替换TextView

具体代码如下:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
	<!-- 引用自定义的View -->
    <com.lyz.compass.view.CompassView
        android:id="@+id/compassView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

4、在资源文件中定义罗盘属性

1)在res/values/strings.xml中创建文本资源

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Compass</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</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>

2)在res/values/colors.xml文件中创建颜色资源

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

5、在CompassView类添加新属性

在CompassView类中，为显示的方向添加一个新的属性，并创建它的set和get方法。

//显示的方向
private float bearing;
public float getBearing() {
	return bearing;
}

public void setBearing(float bearing) {
	this.bearing = bearing;
}

6、引用资源文件

返回到CompassView类，引用4中创建的每一个资源，把字符串值存储为实例变量，并使用颜色值来创建新的类作用域的Paint对象。在下一步中将使用这些对象来绘制罗盘字盘。

具体代码如下:

//显示的方向
private float 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;
/**
 * 初始化视图的各个属性
 */
protected 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));
}

7、绘制罗盘

使用6中创建的String和Paint来绘制罗盘的字盘。

具体代码如下：

@Override
protected void onDraw(Canvas canvas) {
	// TODO Auto-generated method stub
//		super.onDraw(canvas);
	int measuredWidth = getMeasuredWidth();
	int measuredHeight = getMeasuredHeight();
	
	int px = measuredWidth / 2;
	int py = measuredHeight / 2;
	//取较小的值为半径
	int radius = Math.min(px, py);
	//绘制背景
	canvas.drawCircle(px, py, radius, circlePaint);
	canvas.save();
	canvas.rotate(-bearing, px, py);
	
	int textWidth = (int) textPaint.measureText("W");
	int cadinalX = px - textWidth / 2;
	int cadinalY = py - radius + textHeight;
	//每15度绘制一个标记，每45度绘制一个文本
	for(int i = 0; i < 24; i++){
		//绘制一个标记
		canvas.drawLine(px, px - radius, py, 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;
			default:
				break;
			}
			canvas.drawText(dirString, cadinalX, cadinalY, 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();
}

8、添加可访问性支持

罗盘视图以可视方式显示方向，所以为了提高可访问性，当方向变化时，需要广播一个可访问性事件，说明“文本(在本例中是内容)”发生了变化。为了，需要修改setBearing方法。

具体代码如下：

public void setBearing(float bearing) {
	this.bearing = bearing;
	sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_TEXT_CHANGED);
}

9、重写dispatchPopulateAccessibilityEvent方法

将当前方向用作可访问性事件使用的内容值。

具体代码如下：

@Override
public boolean dispatchPopulateAccessibilityEvent(AccessibilityEvent event) {
	// TODO Auto-generated method stub
	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;
	}
	return false;
}

10、CompassView完整代码

package com.lyz.compass.view;

import com.lyz.compass.activity.R;

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;

/**
 * 自定义View类
 * @author liuyazhuang
 *
 */
public class CompassView extends View {
	
	//显示的方向
	private float 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 defStyle) {
		super(context, attrs, defStyle);
		initCompassView();
	}
	
	/**
	 * 初始化视图的各个属性
	 */
	protected 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));
	}
	
	
	public float getBearing() {
		return bearing;
	}

	public void setBearing(float bearing) {
		this.bearing = bearing;
		sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_TEXT_CHANGED);
	}
	
	@Override
	public boolean dispatchPopulateAccessibilityEvent(AccessibilityEvent event) {
		// TODO Auto-generated method stub
		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;
		}
		return false;
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		//罗盘是一个尽可能填充更多的空间的圆，通过设置最短的边界，高度或者宽度来设置测量的尺寸
		int measureWidth = measure(widthMeasureSpec);
		int measureHeight = measure(heightMeasureSpec);
		
		int d = Math.min(measureWidth, measureHeight);
		setMeasuredDimension(d, d);
	}

	/**
	 * 解码数据值
	 * @param measureSpec
	 * @return
	 */
	private int measure(int measureSpec) {
		int result = 0;
		//对测量说明进行解码
		int specMode = MeasureSpec.getMode(measureSpec);
		int specSize = MeasureSpec.getSize(measureSpec);
		//如果没有指定界限，则返回默认大小200
		if(specMode == MeasureSpec.UNSPECIFIED){
			result = 200;
		}else{
			//由于是希望填充可用的空间，所以总是返回整个可用的边界
			result = specSize;
		}
		return result;
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
//		super.onDraw(canvas);
		int measuredWidth = getMeasuredWidth();
		int measuredHeight = getMeasuredHeight();
		
		int px = measuredWidth / 2;
		int py = measuredHeight / 2;
		//取较小的值为半径
		int radius = Math.min(px, py);
		//绘制背景
		canvas.drawCircle(px, py, radius, circlePaint);
		canvas.save();
		canvas.rotate(-bearing, px, py);
		
		int textWidth = (int) textPaint.measureText("W");
		int cadinalX = px - textWidth / 2;
		int cadinalY = py - radius + textHeight;
		//每15度绘制一个标记，每45度绘制一个文本
		for(int i = 0; i < 24; i++){
			//绘制一个标记
			canvas.drawLine(px, px - radius, py, 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;
				default:
					break;
				}
				canvas.drawText(dirString, cadinalX, cadinalY, 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();
	}
}

11、使用定制控件

在MainActivity中有两种方式引用自定义控件，一种是引用布局文件，一种是创建自定义控件对象，将自定义对象设置给当前视图。

1)引用布局文件

package com.lyz.compass.activity;

import android.app.Activity;
import android.os.Bundle;

import com.lyz.compass.view.CompassView;

/**
 * 程序的主入口
 * @author liuyazhuang
 *
 */
public class MainActivity extends Activity {

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

2)创建自定义控件对象

package com.lyz.compass.activity;

import android.app.Activity;
import android.os.Bundle;

import com.lyz.compass.view.CompassView;

/**
 * 程序的主入口
 * @author liuyazhuang
 *
 */
public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		CompassView compassView = new CompassView(this);
		setContentView(compassView);
		compassView.setBearing(0);
	}
}

二、运行效果

三、温馨提示

大家可以到链接http://download.csdn.net/detail/l1028386804/8973385获取完整的Android自定义罗盘视图的完整示例源代码