Android中recyclerView底部添加透明渐变效果
前言
最近实现一个recyclerView透明渐变的效果,遇到了一些坑,尝试了一些方法,这里记录一下。
效果图
图片在上面显示2列,文字在下面显示1列;底部要有个透明渐变的效果,直到完全看不到。
gridLayoutManager动态设置列数
大概是分两类,一类以图片为item 一行2个,一类以文字为item 一行一个。
这个第一反应是用viewType去区分图片类型,但是由于起初不知道gridLayout可以动态列数。就在上面两列,下面一列上为难起来了。
如果统一用一列吧,那就把两个image当成一个item,但是这样要自己去计算position,而且还要考虑奇数情况下最后一行只有一个图片的情况,这样要多写一些代码和逻辑。
后面发现可以通过改变spanSize来根据viewType来改变spanCount
//gridLayoutManager这里设置的spanCount=2 RecyclerView.LayoutManager manager = recyclerView.getLayoutManager(); if (manager instanceof GridLayoutManager) { final GridLayoutManager gridManager = ((GridLayoutManager) manager); gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { int type = getItemViewType(position); switch (type) { case TYPE_IMAGE: //占用1/2 表示2列 Log.d("tag", "列数2"); return 1; case TYPE_TEXT: //占用2/2 表示1列 Log.d("tag", "列数1"); return 2; default: Log.d("tag", "default列数2"); return 2; } } }); }
这样item的layout就很干净了,省去了一些麻烦。
recyclerView添加透明渐变
本来看着快搞完了,只差一个底部透明渐变了,结果就这一个效果高出了好多事情。
尝试了下面三种方法
- recycleView上面盖一层渐变的layout
- 原生的fadingEdeg,尝试通过反射去掉顶部阴影
- 图层合并
第一反应是再在recycleView上面盖一层渐变的layout。
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:angle="90" android:startColor="@color/color_FFFFFFFF" android:endColor="@color/color_00FFFFFF"> </gradient> </shape>
效果如下:
看起来“蒙”了一点哈
但是这样有个问题,就是layout使用这个shape的时候,是从开始到结束的渐变,没有grandient的平铺的效果,也就是只有最后一点是不透明的,不能实现最后是全不透明的。而且这个00FFFFFF其实不是真正意义上的不透明,而是白色的。
效果图底下有一截是全透明的,这个和效果图是有一定差距的,单纯用shape实现不了。尝试再在渐变下面添加一截全透明,就会惨不忍睹。
recyclerView的fadingEdge
组里的老司机提了可以用这个recyclerView原生自带的属性。
android:requiresFadingEdge="vertical" android:fadingEdgeLength="40dp"
运行起来看起来虽然和ui有点差距,但是好像可以接受了。
但是滑动的时候就出现问题了,这个自带fadingEdge不仅底部有,顶部也有,而且更坑的是,recyclerView没有提供取消顶部或者底部的接口。要么都不用,要么都要。
参考网上的一种方法,通过反射去设置顶部的edge宽高,从而使得顶部阴影不显示。
如何屏蔽RecyclerView单边滑动到头阴影(fadingEdge)
本来以为这样就ok了,谁知道这样设置竟然没有效果。
参考给的代码是这样设置的:
但是进api27的RecyclerView里面看,这个mTopGlow是EdgeEffect类型
mRecycleView.setOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); EdgeEffect mTopGlow = null; try { Field topGlow = mRecycleView.getClass().getDeclaredField("mTopGlow"); if (topGlow != null) { topGlow.setAccessible(true); mTopGlow = (EdgeEffect) topGlow.get(mRecycleView); } } catch (Exception e) { e.printStackTrace(); } if (mTopGlow != null) { //设置TOP顶部的矩形阴影大小(看注释和代码大概是这个作用) mTopGlow.setSize(0, 0); mTopGlow.finish(); } } });
这样大部分情况topGlow也是空的。查看代码,发现貌似只有这个方法才会给mTopGlow初始化
强行在获取topGlow对象前插入ensureTopGlow,使得它不为空:
public void makeTopGlowNoneNull() { final Class<?> clazz = RecyclerView.class; try { Method method = clazz.getDeclaredMethod("ensureTopGlow"); method.setAccessible(true); method.invoke(mRecycleView); } catch (NoSuchMethodException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } }
好了,经过上面的操作,mtopFlow取出来并且设置size(0,0)了,讲道理顶部阴影只有一个长0,宽0的矩形,就相当于没有了。
然而。。。
顶部阴影还是存在,而且去调试系统创建上下阴影的场景,也发现没有调用setSize就把阴影画出来了。之后又折腾了一阵子也没看出来这个阴影在recyclerView里面怎么是怎么画出来的,有知道的大兄弟麻烦告知一下。
通过图层合并添加透明效果
/** * 利用itemDecoration的onDraw和onDrawOver回调时机,进行两个图层的合并 * */ mRecycleView.addItemDecoration(new RecyclerView.ItemDecoration() { @SuppressLint("NewApi") @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); layerId = c.saveLayer(0.0f, 0.0f, (float) parent.getWidth(), (float) parent.getHeight(), mPaint); } @Override public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDrawOver(c, parent, state); if (linearGradient == null) { linearGradient = new LinearGradient(0f,parent.getHeight()-dpToPixel(54), 0f, parent.getHeight()-dpToPixel(15), new int[] {startColor,endColor },new float[]{0.2f,0.8f}, Shader.TileMode.CLAMP); } mPaint.setXfermode(xfermode); mPaint.setShader(linearGradient); c.drawRect(0f,parent.getHeight()-dpToPixel(54),parent.getWidth(),parent.getHeight(),mPaint); mPaint.setXfermode(null); c.restoreToCount(layerId); /** * 第一次进去的时候发现画出来的东西很奇怪 暂未找到原因 * 需要滑动之后才会正常显示,所以第一次进去的时候,手动调用一次刷新 */ if (recycleViewfirstComeInFlag == false) { recycleViewfirstComeInFlag = true; mRecycleView.postInvalidate(); } } @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); } }); }
原理参考文章里面也说了,借助ItemDecoration的draw和drawOver方法将两个图层进行合并,用DES_IN模式,使得SRC图层底部有了DES图层的透明渐变。
看起来抄就完事儿了的东西,我却搞了好一阵子。
参考demo就是一个recyclerView,我的是dialog里面装一个recyclerView。dialog显示在中间,因为对canvas.drawRec()参数坐标以及linearGradient的使用不太熟悉,搞出来一些事情。
关于LinearGrandient的参数
前面的xy用来标明方向的。如果是Y垂直方向的渐变,只需要(0,startY)到(0,endY),X就没啥作用,保证在Y上是垂直就行。但是这个startY和endY之前我就理解成绝对坐标了,以为手机左上角是坐标原点(0,0);
后面那个postion其实是对应各种color的位置吧,配合CLAMP模式(超出起点和终点外的默认是起点和终点的颜色向外延伸)还是挺好用的。
比起第一种直接用XML shape LienarGradient的startColor endColor要灵活很多。
然而view里面没有像motionEvent那样直接getRowX的方法,就通过百分比计算来找位置,又增加了复杂度。
实际情况比这些影响因素(同时还在调fadingEdge)要多,有点自找麻烦的感觉,一时陷入僵局。
倒着回去想,既然Google没有提供获取绝对左边的方法,而且linearGradient也是设给paint给canvas用,那里面的坐标应该是和cavas是一致的。而canvas在很多地方如view的draw里面也能拿到,那明显设置成相当于canvas的坐标要方便一些。
重新清醒一下头脑,把暂时该注释掉的注释掉,通过最小粒度的改变来调试效果(不然一下子改变很多,出来的效果会让人懵逼),最后总算是搞出来了。
然而事情并没有结束。。。。。
估计是我在dialog里面显示recyclerView的关系,通过图层合并后,会形成很奇怪的效果,必须要滑动一下才可以正常显示。如果recyclerView不是装在dialog里面就不会这样,只是单存的使用就不会这样。
很奇怪,不过这样可以看到SRC和DES图层 ==
暂时处理是第一次进来在drawOver完成后再postInvalidate一次,有知道原因的老哥帮忙提点一下!
if (recycleViewfirstComeInFlag == false) { recycleViewfirstComeInFlag = true; mRecycleView.postInvalidate(); }
最终效果
遗留的问题
- recyclerView fadingEdge的实现,不是flow.setSize,在调试代码时没看出来。
- dialog上添加recyclerView的图层合并,最开始显示异常的原因。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- android自定义进度条渐变色View的实例代码
- Android ScrollView滑动实现仿QQ空间标题栏渐变
- Android中Toolbar随着ScrollView滑动透明度渐变效果实现
- Android ListView滑动改变标题栏背景渐变效果
- Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果(8)
- Android自定义渐变式炫酷ListView下拉刷新动画
- Android Textview实现颜色渐变滚动效果
- Android自定义View实现渐变色进度条
- Android开发之ListView的head消失页面导航栏的渐变出现和隐藏
- Android自定义view渐变圆形动画
相关文章
Android神兵利器之Image Asset Studio的实现
这篇文章主要介绍了Android神兵利器之Image Asset Studio的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-06-06Android UI设计系列之自定义TextView属性实现带下划线的文本框(4)
这篇文章主要介绍了Android UI设计系列之自定义TextView属性实现带下划线的文本框,具有一定的实用性和参考价值,感兴趣的小伙伴们可以参考一下2016-06-06
最新评论