Android中recyclerView底部添加透明渐变效果

 更新时间:2018年04月21日 16:34:16   作者:Dynamic_2018  
这篇文章主要给大家介绍了关于Android中recyclerView如何实现底部添加透明渐变效果的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

前言

最近实现一个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里面怎么是怎么画出来的,有知道的大兄弟麻烦告知一下。

通过图层合并添加透明效果

参考Android实现直播聊天区域顶部渐变效果

 /**
 * 利用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的图层合并,最开始显示异常的原因。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

最新评论