作者:I王小一
话不多说先来个效果图看一下
实现的主要功能就是上拉抽屉(解决了子view的滑动冲突)+ 边缘动画 + 中间小球和seekbar效果动画。黄色部分就是上拉抽屉整体,绿色部分是横向的recyclerview。有个朋友说有阻尼效果就完美了 … 因为效果图没有阻尼效果,所以就没有去研究 - -!
先总结一下主要用到的技术
- ScrollView + NestedScrollingParent + NestedScrollingChild (主要做上拉抽屉解决内部和外部滑动冲突的)
- 自定义view,贝塞尔曲线、lineTo、drawCircle、drawPath等一些常用的
emmmm 好像就没了,其实主要就是自定义view画图而已啦,也没有很复杂。
顶部也可以放个图片,像酱紫
圆形中间也可以放图片和文字,上下滑动的时候内部图片和文字也会随之改变,其实原理都是一样的,一个会了你放啥都行,文章后面也会介绍。
效果就是酱紫
抽屉里我放的是LinearLayout,然后动态添加了多个可以横向滚动的RecyclerView,上滑下滑左滑右滑轻松无压力~~就是这么刺激
效果介绍完了,下面我们看一下如何实现的
一、 上滑抽屉+抽屉内部滚动 解决上下滚动冲突
- 1、首先你得先了解NestedScrollingParent & NestedScrollingChild
主要就是父视图和子视图关于滚动的监听和相互之间滚动信号的传递。 - 2、整理一下滚动的需求:
上滑
滚动父视图 - > 监听到顶之后 -> 滚动子视图
下滑
先滚动子视图 -> 子视图到顶后 -> 滚动父视图 - 3、整体布局
父布局里是需要有三个子布局的
// 父布局的滚动
<com.yoyo.topscrollview.scrollview.ScrollParentView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:orientation="vertical"
android:id="@+id/scrollParentView">
//需要上滑隐藏的部分
<RelativeLayout
android:id="@+id/rl_transparentTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
//上滑到顶需要吸附的部分
<RelativeLayout
android:id="@+id/center"
android:layout_width="match_parent"
android:layout_height="100dp">
<com.yoyo.topscrollview.centerview.WaveView
android:id="@+id/waveView"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.yoyo.topscrollview.centerview.CircleView