Android 仿高德地图可拉伸的BottomSheet

项目上要用到类似高德地图搜索结果后的结果展示的可拉伸控件。


由于没有找到合适的软件,制作的效果有点差,将就看下。

自己的效果:

虽然说效果没有高德的好(就是在下滑的时候不能准确折叠到中间),但是基本满足了项目的需要。如果各位大神有更好的方法,欢迎留言提供方法。

刚开始以为这是抽屉效果(slidingdrawer),结果发现这个类已经被谷歌抛弃,且content也不能滑动,得自定义控件实现。但是我的自定义控件水平不高,苦思一天还是写不出来,只能各种查类似的效果,终于找到了比较接近的CoordinatorLayout。

关于CoordinatorLayout — 协调布局 这个新控件我了解的不多,等我找找资料后再写一篇文章。我就先说说效果的实现。
布局文件:

最主要的一个布局就是id为design_bottom_sheet的布局,它设置了

的属性,将布局作为底部折叠纸片。

让这个BottomSheet不可以被手动滑动隐藏,设置为true则可以滑到屏幕最底部隐藏。

设置的是折叠状态时的高度,此时设置的折叠时的高度和子View的TextView的高度一样高,所以折叠时将显示TextView的内容。

id为design_bottom_sheet_bar的RelativeLayout是用来实现BottomSheet完全展开时的自定义顶部工具条。

上面这段设置是使design_bottom_sheet_bar的位置与design_bottom_sheet锚定,锚定在design_bottom_sheet的上方.

design_bottom_sheet设置的高度是充满父布局,在展开状态下我们需要其给design_bottom_sheet_bar留出位置,所以要修改一下design_bottom_sheet的高度,代码设置放在了onWindowFocusChanged()里。

BottomSheet 的状态回调有两个方法:onStateChanged:状态改变是我们要控制控件的显示与隐藏。onSlide:滑动时:当 bottomSheet.getTop() > coordinatorLayout.getHeight() /2这个节点设置design_bottom_sheet的高度是可行的,其他情况均出现问题。滑动时设置锚定条的移动距离,让其显示出来。

根据我的coordinatorLayout.getHeight() /2这个节点我手动测试发现,在bottomSheet.getTop() >2*coordinatorLayout.getHeight() /3时是折叠区间。coordinatorLayout.getHeight() /2 ~2 * coordinatorLayout.getHeight() /3是展示在中间的区间,其他情况展示在顶部。

好吧,我就这样实现了,好像是卡了一个Bug实现了。源码实在太难理清逻辑,有点遗憾没有完美解决下滑的时候不能准确折叠到中间(像高德的那种体验),欢迎各位大神提供此控件实现方法或者改进方法。以上属于自己理解,欢迎指正!
项目下载:https://github.com/GoldenStrawberry/MaterialDesignDemo

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2017年10月7日
下一篇 2017年10月8日

相关推荐