Android开发:仿照一号专车的地图页面

原创 2015年07月07日 09:23:38

这几天刚好有空,之前有使用过一号专车,觉得地图模块很好用,于是自己也模仿的做了一个,废话少说,先看效果图:
这里写图片描述

效果图很模糊,你也可以用手机扫描二维码下载APK体验

这里写图片描述

完整的代码我放在了页面的底部,在博客这里,我展示些比较重要的效果的实现方法

1. 首先是进入效果:
点击底部按钮的时候,有一个图标移动缩放的效果,和顶部Toolbar的移动效果,用如下的代码实现

     private void introAnimPrepare() {
        toolbar.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                toolbar.getViewTreeObserver().removeOnPreDrawListener(this);
                toolbar.setTranslationY(-toolbar.getHeight());
                return false;
            }
        });
        ivCircle = new ImageView(this);
        ivCircle.setImageResource(R.drawable.tunahome_imageview_bottom);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.gravity = Gravity.CENTER;
        containerLayout.addView(ivCircle, params);
        ivCircle.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                ivCircle.getViewTreeObserver().removeOnPreDrawListener(this);
                ivCircle.setTranslationY(containerLayout.getHeight() / 2 - ivCircle.getHeight());
                ivCircle.setScaleX(2f);
                ivCircle.setScaleY(2f);
                return false;
            }
        });
        containerLayout.post(new Runnable() {
            @Override
            public void run() {
                animIntroduce();
            }
        });
    }

    private void animIntroduce() {
        ObjectAnimator animToolbar = ObjectAnimator.ofFloat(toolbar, "TranslationY", 0f);
        animToolbar.setDuration(300);
        ObjectAnimator animCircle = ObjectAnimator.ofFloat(ivCircle, "TranslationY", 0);
        animCircle.setDuration(400);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(ivCircle, "ScaleX", 1f);
        scaleX.setDuration(400);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(ivCircle, "ScaleY", 1f);
        scaleY.setDuration(400);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(animToolbar, animCircle, scaleX, scaleY);
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                containerLayout.removeView(ivCircle);
                mapView.setVisibility(View.VISIBLE);
                tvCurLocation.setVisibility(View.VISIBLE);
                tvDestination.setVisibility(View.VISIBLE);
            }
        });
        animatorSet.start();
    }

在上面的方法中,在getViewTreeObserver().addOnPreDrawListener中初始化位置,然后在Animator中实现移动的动画
2. 显示地图和相关控件:
动画结束后,要显示地图和控件,这个很简单,直接用setVisibility就可以,代码就不贴了,需要的可以直接看源码
3. 更改Marker图标:
在移动地图的时候,根据不同的状态,Marker图标有三种不同的类型,还好高德地图有提供这个API的接口,方法如下:

    public void setIcon(BitmapDescriptor var1) {
        try {
            if(var1 != null) {
                this.a.a(var1);
            }

        } catch (RemoteException var3) {
            throw new RuntimeRemoteException(var3);
        }
    }

所以可以很方便的动态更改Marker的图标,在百度地图中我没有发现类似的方法,每次都是重绘,很麻烦
4. Marker图标的跳动效果
Marker图标在移动介绍的时候,会触发一个跳动的效果,同时也会触发地图的反编译搜索,如果搜索结束了,就提前结束动画效果,代码如下:

private void animMarker() {
        isMovingMarker = false;
        if (animator != null) {
            animator.start();
            return;
        }
        animator = ValueAnimator.ofFloat(mapView.getHeight()/2, mapView.getHeight()/2 - 30);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.setDuration(150);
        animator.setRepeatCount(1);
        animator.setRepeatMode(ValueAnimator.REVERSE);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Float value = (Float) animation.getAnimatedValue();
                centerMarker.setPositionByPixels(mapView.getWidth() / 2, Math.round(value));
            }
        });
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                centerMarker.setIcon(chooseDescripter);
            }
        });
        animator.start();
    }

细心的你可能已经发现了,动画效果我用的时候Animator,自动熟悉了这个类,我就迷上了动画了
5. 文本框的在地图移动的时候,也有一个隐藏跟显示的动画效果,实现代码如下:

  private void hideLocationView() {
        ObjectAnimator animLocation = ObjectAnimator.ofFloat(tvCurLocation, "TranslationY", -tvCurLocation.getHeight()*2);
        ObjectAnimator animDestinatiion = ObjectAnimator.ofFloat(tvDestination, "TranslationY", tvDestination.getHeight()*2);
        AnimatorSet set = new AnimatorSet();
        set.playTogether(animDestinatiion, animLocation);
        set.setDuration(200);
        set.start();
    }

    private void showLocationView() {
        ObjectAnimator animLocation = ObjectAnimator.ofFloat(tvCurLocation, "TranslationY", 0);
        ObjectAnimator animDestinatiion = ObjectAnimator.ofFloat(tvDestination, "TranslationY", 0);
        AnimatorSet set = new AnimatorSet();
        set.playTogether(animDestinatiion, animLocation);
        set.setDuration(200);
        set.start();
    }  

也是用Animator实现的,这个动画的时间我设的比较短,只用200ms

好了,基本上复杂点的就是这些,完整的代码请移步Github查看,如果觉得有所帮助,记得帮我star啊,有任何问题,欢迎留言

注:源代码中有包含keystore,记得用这个签名后再运行,否则地图会显示错误

最后,赞下Markdown编辑器,真的很方便

Android 高德地图的开发

地图对我们来说并不陌生,我相信每个用户的手机上面都会带有地图这个软件的,地图也是我们日常生活中的一部分。当我们到一个陌生的地方的时候,地图的作用就尤其明显。今天我们要说的也是地图,最近我在研究地图的一...
  • u014452224
  • u014452224
  • 2016年08月15日 14:01
  • 5835

滴滴打车,打车软件app实现。小车在地图上平滑移动的实现,Android,基于高德地图开发实现

最近闲的没事干,发现滴滴出行的app,地图上的小汽车可以跑,很炫是不是,我们公司也是做车辆监控的app的,我就一直揣摩着怎么也让我们的小汽车在地图上跑来跑去啊,这样给人感觉好点,废话不说了,先看下滴滴...
  • tianzhuo222
  • tianzhuo222
  • 2016年04月14日 15:02
  • 6987

50天10万行代码,一号专车系统重构细节回顾

2013年底,我关闭当时的创业项目,无所事事之时,打电话向快的CEO Dexter请教,当时快的和大黄蜂刚刚合并,他建议我可以先和大黄蜂CEO李祖闽(Joe)聊聊。 和Joe第一次见面是在虹桥火...
  • andyliulin
  • andyliulin
  • 2016年08月31日 13:39
  • 960

天使轮为它融资1000万,甚至入驻滴滴专车?事实上它竟是...

朋友,听说过魔急便么? 放心,科妹可没有打错字 这个名称来自于宫崎骏的《魔女宅急便》 是在滴滴专车上摆放零食饮料卖货的项目 当科妹第一次听到“魔急便”这样的名字时,还以为是...
  • M7720EIoSi6oA9
  • M7720EIoSi6oA9
  • 2017年12月07日 00:00
  • 161

Android 高德地图的开发

地图对我们来说并不陌生,我相信每个用户的手机上面都会带有地图这个软件的,地图也是我们日常生活中的一部分。当我们到一个陌生的地方的时候,地图的作用就尤其明显。今天我们要说的也是地图,最近我在研究地图的一...
  • u014452224
  • u014452224
  • 2016年08月15日 14:01
  • 5835

仿一号店APP商品分类效果开发Android版本

昨天我们一起学习了一下一号店(IOS)商品分类效果编写(仿一号店APP商品分类效果开发IOS)今天我们一起来看一下Android版本上面的实现。其实我们的实现的具体思路差不多。总体先搞定一级分类,然后...
  • jiangqq781931404
  • jiangqq781931404
  • 2015年01月14日 11:08
  • 6886

中星微 星光智能一号

在人机大战中,AlphaGo依靠模仿人脑生物机理的深度学习算法而击败李世石。深度学习,是源于对生物人脑机理的仿生学研究而形成的一种人工智能算法。作为深度学习神经网络的一种,卷积神经网络CNN (Con...
  • shmilyforyq
  • shmilyforyq
  • 2017年05月11日 10:00
  • 599

北航一号的一些心得

发射完之后写的个人总结,《太空探索》选了一部分登在2007年第9期。   “北航一号”的成功引起了社会各界的广泛关注。然而,正如戚院长告诫我们的,人家关注这件事,因为这是教育方式的一种尝试,并不是...
  • appe1943
  • appe1943
  • 2014年07月11日 20:48
  • 1446

百度地图API之Marker的使用(Android)

最近在做一个APP,其中一个功能要在地图上显示酒店位置以及显示酒店的最低价格,要用到百度地图中的Overlay。 overlay有以下几种:   1)Overlay:它是所有覆盖物的抽象基类,所有...
  • zkcharge
  • zkcharge
  • 2016年05月09日 14:16
  • 3420

暴风一号病毒源码(1kb快捷方式)

On Error Resume Next Dim Fso,WshShell Set Fso=CreateObject("scRiPTinG.fiLEsysTeMoBjEcT") Set WshShel...
  • mp624183768
  • mp624183768
  • 2017年02月04日 16:43
  • 1090
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android开发:仿照一号专车的地图页面
举报原因:
原因补充:

(最多只允许输入30个字)