滑动监听点亮高德地图，解锁更多交互新姿势

2023-01-07 17:34:51

滑动监听，点亮高德地图，解锁更多交互新姿势

滑动交互的新玩法：BottomSheetBehavior

BottomSheetBehavior是一个功能强大的工具，可以为布局添加一个可滑动的面板，该面板可以从底部向上滑动显示，也可以从顶部向下滑动隐藏。利用BottomSheetBehavior，我们可以为高德地图实现首页效果，让地图随着滑动而平滑地从顶部进入或退出视野。

布局准备：为BottomSheetBehavior搭好舞台

首先，在布局中添加一个FrameLayout作为容器，并将高德地图和一个代表底部面板的LinearLayout添加到容器中。LinearLayout的内容可以根据需要定制，可以添加文本、图像或其他控件。

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.amap.api.maps.MapView
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#ffffff"
        android:elevation="4dp">

        <!-- 内容 -->

    </LinearLayout>

</FrameLayout>

BottomSheetBehavior：让面板动起来

接下来，将BottomSheetBehavior应用到底部面板上。在代码中，可以使用BottomSheetBehavior.from(bottomSheet)方法获取BottomSheetBehavior实例，并设置各种属性来控制面板的行为。

BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);

// 设置面板的初始状态
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

// 设置面板的滑动范围
bottomSheetBehavior.setPeekHeight(peekHeight);

// 设置面板的滑动阻尼
bottomSheetBehavior.setSkipCollapsed(true);

// 设置面板的滑动监听器
bottomSheetBehavior.addBottomSheetCallback(new BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        // 根据面板状态进行相应处理
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        // 根据面板滑动偏移量进行相应处理
    }
});

实现高德地图首页效果：一览无余

现在，我们可以利用BottomSheetBehavior来实现高德地图的首页效果了。当用户向下滑动地图时，底部面板将从底部向上滑动显示，遮挡地图的顶部部分；当用户向上滑动地图时，底部面板将从顶部向下滑动隐藏，露出地图的顶部部分。

map.setOnMapScrollListener(new AMap.OnMapScrollListener() {
    @Override
    public void onMapScroll(float distanceX, float distanceY) {
        // 根据地图滑动距离，控制底部面板的显示和隐藏
        if (distanceY > 0) {
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        } else if (distanceY < 0) {
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }
    }
});