Android开发：仿照一号专车的map页面

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

这几天刚好有空，之前有使用过一号专车，觉得地图模块很好用，于是自己也模仿的做了一个，废话少说，先看效果图：
Android开发：仿照一号专车的map页面

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

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

首先是进入效果：
点击底部按钮的时候，有一个图标移动缩放的效果，和顶部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，记得用这个签名后再运行，否则地图会显示错误

Android开发：仿照一号专车的map页面

相关推荐