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编辑器,真的很方便

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

一号专车接口文件

  • 2015-05-15 11:26
  • 1.45MB
  • 下载

igrimaceV8.0.0 IG 一键新机 陌陌 Uber优步打针 平安易贷 滴滴 一号专车 饿了么 ios8 V8 ZTN(插件安装方式)

iGrimaceV8.0.0安装步骤 1、系统必须为 IOS8版本,手机需要越狱 2、打开cydia 选开发者 下面点管理 软件源 点右上角编辑 添加源 apt.178.com 搜索 apple Fi...

Android开发:仿照网易新闻跟帖页面的点赞动画效果

我想看到网易新闻的点赞效果,应该都觉得很绚丽吧,我也是深深的被迷住了,刚好今天又时间,就试着自己也做了一个点赞的效果,效果图如下: 其实该效果没有什么技术含量,就是简单的animat...

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

昨天我们一起学习了一下一号店(IOS)商品分类效果编写(仿一号店APP商品分类效果开发IOS)今天我们一起来看一下Android版本上面的实现。其实我们的实现的具体思路差不多。总体先搞定一级分类,然后...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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