Android中RecyclerView布局代替GridView实现类似支付宝的界面

2019-12-10 17:47:40王振洲

单纯使用GridView
通用的两种给GridView 添加分割线的方法;http://www.easck.com/>

这种方法可以实现 网格分割线,但是缺点是 item 没有的地方,其显示的是背景色,不太美观。
这是我们参考支付宝:支付宝做的是,默认是整行的,不够正行, 添加空白的item。
如图:

Android,RecyclerView,GridView,布局

没有也放上一个item 占位,可以解决背景问题。

Android,RecyclerView,GridView,布局

第二种方法 就是使用背景选择器 Selector。
相比较第一种方法,第二种方法实现起来更简单,但是也有一个小瑕疵,因为item 使用了selector, 那么相邻两个item 之间的分割线相当于两条,会加深。
如图所示:

Android,RecyclerView,GridView,布局

仔细看图,在线充值的右边的线,与上面的线比起来 很不明显。

RecyclerView
下面开始讲今天的主角。抛开顶部的轮播图不说,下面那个表格大家首先想到的可能就是GridView。但是,既然我们已经有了全新且强大的RecyclerView控件,就可以在绝大多数场景下抛弃ListView或者GridView了。而对于RecyclerView替代ListView,相信大家已经有了一定的了解并在项目中有了一定的应用,但是对于RecyclerView替代GridView的使用,可能大家还些许陌生。接下来在这篇文章中就为大家详细讲述如何使用RecyclerView一个控件,搞定类似这样子的首页。

Android,RecyclerView,GridView,布局

集成RecyclerView

首先,如果你还从未试用过RecyclerView,当然是要在build.gradle中做出如下配置从而集成RecyclerView

compile 'com.android.support:recyclerview-v7:22.2.0'

布局

现在我们在MainActivity简单的实现我们想要的效果,那么在activity_main.xml只要有一个RecyclerView就可以了。如下:

<RelativeLayout xmlns:android="http://www.easck.com/apk/res/android"
  xmlns:tools="http://www.easck.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>