Android 自定义地图控件 可手指拉伸放大缩小拖动，指定坐标加点加线

之前公司 项目有用到 gps定位 ，以及 工厂地图 布置 点 ，但是 无法使用百度地图之类的 第三方地图SDK ，只给一个工厂平面图，就要实现gps定位，一直 地图上布点。

gps 坐标转换到 图片上 的 算法 由  老大 搞定了，我这边 负责 UI 的 显示。

这是 demo 地址： 点击打开链接

这是 效果图：

首先 整个 控件 布局 是一个相对布局，右上角 放置了 放大，原始，缩小 按钮，实现对应功能

显示 地图图片 的 控件 也是一个 自定义控件 ，继承ImageView  里面 重写 了onDraw 方法 用来 画地图 的 线

/**
 * 自定义 地图 地图
 * Created by Administrator on 2016/6/30.
 */
public class MyBaseMapAndLines extends ImageView {

    // 线 坐标
    public ArrayList<MapLineCoord> mapLineCoords;

    public MyBaseMapAndLines(Context context) {
        super(context);
        mapLineCoords = new ArrayList<>();
    }

    public MyBaseMapAndLines(Context context, AttributeSet attrs) {
        super(context, attrs);
        mapLineCoords = new ArrayList<>();
    }

    public ArrayList<MapLineCoord> getMapLineCoords() {
        return mapLineCoords;
    }

    public int getLineSize() {
        return mapLineCoords.size();
    }

    public void clearLines() {
        mapLineCoords.clear();
    }

    public void addLines(ArrayList<MapLineCoord> mapLineCoords) {
        this.mapLineCoords.addAll(mapLineCoords);
    }

    public MapLineCoord getLine(int index) {
        return mapLineCoords.get(index);
    }

    public void addLine(MapLineCoord mapLineCoord) {
        mapLineCoords.add(mapLineCoord);
        this.invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mapLineCoords == null || mapLineCoords.size() <= 0)
            return;
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth((float) 5.0);
        canvas.drawCircle(mapLineCoords.get(0).getViewX(), mapLineCoords.get(0).getViewY(), 10, paint);
        canvas.drawCircle(mapLineCoords.get(mapLineCoords.size() - 1).getViewX(),
                mapLineCoords.get(mapLineCoords.size() - 1).getViewY(), 10, paint);
        // 划线
        for (int i = 1; i < mapLineCoords.size(); i++) {
            canvas.drawLine(mapLineCoords.get(i - 1).getViewX(),
                    mapLineCoords.get(i - 1).getViewY(),
                    mapLineCoords.get(i).getViewX(), mapLineCoords.get(i).getViewY(), paint);
        }
    }

    /**
     * 地图 线 拐点 坐标
     */
    public class MapLineCoord {
        private float firstX;
        private float firstY;

        private float viewX;
        private float viewY;

        public MapLineCoord() {
        }

        public MapLineCoord(float firstX, float firstY, float viewX, float viewY) {
            this.firstX = firstX;
            this.firstY = firstY;
            this.viewX = viewX;
            this.viewY = viewY;
        }

        public float getFirstX() {
            return firstX;
        }

        public void setFirstX(float firstX) {
            this.firstX = firstX;
        }

        public float getFirstY() {
            return firstY;
        }

        public void setFirstY(float firstY) {
            this.firstY = firstY;
        }

        public float getViewX() {
            return viewX;
        }

        public void setViewX(float viewX) {
            this.viewX = viewX;
        }

        public float getViewY() {
            return viewY;
        }

        public void setViewY(float viewY) {
            this.viewY = viewY;
        }

        @Override
        public String toString() {
            return "MapLineCoord{" +
                    "firstX=" + firstX +
                    ", firstY=" + firstY +
                    ", viewX=" + viewX +
                    ", viewY=" + viewY +
                    '}';
        }
    }
}

地图上的 点 也是 一个自定义控件 继承LinearLayout  里面 放了一个 ImageView 显示地图点 的 图片，一个TextView 显示 地图点的 名称

因为 服务器 那边的 地图点的 坐标 是获取 图片左上角的坐标 作为 定义的 ，所以 我这里 对于地图点的 坐标 计算 也是 计算至ImageView的 左上角

要这样计算，就必须 先对这个 地图点的 ViewGroup 所有 进行 测量 宽高 

 /**
     * 测量 地图点 的 边界
     */
    private void measureBorder() {
        int height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        int width = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);

        this.pointIcon.measure(width, height);
        this.pointTitle.measure(width, height);
        this.measure(width, height);
<span style="white-space:pre">	</span>

<span style="white-space:pre">	</span>// 是否 显示 地图点 的 标题
        if (!isTitleShow) {
            pointTitle.setVisibility(INVISIBLE);
        } else {
            pointTitle.setVisibility(VISIBLE);
        }


        this.borderLeft = (this.getMeasuredWidth() - this.pointIcon.getMeasuredWidth()) / 2;
        this.borderTop = (this.getMeasuredHeight() - this.pointIcon.getMeasuredHeight() - this.pointTitle.getMeasuredHeight());

        Log.i("testss", this.borderLeft + "fffffff=========" + this.borderTop);
    }

然后 在 设置 显示位置 的 时候 ，调用 这两个方法

 public void setFirstXShow(float x) {
        x -= borderLeft;
        setX(x);
    }

    public void setFirstYShow(float y) {
        y -= borderTop;
        setY(y);
    }

整个 地图 控件  放大缩小，拖动 的 效果 ，是对其 设置 了 setOnTouchListener  ,在 其中 对 按下，抬起，双指触摸，移动事件 进行 记录 ，然后 移动或修改 地图图片，点，线

的 位置 大小 ，其中地图的长按时间 是通过 判断 按下到 抬起时 时间大于2s 并且 位置变化小于 5 个像素 ，如果 自定义监听器 不为空，则 调用其 回调方法

 /**
     * 地图 移动 放大 监听
     */
    private class MyTouchListener implements OnTouchListener {
        /**
         * 记录是拖拉照片模式还是放大缩小照片模式
         */
        private int mode = 0;// 初始状态
        /**
         * 拖拉照片模式
         */
        private static final int MODE_DRAG = 1;
        /**
         * 放大缩小照片模式
         */
        private static final int MODE_ZOOM = 2;

        /**
         * 用于记录开始时候的坐标位置
         */
        private PointF startPoint = new PointF();
        /**
         * 用于记录拖拉图片移动的坐标位置
         */
        private Matrix matrix = new Matrix();
        /**
         * 用于记录图片要进行拖拉时候的坐标位置
         */
        private Matrix currentMatrix = new Matrix();

        /**
         * 两个手指的开始距离
         */
        private float startDis;
        /**
         * 两个手指的中间点
         */
        private PointF midPoint;


        @Override
        public boolean onTouch(View v, MotionEvent event) {
            /** 通过与运算保留最后八位 MotionEvent.ACTION_MASK = 255 */
            switch (event.getAction() & MotionEvent.ACTION_MASK) {
                // 手指压下屏幕
                case MotionEvent.ACTION_DOWN:
                    mode = MODE_DRAG;
                    // 记录ImageView当前的移动位置
                    currentMatrix.set(myBaseMapAndLines.getImageMatrix());
                    startPoint.set(event.getX(), event.getY());

                    // 当 手指 按下时 初始化 长按标志
                    longPressTag = true;
                    downTime = System.currentTimeMillis();

//                Log.i("test", "=onTouch=x==" + event.getX() + "===y==" + event.getY());
                    setFirstDownX(event.getX());
                    setFirstDownY(event.getY());
                    break;
                // 手指在屏幕上移动，改事件会被不断触发
                case MotionEvent.ACTION_MOVE:
                    // 拖拉图片
                    if (mode == MODE_DRAG) {
                        float dx = event.getX() - startPoint.x; // 得到x轴的移动距离
                        float dy = event.getY() - startPoint.y; // 得到x轴的移动距离
                        // 在没有移动之前的位置上进行移动
                        matrix.set(currentMatrix);
                        matrix.postTranslate(dx, dy);
                        // 如果 手指移动 距离不超过 5 个像素点 的 视为 没有移动
                        float offset = (float) Math.sqrt(dx * dx + dy * dy);
                        longPressTag = offset < 5 ? true : false;

                    }

                    // 放大缩小图片
                    else if (mode == MODE_ZOOM) {
                        float endDis = distance(event);// 结束距离
                        if (endDis > 10f) { // 两个手指并拢在一起的时候像素大于10
                            float scale = endDis / startDis;// 得到缩放倍数
                            matrix.set(currentMatrix);
                            matrix.postScale(scale, scale, midPoint.x, midPoint.y);
                        }
                    }

                    break;
                // 手指离开屏幕
                case MotionEvent.ACTION_UP:
                    //如果 按下 抬起 时间 大于 2s 则是 长按 事件
                    longPressTag = System.currentTimeMillis() - downTime > 2000 ? true : false;
                    // 当触点离开屏幕，但是屏幕上还有触点(手指)
                case MotionEvent.ACTION_POINTER_UP:
                    mode = 0;
                    break;
                // 当屏幕上已经有触点(手指)，再有一个触点压下屏幕
                case MotionEvent.ACTION_POINTER_DOWN:
                    longPressTag = false;

                    mode = MODE_ZOOM;
                    /** 计算两个手指间的距离 */
                    startDis = distance(event);
                    /** 计算两个手指间的中间点 */
                    if (startDis > 10f) { // 两个手指并拢在一起的时候像素大于10
                        midPoint = mid(event);
                        //记录当前ImageView的缩放倍数
                        currentMatrix.set(myBaseMapAndLines.getImageMatrix());
                    }
                    break;
            }

            /**
             * 如果 此次 触摸事件  是  移动，放大事件
             * 则 改变 地图 和 坐标点的位置
             */
            switch (event.getAction() & MotionEvent.ACTION_MASK) {
                case MotionEvent.ACTION_MOVE:
                    // 移动 地图
                    myBaseMapAndLines.setImageMatrix(matrix);

                    float[] matrixValues = new float[9];
                    matrix.getValues(matrixValues);
                    // 地图原点移动
                    originalPointView.setX((float) (0 * matrixValues[0] + matrixValues[2]));
                    originalPointView.setY((float) (0 * matrixValues[4] + matrixValues[5]));


                    Log.i("testss", originalPointView.getX() + "===originalPointView====" + originalPointView.getY());

                    firstScale = matrixValues[0];

                    // 移动 点
                    for (int i = 0; i < mapPoints.size(); i++) {
                        double scaleX = mapPoints.get(i).getFirstX() * matrixValues[0];
                        double scaleY = mapPoints.get(i).getFirstY() * matrixValues[4];
                        mapPoints.get(i).setFirstXShow((float) (scaleX + matrixValues[2]));
                        mapPoints.get(i).setFirstYShow((float) (scaleY + matrixValues[5]));
                    }

                    // 移动 线
                    for (int i = 0; i < myBaseMapAndLines.getLineSize(); i++) {
                        float v1 = myBaseMapAndLines.getLine(i).getFirstX() * matrixValues[0] + matrixValues[2];
                        float v2 = myBaseMapAndLines.getLine(i).getFirstY() * matrixValues[4] + matrixValues[5];
                        myBaseMapAndLines.getLine(i).setViewX(v1);
                        myBaseMapAndLines.getLine(i).setViewY(v2);
                    }
                    myBaseMapAndLines.invalidate();


                    /**
                     *如果 外层为ScrollView 此句代码是解决
                     * 地图的移动 和 ScrollView 的滚动冲突的
                     * 当触摸事件在地图范围内时，ScrollView 滚动事件无法响应
                     * 当触摸事件在 地图范围外时，ScrollView可以滚动
                     */
                    getParent().requestDisallowInterceptTouchEvent(true);
                    break;
            }

            // 如果 设置 了 长按 监听 则 传递 事件
            // 否则 自己 消费 该 事件
            if (getMapOnLongClickListener() != null) {
                return false;
            }
            return true;
        }


        /**
         * 计算两个手指间的距离
         */
        private float distance(MotionEvent event) {
            float dx = event.getX(1) - event.getX(0);
            float dy = event.getY(1) - event.getY(0);
            /** 使用勾股定理返回两点之间的距离 */
            return (float) Math.sqrt(dx * dx + dy * dy);
        }

        /**
         * 计算两个手指间的中间点
         */
        private PointF mid(MotionEvent event) {
            float midX = (event.getX(1) + event.getX(0)) / 2;
            float midY = (event.getY(1) + event.getY(0)) / 2;
            return new PointF(midX, midY);
        }
    }