创建指南针View的例子 android canvas compass
来源:互联网 发布:java语法 编辑:程序博客网 时间:2024/06/06 04:47
在接下来的例子里,你将通过扩展View类创建一个指南针View。它使用传统的指南针上升箭头来指示方向。当完成时,应该和图4-3看起来一样。
指南针是一个UI控件的例子,它需要完全不同的视觉显示,不同于SDK工具箱中的TextView和Button,让我们从无到有使它成为一个出色的控件。
在第10章,你将使用这个指南针View和设备内建的重力加速计来显示用户当前的方向。在11章中,你将学习更高级的Canvas绘制技巧来戏剧性地改进它的外观。
图4-3
package com.paad.compass;import android.content.Context;import android.graphics.*;import android.graphics.drawable.*;import android.view.*;import android.util.AttributeSet;import android.content.res.Resources;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 ats, int defaultStyle) {super(context, ats, defaultStyle);initCompassView();}protected void initCompassView() {setFocusable(true);}}
2. 指南针控件应该总是一个圆的方式占据画布允许的尽可能多的空间。重写onMeasure方法来计算最小的边,使用setMeasuredDimension来设置高度和高度值。
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// The compass is a circle that fills as much space as possible.// Set the measured dimensions by figuring out the shortest boundary,// height or width.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;// Decode the measurement specifications.int specMode = MeasureSpec.getMode(measureSpec);int specSize = MeasureSpec.getSize(measureSpec);if (specMode == MeasureSpec.UNSPECIFIED) {// Return a default size of 200 if no bounds are specified.result = 200;} else {// As you want to fill the available space// always return the full available bounds.result = specSize;}return result;}
3. 创建两个你将在绘制指南针时用到的资源文件:颜色和字符串。
3.1. 创建文本字符串资源 /res/values/strings.xml.
<?xml version=”1.0” encoding=”utf-8”?><resources><string name=”app_name”>Compass</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.2. 创建颜色资源 /res/values/colors.xml.
<?xml version=”1.0” encoding=”utf-8”?><resources><color name=”background_color”>#F555</color><color name=”marker_color”>#AFFF</color><color name=”text_color”>#AF00</color></resources>
4. 现在回到CompassView类中。创建一个用来显示方向的属性并为它创建get和set方法。
private float bearing;public void setBearing(float _bearing) {bearing = _bearing;} public float getBearing() {return bearing;}
5. 接下来,返回到initCompassView方法中,获取第3步中创建的资源的引用。以类作用域的方法存储字符串值和由颜色值创建的Paint对象。你将在下一步中用这些对象来绘制指南针。
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); circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);circlePaint.setColor(R.color. background_color);circlePaint.setStrokeWidth(1);circlePaint.setStyle(Paint.Style.FILL_AND_STROKE);Resources r = this.getResources();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));}
6. 最后一步就是用第5步中创建的字符串和Paint对象来绘制指南针。接下来的代码片段只给出了有限的提示。你可以在第11章找到更多关于如何在Canvas上绘制和使用高级的Paint效果的细节。
6.1. 首先重写onDraw方法。
@Overrideprotected void onDraw(Canvas canvas) {// TODO Auto-generated method stubsuper.onDraw(canvas);}
6.2. 找到控件的中心,存储最小边的长度作为指南针的半径。int px = getMeasuredWidth() / 2;int py = getMeasuredHeight() /2 ;int radius = Math.min(px, py);
6.3. 使用drawCircle方法绘制外边框,背景的颜色使用第5步中创建的circlePaint对象。// Draw the backgroundcanvas.drawCircle(px, py, radius, circlePaint);
6.4. 指南针通过旋转面板来显示当前的指向,所以当前的方向总是在设备的顶端。为了达到这个效果,沿着当前指向的相反方向来旋转画布。// Rotate our perspective so that the ‘top’ is// facing the current bearing.canvas.save();canvas.rotate(-bearing, px, py);
6.5. 现在剩下来的就是绘制表盘。旋转画布一周,每隔15°绘制一个标记,每隔45°绘制一个方向字符串。int textWidth = (int)textPaint.measureText(“W”);int cardinalX = px-textWidth/2;int cardinalY = py-radius+textHeight; // Draw the marker every 15 degrees and text every 45.for (int i = 0; i < 24; i++) {// Draw a marker.canvas.drawLine(px, py-radius, px, py-radius+10, markerPaint);canvas.save();canvas.translate(0, textHeight);// Draw the cardinal pointsif (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) {// Draw the text every alternate 45degString 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();
7. 为了查看指南针,修改main.xml资源,使用你的CompassView来替换TextView。这个过程将在下个章节中有更加详细的解释。
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <com.pad.compass.view.CompassViewandroid:id="@+id/compass" android:layout_width="fill_parent" android:layout_height="fill_parent" /></LinearLayout>
8. 运行Activity,你会看到指南针显示出来了。第10章中,你将了解如何绑定CompassView到设备的指南针。
Sample Code:
http://files.cnblogs.com/xirihanlin/DL090723@cc-CompassView.zip
Sample图示:
- 创建指南针View的例子 android canvas compass
- 创建指南针View的例子
- 创建指南针View的例子
- Android Canvas 实现指南针(Compass)
- android 传感器使用 Compass指南针的实现功能
- android 自定义指南针view
- Android自定义View------指南针
- 搜索引擎Compass的例子
- android自定义view--指南针背景
- (libgdx学习)compass(指南针)
- Windows下的指北针(指南针)--OpenGL版 Compass
- compass 的例子与集成
- Compass的一个简单例子
- osg指南针 Compass 类 源码
- 指南针驱动(compass)移植
- 【Android】自定义View之Canvas的使用
- Android Canvas 与 View之间的关系
- 【Android】【自定义View】canvas的方法大全
- Gstreamer的PAD激活机制
- android2.3 FrameWork对StatusBar处理流程
- Gstreamer多路流同步
- Android学习笔记(三六):横屏竖屏的切换
- Gstreamer PUSH和PULL模式
- 创建指南针View的例子 android canvas compass
- Gstreamer时钟
- 在对话框中应用CScrollView显示图像
- Gstreamer GstPipeline管道
- MINA网络框架
- Gstreamer流
- 大数相乘算法
- android传感器(2)
- Gstreamer Segments