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

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

效果图很模糊，你也可以用手机扫描二维码下载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，记得用这个签名后再运行，否则地图会显示错误