Android：实现高德地图首页效果（上）

大家好，我是似曾相识2022。不喜欢唱跳篮球，但对杰伦的Rap却情有独钟。

今天给大家带来一个非常熟悉的效果------高德首页

咱们话不多说，直接上效果图：

一般用上这个效果的都和地图有关，看上去还是挺酷眩的。但如果从来没了解过的同学要自己实现这个效果还是不容易的。值得庆幸的是，谷歌提供了现成的设计库：CoordinatorLayout 结合CoordinatorLayout.Behavior。

首先，xml 中根布局需要是CoordinatorLayout ，其子view需要是一个可滑动的View，咱们这里直接使用NestedScrollView。

ini 复制代码

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/shape_white"
    app:behavior_hideable="false"
    app:behavior_peekHeight="300dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
        <TextView
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:layout_gravity="center_horizontal"
           android:layout_marginTop="20dp"
           android:drawablePadding="10dp"
           android:lineSpacingExtra="20dp"
           android:gravity="center"
           android:text="我是内容\n我是内容\n我是内容\n我是内容\n我是内容\n我是内容\n我是内容\n                我是内容\n" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

这里需要注明下：

滑动控件中需要添加layout_behavior 属性，这里默认使用BottomSheetBehavior。
behavior_hideable：代表是否隐藏
behavior_peekHeight：代表滑动控件初始展示的高度

完成xml编写后直接运行得到如下效果：

看似好像差不多，但只能全部显示或者只显示我们设置的300dp高。其实，BottomSheetBehavior内部还提供了很多属性：

isFitToContents：是否填充整个内容
expandedOffset：展开后距离顶部的高度
halfExpandedRatio：半展开占比
setState：设置当前状态：隐藏、半展开、全展开等等
setPeekHeight：设置初始显示高度

原来还可以半展开，咱们直接配置上全套效果：

csharp 复制代码

bottomSheetBehavior?.let {
   it.isFitToContents = false //展开后开度填充Parent的高度
    //setFitToContents 为false时，展开后距离顶部的位置（Parent会以PaddingTop填充）
    it.expandedOffset =  ImmersionBar.getStatusBarHeight(this) + 40//顶部距离
    it.halfExpandedRatio = 0.5f //半展开占比
    it.isHideable = false
    it.setPeekHeight(150, true)//有动画
    it.setState(BottomSheetBehavior.STATE_HIDDEN) 
}

到这里其实已经可以满足基本要求了，整体动画体验也是不错的，非常流畅。但我们的目标还没有达到，在之前有写过监听滑动控件实现状态栏颜色切换，那么现在我们是否也可以利用类似的原理来实现滑动过程中的一些效果呢？

答案是肯定的。下篇咱们继续讲解BottomSheetBehavior滑动监听下的效果实现，最终完成高德首页效果。