• 自定义地图开发(一)


    前言:

    oh my lord,憋了好久了。纷纷扰扰的闹剧算是结束了,关于这个项目的任务也暂停一段时间。趁现在,好好的把地图模块整理一下。

    要做的项目中,有一个功能是校园地图。但是不希望用现有的地图SDK来展示,故此,我只好自己写一个简单的模块来展示一张平面图。

    先放一张效果图吧,当时匆忙,很多地方未完善,但最终的效果应该是这个样子的:

    至于地图上那个图片,是用来做定位时的准星的……不要在意这些细节。


    正文

    好的,现在,咱们的教程,正式开始:

    本章教程中,我需要一个组件,可以用来监听不规则形状的地图元件,并且可以在点击他的时候做一些响应。

    为了简化开发步骤,我做了以下简化地图:

    地图素材--->  地图--->...美观什么的不要在意。

    第一张图中,花花绿绿的当做地图背景(1000*1000),后两个不规则的当做地图元件。拼起来,做成后面的地图。


    1.那么第一个问题出现了:我的屏幕是480*800,如何展示一张1000*1000的图呢?

    在实验过程中,我们发现,无论layout_width怎么设置,系统都会将其强制转换为屏幕大小。这个问题,我头疼了好久。最后终于发现,问题的答案很简单~

    1     @Override
    2     protected void onCreate(Bundle savedInstanceState) {
    3         this.getWindow().setLayout(2000, 2000);//关键代码
    4         super.onCreate(savedInstanceState);
    5         setContentView(R.layout.activity_main);
    6     }

    既然屏幕太小,把屏幕值调大些就好了。啊!从此天高任鸟飞,一报憋死人之仇。我心里大大快乐,得意洋洋的将屏幕大小调成了2000*2000,再也不担心View被缩水啦~

    接下来,我们将地图数据填写到XML文件中。


    2.卓克,填写地图数据时,如何快速的知道地图元件在地图上的位置呢?

    首先,打开PS,加载图形。以下图为例,如果我们想知道第一个图层(正方形黑块)的坐标和大小。

    1:选中第一个图层,使其变为高亮状态(如下图的蓝色)。

    2:按Ctrl+T。

    3:按F8打开信息窗口。这时可以看到,坐标和宽高都显示出来了。

       

    另外,在XML文件中设置位置的时候,通常一些超出屏幕的imageView看不到设置效果。

    为了更好的实时看到效果,我们可以这样设置:

    瞧到没,换个超大分辨率的来展示XML就好了~


    3.卓克,地图数据填完了,也展示了出来,可是屏幕大小该是多少还是多少,地图显示不全啊!

    那好,咱想个办法,让咱的地图可以动起来。……OnTouchListener,即拖图功能。

    具体的实现,待会的源码里面有,从网上搜索“android开发 拖图”也有一大堆教程,在此不做赘述,只将实现原理简单一说:

    实现原理,就是通过监听手指(触点)落下的位置、移动的位置来计算要让图片偏移的位置,然后用view.layout(l,t,r,b)方法让地图移动到指定位置。

    我写过一个简单的拖图类,有兴趣的也可以下载下来,参考一下。


    4,好了,你已经成功的将地图放进了程序里,并且可以自由拖动了,可是我们马上发现一个问题,当更新一个textView、显示/隐藏一个imageView的时候,地图完全乱了!

    why! damn it! WTF!

    不要悲伤,不要心急,答案让我告诉你……这个时候,我们需要用到一个方法,就是ViewGroup中的onLayout!

    干嘛用的?就是固定子元件用的!

    网上这么多好教程,不推荐给大家太可惜了:Android的onLayout、layout方法讲解

    嘿嘿......谁敢说我懒!pia飞!

    相信看了以上的博客,关于onLayout和layout,以及自定义ViewGroup都有所了解了。


    5.这样的话,监听有冲突呀!甚至什么时候是点击,什么时候是拖动该怎么判断呢?

    首先呢,判断拖动还是点击,可以这样来做:

     1     private boolean shake = false, click = false;// 手指抖动修正
     2     @Override
     3     public boolean onTouch(View v, MotionEvent event) {
     4         switch (event.getAction()) {
     5         case MotionEvent.ACTION_DOWN:
     6             click = true;// 抖动校正
     7             // 记录触点按下时的位置
     8             baseTX = event.getRawX();
     9             baseTY = event.getRawY();
    10             break;
    11         case MotionEvent.ACTION_MOVE:
    12             // 计算当前手指位置与初始位置间的偏移量
    13             float sx = event.getRawX() - baseTX;
    14             float sy = event.getRawY() - baseTY;
    15 
    16             // 判断是否是抖动
    17             shake = (Math.abs(sx) < shakeRange) && (Math.abs(sy) < shakeRange);// 注意用绝对值
    18             if (shake) {// 抖动校正
    19                 click = true;//抖动
    20             } else {
    21                 click = false;//拖动
    22             }
    23             break;
    24         case MotionEvent.ACTION_UP:
    25             if (click) {
    26                 click = false;
    27                 //代码运行到这里,说明是点击动作。
    28                 //可以在这里面写一些处理方法
    29             }
    30             break;
    31         default:
    32             break;
    33         }
    34 
    35         return true;
    36     }

    唉,唯一的一大段代码献给了这么简单的一个小功能。算了,不管这些,继续探讨我们的思路。


    6.可是,卓克,这样,咱也不知道什么时候点击了哪个元件呀!

    ok,接下来咱讲讲怎么根据从onTouch中获取的坐标,判断点击没点到有颜色的区域。

    首先,我们将这个坐标转化为相对于元件的坐标。

    1     trueX = x - this.getChildAt(i).getLeft();
    2     trueY = y - this.getChildAt(i).getTop();

    得到相对于元件的坐标后,使用以下方法判断该点是否透明

    1     pixel = bitmaps.get(i).getPixel(trueX, trueY);
    2     if (pixel != 0) {//点击点不透明
    3         //do something useful
    4         break;
    5     }

    判断出点击到哪个图片,我们就可以对点击到的元件为所欲为咯~比如setAlpha、setVistbility之类的……

    好的,目前为止所以的关键思路和代码都有了。自己动手,丰衣足食,让我们看看最终实现的效果吧:

        

    半透明的地图元件在点击后变成了完全透明,而且无论是拖动还是在新线程中更新button的text布局丝毫不乱~


    源码内附有详细的注释和使用方法(详细的有点过分……),敬请点击下载

    好滴,这一章就到这吧。

    下一章,将会添加百度地图lbs定位到咱们的程序里。觉得有帮助,可以关注啊、收藏啊、订阅啊、留言啊……之类的。

  • 相关阅读:
    BAT 批处理脚本教程
    javascript定时器
    使用命令行打开文件夹并显示
    用cmd加密文件夹
    烟波钓叟歌概述讲解
    奇门遁甲的起源
    八卦基本知识
    word2vec和word embedding有什么区别?
    Privoxy shadowscocks代理
    Elasticsearch源码分析—线程池(十一) ——就是从队列里处理请求
  • 原文地址:https://www.cnblogs.com/coderzhuoke/p/3772872.html
Copyright © 2020-2023  润新知