Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Android实现高德地图

Android实现高德地图首页效果(下)

作者：似曾相识2022

这篇文章主要为大家详细介绍了基于Android实现高德地图首页效果下篇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

书接上文Android实现高德地图首页效果（上），咱们讲到能不能通过滑动监听玩出新花样，答案是能。但这里不再是通过NestedScrollView添加滑动监听，而是交给咱们的BottomSheetBehavior。

由于BottomSheetBehavior是在xml中配置，那么我们要怎么拿到它呢？内部提供了from方法：

val bottomSheetBehavior = BottomSheetBehavior.from(scrollView)

拿到BottomSheetBehavior后通过addBottomSheetCallback添加监听。需要实现两个方法：

public abstract static class BottomSheetCallback {
  //newState 状态变化，也就是隐藏、展开、半展开等状态
  public abstract void onStateChanged(@NonNull View bottomSheet, @State int newState);
  //slideOffset 0-1的一个比例值  代表当前位置高度占比
  public abstract void onSlide(@NonNull View bottomSheet, float slideOffset);
}

看到这里，大家应该知道应该怎么操作了，主要还是集中在onSlide方法中拿到slideOffset值，根据该值的变化做对应效果展示。

首先，XML中添加搜索框等元素：

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/search_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:background="@null"
    android:drawableStart="@drawable/ic_search_grey"
    android:drawablePadding="8dp"
    android:gravity="center_vertical"
    android:hint="搜索关键词"
    android:imeOptions="actionSearch"
    android:maxLines="1"
    android:padding="10dp"
    android:singleLine="true"
    android:textColor="@color/text_color_1"
    android:textSize="15dp" />
 <TextView
        android:id="@+id/homeView"
        android:text="渐变"
        android:gravity="center"
        android:background="@drawable/shape_white"
        android:drawableLeft="@drawable/ic_chip_home"
        android:drawablePadding="6dp"
        android:layout_width="wrap_content"
        android:layout_height="30dp"/>

核心逻辑是需要获取当前位置高度，以此来判断是否到达咱们之前设置的半展开高度（注意这里的半展开设置的也是占比值）。当滑动距离大于半展开高度就需要将搜索框向上平移且渐变。同时搜索框下面的homeView也需要做渐变操作。反之，在收回的时候当距离小于半展开状态需要恢复各视图状态。

override fun onSlide(bottomSheet: View, slideOffset: Float) {
//在peekHeight位置以上 滑动(向上、向下) slideOffsetbottomSheet.getHeight() 是展开后的高度的比例
  if (slideOffset > 0) { 
     val height = bottomSheet.height
     distance = height * slideOffset
     //搜索栏反向位移
     val halfExpandedRatio = bottomSheetBehavior!!.halfExpandedRatio
     val halfHeight = halfExpandedRatio * height //中间状态的高度
     if (distance > halfHeight) {
         search_view?.translationY = -(distance - halfHeight)
         search_view?.alpha = 1 - slideOffset + halfExpandedRatio
         homeView?.alpha = 1 - slideOffset
        } else {
         search_view?.translationY = 0f
         search_view?.alpha = 1.0f
         homeView?.alpha = 1.0f
        }
        fabContainer?.alpha = 1 - slideOffset
  }
}

到此，咱们gif展示的效果基本就实现了。只要你的想象力够丰富，在这里玩出花都可以。

以上便是实现高德地图首页效果的全部内容，希望对大家有所帮助。

到此这篇关于Android实现高德地图首页效果(下)的文章就介绍到这了,更多相关Android实现高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文