地图区域绘制 MVP 实践

最近在做一个地图区域绘制的一个需求,如下

  1. 在地图区域内戳点绘制范围
  2. 在点击初始点连成区域
  3. 绘制过程中可撤销,绘点过程中有提示文案展示
    ......

结合最近学习的 MVP 模式做了一个 demo
关于MVP 可以看之前这篇文章 http://www.jianshu.com/p/f6252719b3af

项目结构

  1. MainActivity 是初始化界面,没有逻辑,直接跳转到地图页面
  2. 在 base 中定义了 BasePresenter 和 BaseView
  3. MapContract 定义了 MVP 中 V 和 P 的接口
  4. MapActivity 为 View 的具体实现
  5. MapPresenter 为 P 的具体实现

base

public interface BasePresenter {

    void start();

}

public interface BaseView<T> {

    void setPresenter(T presenter);

}

View 和 Presenter 是互相持有的,在 baseVIew 中定义了setPresenter方法

BasePresenter 中的start方法通常是在 activity 或者 fragment 的 resume onstart中调用,来做一些数据和 view 的初始化

P 和 V 是如何关联上的

  1. 在 MapActivity 中新建了一个 Presenter
new MapPresenter(this);
  1. MapPresenter的构造函数中
    public MapPresenter(@NonNull MapContract.View mMapView) {
        this.mMapView = mMapView;
        mMapView.setPresenter(this);
    }

将 Presenter 中持有的 view 赋值,并调用 View 中的 setPresenter 方法,次方法中将 VIew 中持有的 Presenter 赋值

由此 P 和 V 关联起来了

如何运作

当收到用户的操作时,会触发 View 的一系列监听事件,这些事件的处理中并不会直接调用 Model 层的方法,而是调用 Presenter 来处理,P中持有 Moudle 和 View,P层修改Moudle ,并将结构反应到 View 上。Presenter 对 view 的修改也不是直接修改空间,而是只有一个 view 接口,通过这个接口来实现对 view 的操作

code

关联层(Presenter 和 view 的接口定义)

/**
 * Created by xuyushi on 16/4/22.
 */
public interface MapContract {
    interface View extends BaseView<Presenter> {
        Marker showFirstMarker(LatLng latLng);

        Marker showMarker(LatLng latLng);

        void removeMarker(Marker marker);

        Polyline showPolyline(LatLng latLngA, LatLng latLngB);

        void removePolyline(Polyline polyline);

        Polygon showPolygon(Iterable<LatLng> latLngs);

        void removePolygon(Polygon polygon);

        void editPolygon(Polygon polygon, Iterable<LatLng> latLngs);

        void showTipView(String mesg);

    }

    interface Presenter extends BasePresenter {
        int MODE_TOUCH_POINT = 0;
        int MODE_EDIT_POYGON = 1;

        int getDrawMode();

        void undo();

        void drawLineAndShowMarker(LatLng latLng);

        void showPolygon();

        void removeAllPolyline();

        void updatePolygon(Marker marker);

        boolean isFirstMarker(Marker marker);
    }
}

Mainactivity

public class MapActivity extends AppCompatActivity implements MapContract.View{

    public static final String TAG = "MapActivity";
    MapContract.Presenter mMapPresenter;

    private MapView mapView;
    private AMap aMap;
    private TextView tips;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.basicmap_activity);
        mapView = (MapView) findViewById(R.id.map);
        mapView.onCreate(savedInstanceState);// 此方法必须重写
        tips = (TextView) findViewById(R.id.tv_tips);
        new MapPresenter(this);
        init();
        initTouchEvent();
    }

    private void initTouchEvent() {
        //地图触摸事件
        aMap.setOnMapClickListener(new AMap.OnMapClickListener() {
            @Override
            public void onMapClick(LatLng latLng) {
                if (mMapPresenter.getDrawMode() == MapPresenter.MODE_TOUCH_POINT){
                    mMapPresenter.drawLineAndShowMarker(latLng);
                }
            }
        });

        //Marker 点击事件
        aMap.setOnMarkerClickListener(new AMap.OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(Marker marker) {
                if (mMapPresenter.isFirstMarker(marker)) {
                    //画多边形
                    mMapPresenter.removeAllPolyline();
                    mMapPresenter.showPolygon();
                    Log.e(TAG, "is first marker: ");
                }
                return false;
            }
        });

        //Marker 拖动
        aMap.setOnMarkerDragListener(new AMap.OnMarkerDragListener() {
            @Override
            public void onMarkerDragStart(Marker marker) {

            }

            @Override
            public void onMarkerDrag(Marker marker) {
                mMapPresenter.updatePolygon(marker);
            }

            @Override
            public void onMarkerDragEnd(Marker marker) {
                mMapPresenter.updatePolygon(marker);
            }
        });

    }

    /**
     * 初始化AMap对象
     */
    private void init() {
        if (aMap == null) {
            aMap = mapView.getMap();

        }

    }

    /**
     * 方法必须重写
     */
    @Override
    protected void onResume() {
        super.onResume();
        mapView.onResume();
        mMapPresenter.start();
    }


    /**
     * 方法必须重写
     */
    @Override
    protected void onPause() {
        super.onPause();
        mapView.onPause();
    }

    /**
     * 方法必须重写
     */
    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mapView.onSaveInstanceState(outState);
    }

    /**
     * 方法必须重写
     */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }



    /**
     * View 接口实现
     */
    @Override
    public Marker showFirstMarker(LatLng latLng) {
        //文字显示标注,可以设置显示内容,位置,字体大小颜色,背景色旋转角度,Z值等
        TextOptions textOptions = new TextOptions().position(latLng)
                .backgroundColor(Color.RED).fontSize(30).rotate(20).align(Text.ALIGN_CENTER_HORIZONTAL, Text.ALIGN_CENTER_VERTICAL)
                .zIndex(1.f).typeface(Typeface.DEFAULT_BOLD);
        aMap.addText(textOptions);

        return aMap.addMarker(new MarkerOptions().anchor(0.5f, 0.5f)
                .icon(BitmapDescriptorFactory.fromResource(R.mipmap.ic_launcher))
                .position(latLng).title("title")
                .snippet("message").draggable(true));
    }

    @Override
    public Marker showMarker(LatLng latLng) {
        //文字显示标注,可以设置显示内容,位置,字体大小颜色,背景色旋转角度,Z值等
        TextOptions textOptions = new TextOptions().position(latLng)
//                .text("Text").fontColor(Color.BLACK)
                .backgroundColor(Color.RED).fontSize(30).rotate(20).align(Text.ALIGN_CENTER_HORIZONTAL, Text.ALIGN_CENTER_VERTICAL)
                .zIndex(1.f).typeface(Typeface.DEFAULT_BOLD);
        aMap.addText(textOptions);

        return aMap.addMarker(new MarkerOptions().anchor(0.5f, 0.5f)
                .position(latLng).title("title")
                .snippet("message").draggable(true));

    }

    @Override
    public void removeMarker(Marker marker) {
        marker.remove();
        aMap.postInvalidate();
    }

    @Override
    public Polyline showPolyline(LatLng latLngA, LatLng latLngB) {
        PolylineOptions mPolylineOptions = new PolylineOptions(); //draw line
        mPolylineOptions.add(latLngA);
        mPolylineOptions.add(latLngB);
        mPolylineOptions.color(Color.RED);
        //返回Polyline
        return aMap.addPolyline(mPolylineOptions);
    }

    @Override
    public void removePolyline(Polyline polyline) {
        polyline.remove();
        aMap.postInvalidate();
    }

    @Override
    public Polygon showPolygon(Iterable<LatLng>latLngs) {
        PolygonOptions polygonOptions = new PolygonOptions();
        polygonOptions.addAll(latLngs).fillColor(0x99CCCCCC);
        return aMap.addPolygon(polygonOptions);
    }

    @Override
    public void removePolygon(Polygon polygon) {
        polygon.remove();
    }

    @Override
    public void editPolygon(Polygon polygon, Iterable<LatLng> latLngs) {
        //Collection to list
        List<LatLng> list = new ArrayList<>();
        for (LatLng item : latLngs) {
            list.add(item);
        }
        polygon.setPoints(list);

    }

    @Override
    public void showTipView(String mesg) {
        tips.setText(mesg);
    }

    @Override
    public void setPresenter(MapContract.Presenter presenter) {
        mMapPresenter = presenter;
    }

    public void undo(View view) {
        Log.d(TAG, "undo:");
        mMapPresenter.undo();
    }
}

Presenter

public class MapPresenter implements MapContract.Presenter {
    public static final String TAG = "gaode_map";
    public int mMode = MODE_TOUCH_POINT;
    private MapContract.View mMapView;
    private int pointNumber;
    List<LatLng> mLatLngs = new ArrayList<>();         //多边形的点坐标集
    List<Polyline> polylines = new ArrayList<>();      //所有线段
    Map<Marker, LatLng> mMapLatLngMarker = new HashMap<>();
    private Marker mFirstMarker;
    private Polygon polygon;
    private Marker preMarker;

    public MapPresenter(@NonNull MapContract.View mMapView) {
        this.mMapView = mMapView;
        mMapView.setPresenter(this);
    }

    @Override
    public int getDrawMode() {
        return mMode;
    }

    @Override
    public void undo() {
        if (getDrawMode() == MODE_TOUCH_POINT) {
            //删除marker
            if (mMapLatLngMarker.size() > 0) {
                //改变 marker 中点坐标
                Iterator<Marker> itr = mMapLatLngMarker.keySet().iterator();
                Marker deleteItem = null;
                while (itr.hasNext()) {
                    Marker item = itr.next();
                    if (item.getPosition().equals(mLatLngs.get(mLatLngs.size()-1))) {
                        //map 中存的点是准确的
                        LatLng latLng = mMapLatLngMarker.get(item);
                        for (LatLng polygonLatLng : mLatLngs) {
                            if (latLng.equals(polygonLatLng)) {
                                Log.e(TAG, "find: success~!!!!!!!!!!!!!");
                                deleteItem = item;
                            }
                        }
                    }
                }
                if (deleteItem != null) {
                    mMapView.removeMarker(deleteItem);
                    mMapLatLngMarker.remove(deleteItem);
                }
                //删除保存的点
                mLatLngs.remove(mLatLngs.size() - 1);
                pointNumber--;
            }
            //移除线段
            if (polylines.size() > 0) {
                mMapView.removePolyline(polylines.get(polylines.size()- 1));
                polylines.remove(polylines.size() - 1);
            }
        }

    }

    @Override
    public void drawLineAndShowMarker(LatLng latLng) {
        mLatLngs.add(latLng);
        if (pointNumber == 0) {
            mFirstMarker = mMapView.showFirstMarker(latLng);
            mMapLatLngMarker.put(mFirstMarker, latLng);
        } else {
            preMarker = mMapView.showMarker(latLng);
            mMapLatLngMarker.put(preMarker, latLng);
            Polyline polyline = mMapView.showPolyline(getPreLatLng(), latLng);
            polylines.add(polyline);
            mMapView.showTipView("点击初始点结束绘制");
        }
        pointNumber++;
    }

    private LatLng getPreLatLng() {
        return mLatLngs.get(mLatLngs.size() - 2);
    }

    @Override
    public void showPolygon() {
        polygon = mMapView.showPolygon(mLatLngs);
        mMode = MODE_EDIT_POYGON;
        mMapView.showTipView("长按拖动节点");


    }

    @Override
    public void removeAllPolyline() {
        for (Polyline polyline : polylines) {
            polyline.remove();
        }
    }

    @Override
    public void updatePolygon(Marker marker) {
        //改变 marker 中点坐标
        Iterator<Marker> itr = mMapLatLngMarker.keySet().iterator();
        while (itr.hasNext()) {
            Marker item = itr.next();
            if (item.equals(marker)) {
                //map 中存的点是准确的
                LatLng latLng = mMapLatLngMarker.get(item);
                for (LatLng polygonLatLng : mLatLngs) {
                    if (latLng.equals(polygonLatLng)) {
                        Log.e(TAG, "find: success~!!!!!!!!!!!!!");
                        mMapLatLngMarker.put(item, marker.getPosition());
                        mLatLngs.set(mLatLngs.indexOf(polygonLatLng), marker.getPosition());
                    }
                }
            }
        }

        mMapView.editPolygon(polygon, mLatLngs);
    }

    @Override
    public boolean isFirstMarker(Marker marker) {
        return marker.equals(mFirstMarker);
    }

    @Override
    public void start() {
        Log.e(TAG, "presenter start: ");
    }
}

MVP后续的思考

  1. view Presenter 的复用?
  2. M V P 三层解耦的必要性?
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容