先上项目链接:https://github.com/sunyangyang/MiddleExpansion
另附上视频:
之前看到飞书月视图在列表中点击,在上下两个item之间展开,想到ExpandableListView似乎有类似的操作,但是还无法满足需求,后来看到有个demo是recyclerview的展开效果,附上地址:
RecyclerView: Animate item resize
https://stackoverflow.com/questions/27446051/recyclerview-animate-item-resize
虽然依然无法满足需求,但是思路很清晰,点击的时候做属性动画,增加或减小expandview的大小来达到展开的效果;
当时看到这个demo的时候依然有几个问题需要解决:
1、目标实现是多列的,每一行下方会对应一个可横向滚动的布局,对应该行的列,每次点击不同的列,会切换下方滚动,而不会收起,只有点击了同一列才会收起
2、点击不同的行,先收起,再展开
3、目标实现item本身会滚动到顶部,将下一个item滚到到底部
4、每一行对应的滚动布局即ExpandView是静止不动的
带着这几个问题咱们来一一解决:
1、最初是设想使用GridLayoutManager来解决多列的问题,发现①下方滚动布局无法展开;②收起时,需要做多列的处理,于是想到了其实可以是一列,只是展示成多列的样子,于是我使用了两个textview放到了一行中(多列的话,可以使用RecyclerView),展示出来虽然是多列的样子,实际还是一列,下方则用viewpager来作为滚动布局,监听互动
2、既然是属性动画,那就可以监听动画的开始和结束,当点击不同行时,先进行关闭动画,在关闭动画结束时,进行展开动画,只需提前输入要展开的布局即可
3、我在外围使用了LinearLayout,当目标item展开时候,使用LinearLayout.LayoutParams的topMargin达到使item滚动到顶部的效果
4、ExpandView静止不动,其实也可以使用LinearLayout.LayoutParams的topMargin来解决,既然是相对静止,那设置成与Item本身不同的值即可,但是这时候引来了别的问题,ExpandView设置topMargin展示在Title的Z轴方向上方,这样就无法达成效果了,后来把Title的Z轴太高,并且设置透明背景即可
当然因为是demo,所以我并没有太在意代码样式和规范,各位可自行优化
项目链接:https://github.com/sunyangyang/MiddleExpansion ,如果有帮上忙的话,辛苦给个star