关闭

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

标签: android代码
1603人阅读 评论(1) 收藏 举报
分类:

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

效果图很模糊,你也可以用手机扫描二维码下载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编辑器,真的很方便

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:93652次
    • 积分:1081
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:1篇
    • 译文:2篇
    • 评论:44条
    文章分类
    最新评论