Android 实现指南针效果

Android 实现指南针效果

前一段时间在做指南针,于是想偷偷懒.在网上直接找一个Demo.然后改改旧差不多了.可是看到的效果却和预期的差太多了,所以就不得不自己撸一个：

大致上会用到内容

• 自定义View
• GPS定位模块
• 方向传感器

---

开始,创建一个view

• 先写一个类继承view
• 不断对OnDraw事件进行重绘
• 传入方向

OK.那么新建一个DirectionView 来继承view

public class DirectionView extends View {
    
}

那么绘制需要用到什么。用到画笔。宽度。等等一系列参数。

public class DirectionView extends View {

   /**
    * 圆环使用
    * */
   private Paint mRingPaint;

   private Paint mCententPaint; //绘制中心实线的画布

   /**
    * 圆环半径 根据view的宽度计算
    * */
   private int mRadius = 200;

   /**
    * 圆环的中心点 -- 画圆环和旋转画布时需要使用
    * */
   private int x, y;

   /**
    * 圆环动画使用 -- 与mRingPaint唯一不同得方在于颜色
    * */
   private Paint mRingAnimPaint;

   /**
    * 圆环大小 矩形
    * */
   private RectF mRectf;

   private Context mContext;

   /**
    * 圆环 宽度
    * */
   private final int mHeartPaintWidth = 50;

   /**
    * 圆环动画开始时 画弧的偏移量
    * */
   private int mAnimAngle = -1;
   }

初始化部分我们先不管。看到效果图.我们是不是需要先将360度的齿轮画好。
这里我们就需要对ondraw 来操作了。
绘制嘛。必须要画板嘛

	canvas.setDrawFilter(mDrawFilter);//在canvas上抗锯齿
        //由于drawArc默认从x轴开始画，因此需要将画布旋转或者绘制角度旋转，2种方案
        //int level = canvas.save();
        //先绘制竖线
        canvas.drawLine(x,mRectf.top + 30, x  , mRectf.top - 60,mCententPaint);
        //绘制中心线
        canvas.drawLine(x,y-80,x,y + 80,mCententPaint);

        canvas.drawLine(x - 80,y,x + 80, y ,mCententPaint);
        canvas.rotate(rotate, x, y);// 旋转的时候一定要指明中心

        for (int i = 0; i < 360; i += 3) {
            canvas.drawArc(mRectf, i, 1, false, mRingPaint);
        }

这里喔们把360度的齿轮绘制了。大致上是每隔3度绘制一条。
那么绘制齿轮之后。我们是不是需要绘制东西南北了。

mCententPaint.setTextSize(50);
        mCententPaint.setColor(Color.RED);
        canvas.drawText("北",x,mRectf.top + mHeartPaintWidth  + 50,mCententPaint);
        mCententPaint.setColor(Color.BLACK);
        canvas.rotate(90, x, y);// 旋转的时候一定要指明中心
        canvas.drawText("东",x,mRectf.top + mHeartPaintWidth + 50,mCententPaint);
        canvas.rotate(90, x, y);// 旋转的时候一定要指明中心
        canvas.drawText("南",x,mRectf.top + mHeartPaintWidth + 50,mCententPaint);
        canvas.rotate(90, x, y);// 旋转的时候一定要指明中心
        canvas.drawText("西",x,mRectf.top + mHeartPaintWidth + 50,mCententPaint);
        canvas.rotate(90, x, y);// 旋转的时候一定要指明中心
        mCententPaint.setTextSize(30);
        for (int i = 0; i < 360; i += 3) {
            if(i == 0|| i == 30 || i ==60 || i ==90 || i ==120 || i == 150 || i == 180 || i == 210 || i == 240 || i == 270 || i == 300 || i == 330 || i== 0){
                canvas.drawText(""+i,x,mRectf.top - mHeartPaintWidth ,mCententPaint);
                canvas.rotate(30, x, y);// 旋转的时候一定要指明中心
            }
        }

那么整个代码就是：

package com.jonkming.easyui.hardware.compass.ui;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DrawFilter;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import com.jonkming.easyui.R;

/**
 * 指南针的自定位View
* @Title: DirectionView.java
* @Package com.jonkming.easyui.hardware.compass.ui
* @author HuangMingming
* @date 2016/11/10 19:16
* @version V1.0
*/
public class DirectionView extends View {

    /**
     * 圆环使用
     * */
    private Paint mRingPaint;

    private Paint mCententPaint; //绘制中心实线的画布

    /**
     * 圆环半径 根据view的宽度计算
     * */
    private int mRadius = 200;

    /**
     * 圆环的中心点 -- 画圆环和旋转画布时需要使用
     * */
    private int x, y;

    /**
     * 圆环动画使用 -- 与mRingPaint唯一不同得方在于颜色
     * */
    private Paint mRingAnimPaint;

    /**
     * 圆环大小 矩形
     * */
    private RectF mRectf;

    private Context mContext;

    /**
     * 圆环 宽度
     * */
    private final int mHeartPaintWidth = 50;

    /**
     * 圆环动画开始时 画弧的偏移量
     * */
    private int mAnimAngle = -1;

    public DirectionView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);

        this.mContext = context;
        init();
    }

    public DirectionView(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);
        this.mContext = context;
        init();
    }

    public DirectionView(Context context)
    {
        this(context, null);
        this.mContext = context;
        init();
    }

    private  void init(){
        mRingPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mRingPaint.setStrokeWidth(mHeartPaintWidth);
        mRingPaint.setStyle(Paint.Style.STROKE);
        mRingAnimPaint = new Paint(mRingPaint);
        mRingAnimPaint.setColor(Color.WHITE);
        //初始化心跳曲线
        mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);

        mCententPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        mCententPaint.setColor(Color.BLACK);

        mCententPaint.setStrokeWidth(3);
    }
    /**
     * canvas抗锯齿开启需要
     * */
    private DrawFilter mDrawFilter;
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        x = w / 2;
        y = h / 2;
        mRadius = w / 2 - mHeartPaintWidth * 3; //因为制定了Paint的宽度，因此计算半径需要减去这个
        mRectf = new RectF(x - mRadius, y - mRadius, x + mRadius, y + mRadius);
    }
    public float rotate = 0;
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.setDrawFilter(mDrawFilter);//在canvas上抗锯齿
        //由于drawArc默认从x轴开始画，因此需要将画布旋转或者绘制角度旋转，2种方案
        //int level = canvas.save();
        //先绘制竖线
        canvas.drawLine(x,mRectf.top + 30, x  , mRectf.top - 60,mCententPaint);
        //绘制中心线
        canvas.drawLine(x,y-80,x,y + 80,mCententPaint);

        canvas.drawLine(x - 80,y,x + 80, y ,mCententPaint);
        canvas.rotate(rotate, x, y);// 旋转的时候一定要指明中心

        for (int i = 0; i < 360; i += 3) {
            canvas.drawArc(mRectf, i, 1, false, mRingPaint);
        }
        mCententPaint.setTextSize(50);
        mCententPaint.setColor(Color.RED);
        canvas.drawText("北",x,mRectf.top + mHeartPaintWidth  + 50,mCententPaint);
        mCententPaint.setColor(Color.BLACK);
        canvas.rotate(90, x, y);// 旋转的时候一定要指明中心
        canvas.drawText("东",x,mRectf.top + mHeartPaintWidth + 50,mCententPaint);
        canvas.rotate(90, x, y);// 旋转的时候一定要指明中心
        canvas.drawText("南",x,mRectf.top + mHeartPaintWidth + 50,mCententPaint);
        canvas.rotate(90, x, y);// 旋转的时候一定要指明中心
        canvas.drawText("西",x,mRectf.top + mHeartPaintWidth + 50,mCententPaint);
        canvas.rotate(90, x, y);// 旋转的时候一定要指明中心
        mCententPaint.setTextSize(30);
        for (int i = 0; i < 360; i += 3) {
            if(i == 0|| i == 30 || i ==60 || i ==90 || i ==120 || i == 150 || i == 180 || i == 210 || i == 240 || i == 270 || i == 300 || i == 330 || i== 0){
                canvas.drawText(""+i,x,mRectf.top - mHeartPaintWidth ,mCententPaint);
                canvas.rotate(30, x, y);// 旋转的时候一定要指明中心
            }
        }
    }
}

绘制完了之后我们是不是要写界面代码了。这里xml 布局就不贴出来了。后面可以直接去github 去看看
主界面主要的作用就是对sensor监听。并返回方向的角度。然后对上面定义的view进行方向赋值。然后通知view 重绘就可以了

	@Override
    protected void onResume() {
        /**
         *  获取方向传感器
         *  通过SensorManager对象获取相应的Sensor类型的对象
         */
        Sensor sensor = manager.getDefaultSensor(Sensor.TYPE_ORIENTATION);
        //应用在前台时候注册监听器
        manager.registerListener(listener, sensor,
                SensorManager.SENSOR_DELAY_GAME);
        super.onResume();
    }

    @Override
    protected void onPause() {
        //应用不在前台时候销毁掉监听器
        manager.unregisterListener(listener);
        super.onPause();
    }

    private final class SensorListener implements SensorEventListener {

        private float predegree = 0;

        @Override
        public void onSensorChanged(SensorEvent event) {
            /**
             *  values[0]: x-axis 方向加速度
             　  values[1]: y-axis 方向加速度
             　　values[2]: z-axis 方向加速度
             */
            float degree = event.values[0];// 存放了方向值
            predegree=-degree;
            mCompassDegreeTxt.setText(""+((int)degree)+"°");
            mCompassDirectionTxt.setText(formatPredegree(degree));
            directionView.rotate = predegree;

            directionView.postInvalidate();
        }

        @Override
        public void onAccuracyChanged(Sensor sensor, int accuracy) {

        }

    }