当前位置: 移动技术网 > IT编程>移动开发>Android > RecyclerView实现常见的列表菜单

RecyclerView实现常见的列表菜单

2019年07月24日  | 移动技术网IT编程  | 我要评论

kislive,热血无赖d3d11.dll,北京电影院排片表

在很多地方我们都会用到纵向列表样式的菜单,比如微信首页的我、发现页面,微博的首页的我页面,qq的动态页面等等等等,大多数的应用中都会存在这样的页面。我们怎样实现这种页面比较好呢?

布局方案

完成这样的页面,常见的布局方案有:
1. 用scrollview+linearlayout很容易的暴力布局出来,但是这样得到的布局太固定了,如果条目多一点,加载起来很耗时。
2. 用listview来实现,这种方案比方案一要好上不少,起码数据多点的时候,加载时不会太耗时。但是分割线和中间空白在要求差异化的时候,不太好绘制,用view的话又觉得大材小用。
3. 用recyclerview来实现。recyclerview做纵向布局相比listview在很多方面也更灵活,无论是动画还是分割线上。

实现效果

左空白

无空白

微信样式

三个图片中分割线样式都是比较常见的。

使用起来当然是希望以最简单粗暴的方式去使用,比如:

mmenuview.setcutlineleftpadding(30);
mmenuview.setcutlinerightpadding(30);
mmenuview.setgaplinecolor(getresources().getcolor(r.color.theme_bg));

menubean h=new menubean();
//或者直接指定rootview
h.type=r.layout.head_user;
h.menu="美其名曰美";
h.info="天道有常,不为尧存,不为桀亡。";
mmenuview.addmenu(5,h);
mmenuview.addgap(30);
addmenu(11,r.mipmap.ic1,"菜单一","新年新气象",true);
addmenu(12,r.mipmap.ic2,"菜单二","",false);
addmenu(13,r.mipmap.ic3,"菜单三","发现更好的自己",false);
mmenuview.addgap(30);
addmenu(14,r.mipmap.ic4,"菜单四","",true);
addmenu(15,r.mipmap.ic5,"菜单五","",true);
mmenuview.addgap(30);
addmenu(16,r.mipmap.ic6,"菜单六","",true);
addmenu(17,r.mipmap.ic7,"菜单七","",false);
addmenu(18,r.mipmap.ic8,"菜单八","开心才是最重要的",true);

具体实现

实现这样的效果,如果不考虑分割线的话,那么稍微用过recyclerview的应该都能显示这样的功能,所以重点还是在分割线上了。
recyclerview有一个增加分割线的方法additemdecoration,当然,这个方法并不是只能用来增加分割线。类似微信中通讯录按照abcd顺序排列,并分组同样可以用这个方法来实现。
直接贴上自定义的分割线的代码,在代码中解释:

class menudecoration extends recyclerview.itemdecoration{

 //ondraw在每次重绘时都会调用,比如滑动recyclerview
 //gap线为从左到右的完整线条,在最开始的item上,最后的item下,或者空白区域的上下
 //cut线为两个紧密挨着的两个item之间的线条
 @override
 public void ondraw(canvas c, recyclerview parent, recyclerview.state state) {
  super.ondraw(c, parent, state);
  //当第一个item可见的时候,给第一个item顶上绘一条gap线
  //不用完整可见才绘制,考虑设置paddingtop+clippadding=false的情况
  if(mlayout.findfirstvisibleitemposition()==0){
   int bottom=parent.getchildat(0).gettop();
   paint.setcolor(gaplinecolor);
   c.drawline(parent.getleft(),bottom-halflineheight,parent.getright(),bottom-halflineheight,paint);
  }
  int count=parent.getchildcount();
  int gap;
  int end=mdata.size()-1;
  //所有可见的item下面画线
  for (int i=0;i<count;i++){
   final view child = parent.getchildat(i);
   int position=mlayout.getposition(child);
   gap=mgap.get(position);
   float starty=child.getbottom()+halflineheight;
   //view下面不存在gap且不是最好一个item的时候,绘制cut线,否则绘制gap线
   if(gap==0&&position!=end){ 
    //绘制cut线的左边线条
    if(leftpaddingline!=0){
     paint.setcolor(forelinecolor);
     c.drawline(parent.getleft(),starty,parent.getleft()+leftpaddingline,starty,paint);
    }
    //绘制cut线的右边线条
    if(rightpaddingline!=0){
     paint.setcolor(forelinecolor);
     c.drawline(parent.getright()-rightpaddingline,starty,parent.getright(),starty,paint);
    }
    //绘制cut线的中间线条
    paint.setcolor(cutlinecolor);
    c.drawline(parent.getleft()+leftpaddingline,starty,parent.getright()-rightpaddingline,starty,paint);
   }else{
    paint.setcolor(gaplinecolor);
    //绘制gap上面的一条线
    c.drawline(parent.getleft(),child.getbottom()+halflineheight,parent.getright(),child.getbottom()+halflineheight,paint);
    //如果不是最后一个item,绘制gap下面的一条线
    if(position<end){
     c.drawline(parent.getleft(),child.getbottom()+gap+halflineheight,parent.getright(),child.getbottom()+gap+halflineheight,paint);
    }
   }
  }
 }

 //在每个item加载时调用,用来判断设置每个item上下左边的空白区域,设置内容分别设置到outrect中
 @override
 public void getitemoffsets(rect outrect, view view, recyclerview parent, recyclerview.state state) {
  super.getitemoffsets(outrect, view, parent, state);
  int position=mlayout.getposition(view);
  //如果是第一个item,则设置上线条高度,否则不设置上线条高度
  //为每个item设置下边线条+gap(如果有的话,没有就为0)的高度
  //四个参数分别为左边空白区域,上方空白区域,右边空白区域,下方空白区域
  outrect.set(0, position != 0 ? 0 : (int)(halflineheight * 2+0.5f),0,(int)(halflineheight*2+0.5f)+mgap.get(position));
 }
}

这样我们就得到了一个用来绘制分割线的类了。在需要插入空白的地方addgap,并传入gap的高度:

public void addgap(int height){
 mgap.put(mdata.size()-1,height);
}

这样分割线和空白的问题就解决了。其他的就是recyclerview的简单使用了,为了使用方便,我们对recyclerview和其adapter简单封装一下,就能实现用addmenu的方式增加菜单项了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网