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" >

<com.professionalandroiddemo6.CompassView
android:id="@+id/compassView"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</FrameLayout>

res/values目录下的：

string.xml:

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

>
<resources>

<string name="app_name">ProfessionalAndroidDemo6</string>
<string name="action_settings" font = "14sp">Settings</string>
<string name="hello_world">Hello world!</string>
<string name="north">N</string>
<string name="east">E</string>
<string name="south">S</string>
<string name="west">W</string>
</resources>

colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="background">#F555</color>
<color name="maker">#AFFF</color>
<color name="text">#AFFF</color>

</resources>

代码文件;

MainActivity:

package com.professionalandroiddemo6;

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

public class MainActivity extends Activity {

@Override
protected 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));

}

@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);
}

private int measure(int measureSpec) {
int result = 0;
// 对測量说明进行解码
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);

if (specMode == MeasureSpec.UNSPECIFIED) {
// 假设没有指定界限了，则默认返回值为200
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);
// 使用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();
}

@Override
public 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;
}

}

源码下载：

点击下载源代码