Android中RecyclerView布局代替GridView实现类似支付宝的界面
单纯使用gridview
通用的两种给gridview 添加分割线的方法;http://*.com/questions/7132030/android-gridview-draw-dividers
给gridview 添加分割线,也就是实现网格布局,不清楚谷歌为什么没有给gridview 添加一个类似 listview 的divider 属性,因此就需要我们自己去添加分割线,
目前两种方法,第一种是 利用gridview 的 android:horizontalspacing="1dp"与android:verticalspacing="1dp" 属性 利用gridview的背景色 与itemview的背景色 ,之间的间隙作为分割线。
利用 spacing 属性 的分割线效果图:
这种方法可以实现 网格分割线,但是缺点是 item 没有的地方,其显示的是背景色,不太美观。
这是我们参考支付宝:支付宝做的是,默认是整行的,不够正行, 添加空白的item。
如图:
没有也放上一个item 占位,可以解决背景问题。
第二种方法 就是使用背景选择器 selector。
相比较第一种方法,第二种方法实现起来更简单,但是也有一个小瑕疵,因为item 使用了selector, 那么相邻两个item 之间的分割线相当于两条,会加深。
如图所示:
仔细看图,在线充值的右边的线,与上面的线比起来 很不明显。
recyclerview
下面开始讲今天的主角。抛开顶部的轮播图不说,下面那个表格大家首先想到的可能就是gridview。但是,既然我们已经有了全新且强大的recyclerview控件,就可以在绝大多数场景下抛弃listview或者gridview了。而对于recyclerview替代listview,相信大家已经有了一定的了解并在项目中有了一定的应用,但是对于recyclerview替代gridview的使用,可能大家还些许陌生。接下来在这篇文章中就为大家详细讲述如何使用recyclerview一个控件,搞定类似这样子的首页。
集成recyclerview
首先,如果你还从未试用过recyclerview,当然是要在build.gradle中做出如下配置从而集成recyclerview
compile 'com.android.support:recyclerview-v7:22.2.0'
布局
现在我们在mainactivity简单的实现我们想要的效果,那么在activity_main.xml只要有一个recyclerview就可以了。如下:
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity"> <android.support.v7.widget.recyclerview android:id="@+id/home_rv" android:layout_width="match_parent" android:layout_height="match_parent" /> </relativelayout>
adapter
首先,我们先来看一下adapter是如何编写的
public class myadapter extends recyclerview.adapter { //先定义两个itemviewtype,0代表头,1代表表格中间的部分 private static final int item_view_type_header = 0; private static final int item_view_type_item = 1; //数据源 private list<string> datalist; //构造函数 public myadapter(list<string> datalist) { this.datalist = datalist; } /** * 判断当前position是否处于第一个 * @param position * @return */ public boolean isheader(int position) { return position == 0; } @override public recyclerview.viewholder oncreateviewholder(viewgroup viewgroup, int viewtype) { //在oncreateviewholder方法中,我们要根据不同的viewtype来返回不同的viewholder if (viewtype == item_view_type_header) { //对于header,我们应该返回填充有header对应布局文件的viewholder(再次我们返回的都是一个布局文件,请根据不同的需求做相应的改动) return new headerviewholder(layoutinflater.from(viewgroup.getcontext()).inflate(r.layout.layout_item, null)); } else { //对于body中的item,我们也返回所对应的viewholder return new bodyviewholder(layoutinflater.from(viewgroup.getcontext()).inflate(r.layout.layout_item, null)); } } @override public void onbindviewholder(recyclerview.viewholder viewholder, int position) { if (isheader(position)) { //大家在这里面处理头,这里只有一个textview,大家可以根据自己的逻辑做修改 ((headerviewholder)viewholder).gettextview().settext("this is the header!!"); }else { //其他条目中的逻辑在此 ((bodyviewholder) viewholder).gettextview().settext(datalist.get(position - 1)); } } /** * 总条目数量是数据源数量+1,因为我们有个header * @return */ @override public int getitemcount() { return datalist.size() + 1; } /** * * 复用getitemviewtype方法,根据位置返回相应的viewtype * @param position * @return */ @override public int getitemviewtype(int position) { //如果是0,就是头,否则则是其他的item return isheader(position) ? item_view_type_header : item_view_type_item; } /** * 给头部专用的viewholder,大家根据需求自行修改 */ public class headerviewholder extends recyclerview.viewholder { private textview textview; public headerviewholder(view itemview) { super(itemview); textview = (textview) itemview.findviewbyid(r.id.item_tv); } public textview gettextview() { return textview; } } /** * 给gridview中的条目用的viewholder,里面只有一个textview */ public class bodyviewholder extends recyclerview.viewholder { private textview textview; public bodyviewholder(view itemview) { super(itemview); textview = (textview) itemview.findviewbyid(r.id.item_tv); } public textview gettextview() { return textview; } } }
item布局文件:
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <textview android:id="@+id/item_tv" android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" /> </relativelayout>
activity
接下来再来看看我们在activity中的代码如何编写
public class mainactivity extends activity { @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); //找到recyclerview控件 recyclerview home_rv = (recyclerview) findviewbyid(r.id.home_rv); //做一些假数据 list<string> datalist = new arraylist<>(); datalist.add("第一个"); datalist.add("第二个"); datalist.add("第三个"); datalist.add("第四个"); datalist.add("第五个"); datalist.add("第六个"); datalist.add("第七个"); datalist.add("第八个"); datalist.add("第九个"); //实例化adapter并且给recyclerview设上 final myadapter adapter = new myadapter(datalist); home_rv.setadapter(adapter); // 如果我们想要一个gridview形式的recyclerview,那么在layoutmanager上我们就要使用gridlayoutmanager // 实例化一个gridlayoutmanager,列数为3 final gridlayoutmanager layoutmanager = new gridlayoutmanager(this, 3); //调用以下方法让recyclerview的第一个条目仅为1列 layoutmanager.setspansizelookup(new gridlayoutmanager.spansizelookup() { @override public int getspansize(int position) { //如果位置是0,那么这个条目将占用spancount()这么多的列数,再此也就是3 //而如果不是0,则说明不是header,就占用1列即可 return adapter.isheader(position) ? layoutmanager.getspancount() : 1; } }); //把layoutmanager设置给recyclerview home_rv.setlayoutmanager(layoutmanager); } }
好了,接下来我们运行一下看看效果吧!
好了,那么和效果图还有一点点差距,就是画线!
线应该怎么画?在布局文件中画?貌似可行,但如果每个条目的边框都不规律怎么办?画一堆布局文件吗?太麻烦了。
所以在此就要用的recyclerview中了另外一大特性:itemdecoration。
在此我们写了一个名为myitemdecoration的类,如下:
public class myitemdecoration extends recyclerview.itemdecoration { /** * 复写ondraw方法,从而达到在每隔条目的被绘制之前(或之后),让他先帮我们画上去几根线吧 * * @param c * @param parent * @param state */ @override public void ondraw(canvas c, recyclerview parent, recyclerview.state state) { //先初始化一个paint来简单指定一下canvas的颜色,就黑的吧! paint paint = new paint(); paint.setcolor(parent.getcontext().getresources().getcolor(android.r.color.black)); //获得recyclerview中总条目数量 int childcount = parent.getchildcount(); //遍历一下 for (int i = 0; i < childcount; i++) { if (i == 0) { //如果是第一个条目,那么我们就不画边框了 continue; } //获得子view,也就是一个条目的view,准备给他画上边框 view childview = parent.getchildat(i); //先获得子view的长宽,以及在屏幕上的位置,方便我们得到边框的具体坐标 float x = childview.getx(); float y = childview.gety(); int width = childview.getwidth(); int height = childview.getheight(); //根据这些点画条目的四周的线 c.drawline(x, y, x + width, y, paint); c.drawline(x, y, x, y + height, paint); c.drawline(x + width, y, x + width, y + height, paint); c.drawline(x, y + height, x + width, y + height, paint); //当然了,这里大家肯定是要根据自己不同的设计稿进行画线,或者画一些其他的东西,都可以在这里搞,非常方便 } super.ondraw(c, parent, state); } }
回到我们的activity中,加如下代码即可:
//把我们自定义的itemdecoration设置给recyclerview home_rv.additemdecoration(new myitemdecoration());
最后再看看是什么效果:
当然,尽管最终效果有一些瑕疵,但是相信大家已经都基本明白了其中的思路,应用在自己的项目中的时候必然也要做出相应的调整。
最后,不得不说,现在recyclerview已经基本具备了替代listview和gridview的能力,在我们的项目知学中,大多数的列表都已经是以recyclerview控件的形式作为展现。本文仅仅是从一个非常入门级的角度去讲解如何使用recyclerview,而对于这个效果而言,还有很多种其他的实现方式,尤其是对于adapter中的处理,也希望能够与大家多多交流。谢谢!