Android实现高德地图首页效果(上)
今天给大家带来一个非常熟悉的效果——高德首页
咱们话不多说,直接上效果图:

一般用上这个效果的都和地图有关,看上去还是挺酷眩的。但如果从来没了解过的同学要自己实现这个效果还是不容易的。值得庆幸的是,谷歌提供了现成的设计库:CoordinatorLayout结合CoordinatorLayout.Behavior。
首先,xml中根布局需要是CoordinatorLayout,其子view需要是一个可滑动的View,咱们这里直接使用NestedScrollView。
<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:设置初始显示高度
原来还可以半展开,咱们直接配置上全套效
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滑动监听下的效果实现,最终完成高德首页效果。
到此这篇关于Android实现高德地图首页效果(上)的文章就介绍到这了,更多相关Android实现高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Android开发中TextView 实现右上角跟随文本动态追加圆形红点
这篇文章主要介绍了android textview 右上角跟随文本动态追加圆形红点的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-11-11
Android WebView无法加载H5页面的常见问题和解决方法
Android WebView 是一种视图组件,使得 Android 应用能够显示网页内容,它基于 Chromium,具备现代浏览器的许多功能,包括支持 HTML5、CSS3 和 JavaScript,本文给大家介绍了Android WebView无法加载H5页面的常见问题和解决方法,需要的朋友可以参考下2025-03-03
浅谈Android onTouchEvent 与 onInterceptTouchEvent的区别详解
本篇文章小编为大家介绍,Android onTouchEvent 与 onInterceptTouchEvent的区别详解。需要的朋友参考下2013-04-04
Android中父View和子view的点击事件处理问题探讨
当屏幕中包含一个ViewGroup,而这个ViewGroup又包含一个子view,这个时候android系统如何处理Touch事件呢,接下来将对此问题进行深入了解,感兴趣的朋友可以了解参考下,或许对你有所帮助2013-01-01


最新评论