单纯使用GridView
通用的两种给GridView 添加分割线的方法;http://stackoverflow.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
1
|
compile 'com.android.support:recyclerview-v7:22.2.0'
|
布局
现在我们在MainActivity简单的实现我们想要的效果,那么在activity_main.xml只要有一个RecyclerView就可以了。如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
<
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是如何编写的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
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
//构造函数
public
MyAdapter(List
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布局文件:
1
2
3
4
5
6
7
8
9
10
11
12
|
<
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中的代码如何编写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
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
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的类,如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
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中,加如下代码即可:
1
2
|
//把我们自定义的ItemDecoration设置给RecyclerView
home_rv.addItemDecoration(
new
MyItemDecoration());
|
最后再看看是什么效果:
当然,尽管最终效果有一些瑕疵,但是相信大家已经都基本明白了其中的思路,应用在自己的项目中的时候必然也要做出相应的调整。
最后,不得不说,现在RecyclerView已经基本具备了替代ListView和GridView的能力,在我们的项目知学中,大多数的列表都已经是以RecyclerView控件的形式作为展现。本文仅仅是从一个非常入门级的角度去讲解如何使用RecyclerView,而对于这个效果而言,还有很多种其他的实现方式,尤其是对于Adapter中的处理,也希望能够与大家多多交流。谢谢!