前言:
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定位到咱们的程序里。觉得有帮助,可以关注啊、收藏啊、订阅啊、留言啊……之类的。