本文实例实现一下 recyclerview，代码比较简单，适合初学者，如有错误，欢迎指出。
复习 listview
可以查看这篇文章深入浅出学习android listview基础，了解关于listview 的基础知识。
实现过程中需要复写baseadapter，主要是这4个方法
- public int getcount() ：适配器中数据集中 数据的个数，即listview需要显示的数据个数
- public object getitem(int position) ： 获取数据集中与指定索引对应的数据项
- public long getitemid(int position) ： 获取指定行对应的id
- public view getview(int position, view convertview, viewgroup parent) ：获取每一个item的显示内容
一般 listview 每一项都是相同的布局，若想各个项实现不同的布局，可复写 getitemviewtype和getviewtypecount实现
recyclerview 实现
1、xml 布局
下面是recyclerview中每一项的布局 layout下面的item_article_type_1.xml
|
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
|
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.cardview xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:id="@+id/cv_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableitembackground"
app:cardcornerradius="5dp"
app:cardelevation="5dp"
app:contentpadding="2dp">
<linearlayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.facebook.drawee.view.simpledraweeview
android:id="@+id/rcv_article_photo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centervertical="true"
fresco:actualimagescaletype="centerinside"
fresco:roundascircle="true"
fresco:roundingbordercolor="@color/lightslategray"
fresco:roundingborderwidth="1dp" />
<linearlayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<textview
android:id="@+id/rcv_article_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginleft="10dp"
android:layout_margintop="2dp"
android:gravity="center"
android:text="关于举办《经典音乐作品欣赏与人文审美》讲座的通知"
android:textcolor="@color/primary_text" />
<!-- 新闻 发布时间 来源 阅读次数-->
<linearlayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margintop="5dp"
android:gravity="center"
android:orientation="horizontal">
<textview
android:id="@+id/rcv_article_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginleft="10dp"
android:layout_marginright="2dp"
android:text="2015-01-09" />
<textview
android:id="@+id/rcv_article_source"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginleft="2dp"
android:layout_marginright="2dp"
android:text="科学研究院" />
<textview
android:id="@+id/rcv_article_readtimes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginleft="2dp"
android:layout_marginright="2dp"
android:text="1129次" />
</linearlayout>
<textview
android:id="@+id/rcv_article_preview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginleft="10dp"
android:layout_margintop="5dp"
android:ellipsize="end"
android:maxlines="2"
android:text="讲座主要内容：以中、西方音乐历史中经典音乐作品为基础，通过作曲家及作品创作背景、相关音乐文化史知识及音乐欣赏常识..." />
</linearlayout>
</linearlayout>
</android.support.v7.widget.cardview>
|
布局思路就是 cardview里面嵌入了一个linearlayout。图片部分用固定宽度100dp，文字部分利用android:layout_weight=”1”占据了其他部分。
textview利用android:gravity=”center”使得标题的文字居中。
linearlayout里面利用android:gravity=”center”使得“2015-01-09 科学研究院 1129次”居中，
新闻详情内容的textview利用
|
1
2
|
android:maxlines="2"
android:ellipsize="end"
|
将文章内容限定为2行，超出部分用省略号显示。
使用fresco这儿有个坑需要注意，请移步这篇文章
android 之 fresco 显示圆形图片 之坑
预览效果
新闻列表的 xml 文件，layout 文件夹下面的fragment_article.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.recyclerview
android:id="@+id/rcv_article"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</linearlayout>
|
2、adapter 实现
主要步骤是:
根据上面的 item_article_type_1.xml实现一个 class imageitemarticleviewholder extends recyclerview.viewholder
继承recyclerview.adapter ，class itemarticlelistadapter extends recyclerview.adapter <...>
重写三个方法
- public int getitemcount()
- public testadapter.imageitemarticleviewholder oncreateviewholder(viewgroup parent, int viewtype)
- public void onbindviewholder(imageitemarticleviewholder holder, int position)
|
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
|
public class itemarticleadapter extends recyclerview.adapter<itemarticleadapter.imageitemarticleviewholder> {
//新闻列表
private list<itemarticle> articlelist;
//context
private context context;
private layoutinflater mlayoutinflater;
public itemarticleadapter(context context,list<itemarticle> articlelist) {
this.context = context;
this.articlelist = articlelist;
mlayoutinflater = layoutinflater.from(context);
}
@override
public itemarticleadapter.imageitemarticleviewholder oncreateviewholder(viewgroup parent, int viewtype) {
view view = mlayoutinflater.inflate(
r.layout.item_article_type_1, parent, false);
return new imageitemarticleviewholder(view);
}
@override
public void onbindviewholder(imageitemarticleviewholder holder, int position) {
itemarticle article = articlelist.get(position);
holder.rcvarticlephoto.setimageuri(uri.parse(article.getimageurl()));
holder.rcvarticletitle.settext(article.gettitle());
holder.rcvarticledate.settext(article.getpublishdate());
holder.rcvarticlesource.settext(article.getsource());
//注意这个阅读次数是 int 类型，需要转化为 string 类型
holder.rcvarticlereadtimes.settext(article.getreadtimes()+"次");
holder.rcvarticlepreview.settext(article.getpreview());
}
@override
public int getitemcount() {
return articlelist.size();
}
class imageitemarticleviewholder extends recyclerview.viewholder {
@injectview(r.id.rcv_article_photo)
simpledraweeview rcvarticlephoto;
@injectview(r.id.rcv_article_title)
textview rcvarticletitle;
@injectview(r.id.rcv_article_date)
textview rcvarticledate;
@injectview(r.id.rcv_article_source)
textview rcvarticlesource;
@injectview(r.id.rcv_article_readtimes)
textview rcvarticlereadtimes;
@injectview(r.id.rcv_article_preview)
textview rcvarticlepreview;
public imageitemarticleviewholder(view itemview) {
super(itemview);
butterknife.inject(this, itemview);
}
}
}
|
3、新闻实体类 javabean
有新闻的 index，图片 url，标题，发布时间，来源，阅读次数，新闻内容预览
|
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
|
/**
* 新闻类，这是在 recycleview 使用的新闻 javabean
* 还有一个新闻详情javabean
*/
public class itemarticle {
private int index;
private string imageurl;
private string title;
private string publishdate;
private string source;
private int readtimes;
private string preview;
public itemarticle(int index, string imageurl, string title, string publishdate, string source, int readtimes, string preview) {
this.index = index;
this.imageurl = imageurl;
this.title = title;
this.publishdate = publishdate;
this.source = source;
this.readtimes = readtimes;
this.preview = preview;
}
public int getindex() {
return index;
}
public void setindex(int index) {
this.index = index;
}
public string getimageurl() {
return imageurl;
}
public void setimageurl(string imageurl) {
this.imageurl = imageurl;
}
public string gettitle() {
return title;
}
public void settitle(string title) {
this.title = title;
}
public string getpublishdate() {
return publishdate;
}
public void setpublishdate(string publishdate) {
this.publishdate = publishdate;
}
public string getsource() {
return source;
}
public void setsource(string source) {
this.source = source;
}
public int getreadtimes() {
return readtimes;
}
public void setreadtimes(int readtimes) {
this.readtimes = readtimes;
}
public string getpreview() {
return preview;
}
public void setpreview(string preview) {
this.preview = preview;
}
}
|
4、fragment 里面使用 recyclerview
思路就是开启一个异步线程，读取多条新闻，加入list itemarticlelist，由这个itemarticlelist构造itemarticleadapter，最后利用setadapter()方法给recyclerview加上适配器。
|
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
94
95
96
97
98
99
100
101
|
public class articlefragment extends fragment {
private static final string store_param = "param";
@injectview(r.id.rcv_article)
recyclerview rcvarticle;
private string mparam;
//新闻列表数据
private list<itemarticle> itemarticlelist = new arraylist<itemarticle>();
//获取 fragment 依赖的 activity，方便使用 context
private activity mact;
public static fragment newinstance(string param) {
articlefragment fragment = new articlefragment();
bundle args = new bundle();
args.putstring(store_param, param);
fragment.setarguments(args);
return fragment;
}
@override
public void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
if (getarguments() != null) {
mparam = getarguments().getstring(store_param);
}
}
@nullable
@override
public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) {
view view = inflater.inflate(r.layout.fragment_article, null);
log.i(store_param, "in storefragment");
mact = getactivity();
butterknife.inject(this, view);
return view;
}
@override
public void onactivitycreated(@nullable bundle savedinstancestate) {
super.onactivitycreated(savedinstancestate);
rcvarticle.setlayoutmanager(new linearlayoutmanager(mact));//这里用线性显示 类似于listview
// rcvarticle.setlayoutmanager(new gridlayoutmanager(mact, 2));//这里用线性宫格显示 类似于grid view
// rcvarticle.setlayoutmanager(new staggeredgridlayoutmanager(2, orientationhelper.vertical));//这里用线性宫格显示 类似于瀑布流
new latestarticletask().execute();
}
@override
public void ondestroyview() {
super.ondestroyview();
butterknife.reset(this);
}
class latestarticletask extends asynctask<string, void, list<itemarticle>> {
@override
protected void onpreexecute() {
super.onpreexecute();
}
@override
protected list<itemarticle> doinbackground(string... params) {
itemarticle storeinfo1 =
new itemarticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/u5912p28t3d3634984f328dt20120520152700.jpg", "关于举办《经典音乐作品欣赏与人文审美》讲座的通知", "2015-01-09", "科学研究院", 1129,
"讲座主要内容：以中、西方音乐历史中经典音乐作品为基础，通过作曲家及作品创作背景、相关音乐文化史知识及音乐欣赏常识...");
itemarticle storeinfo2 =
new itemarticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/u5912p28t3d3634984f328dt20120520152700.jpg", "关于举办《经典音乐作品欣赏与人文审美》讲座的通知", "2015-01-09", "科学研究院", 1129,
"讲座主要内容：以中、西方音乐历史中经典音乐作品为基础，通过作曲家及作品创作背景、相关音乐文化史知识及音乐欣赏常识...");
itemarticle storeinfo3 =
new itemarticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/u5912p28t3d3634984f328dt20120520152700.jpg", "关于举办《经典音乐作品欣赏与人文审美》讲座的通知", "2015-01-09", "科学研究院", 1129,
"讲座主要内容：以中、西方音乐历史中经典音乐作品为基础，通过作曲家及作品创作背景、相关音乐文化史知识及音乐欣赏常识...");
itemarticle storeinfo4 =
new itemarticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/u5912p28t3d3634984f328dt20120520152700.jpg", "关于举办《经典音乐作品欣赏与人文审美》讲座的通知", "2015-01-09", "科学研究院", 1129,
"讲座主要内容：以中、西方音乐历史中经典音乐作品为基础，通过作曲家及作品创作背景、相关音乐文化史知识及音乐欣赏常识...");
itemarticle storeinfo5 =
new itemarticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/u5912p28t3d3634984f328dt20120520152700.jpg", "关于举办《经典音乐作品欣赏与人文审美》讲座的通知", "2015-01-09", "科学研究院", 1129,
"讲座主要内容：以中、西方音乐历史中经典音乐作品为基础，通过作曲家及作品创作背景、相关音乐文化史知识及音乐欣赏常识...");
itemarticle storeinfo6 =
new itemarticle(20123, "http://i2.sinaimg.cn/ent/j/2012-05-20/u5912p28t3d3634984f328dt20120520152700.jpg", "关于举办《经典音乐作品欣赏与人文审美》讲座的通知", "2015-01-09", "科学研究院", 1129,
"讲座主要内容：以中、西方音乐历史中经典音乐作品为基础，通过作曲家及作品创作背景、相关音乐文化史知识及音乐欣赏常识...");
itemarticlelist.add(storeinfo1);
itemarticlelist.add(storeinfo2);
itemarticlelist.add(storeinfo3);
itemarticlelist.add(storeinfo4);
itemarticlelist.add(storeinfo5);
itemarticlelist.add(storeinfo6);
return itemarticlelist;
}
@override
protected void onpostexecute(list<itemarticle> data) {
super.onpostexecute(data);
itemarticleadapter adapter = new itemarticleadapter(mact, data);
rcvarticle.setadapter(adapter);
}
}
}
|
效果图
利用修改布局，线性显示或者宫格显示。（以前宫格显示很麻烦，现在一条命令就好了，google 搞得这么简单，我们android 工程师要失业的好伐？！！）
|
1
2
3
|
rcvarticle.setlayoutmanager(new linearlayoutmanager(mact));//这里用线性显示 类似于listview
// rcvarticle.setlayoutmanager(new gridlayoutmanager(mact, 2));//这里用线性宫格显示 类似于grid view
// rcvarticle.setlayoutmanager(new staggeredgridlayoutmanager(2, orientationhelper.vertical));//这里用线性宫格显示 类似于瀑布流
|
知识点
textview需要有settext(int resid) 方法，但是这儿 int 表示 resourceid，如果我想把阅读次数（int 1123）赋给这个 textview，不能使用这个方法。
需要把 int 转化为 string
|
1
2
3
4
5
6
|
int 转 string 有三种方法
int i =8;
string s =integer.tostring(i);
string g =string.valueof(i);
string h =i+"";
holder.rcvarticlereadtimes.settext(string.valueof(article.getreadtimes()));
|
总结 todo list
- picasso 图片缓存库的学习
- 实现 recyclerview 每个项各自的布局
遇到的坑
rcvarticle.setlayoutmanager()需要在onactivitycreated()方法里调用，如果在oncreateview()调用会抛出空指针异常。
|
1
2
3
4
5
6
7
8
9
|
public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) {
view view = inflater.inflate(r.layout.fragment_one_latest, container, false);
mact = getactivity();
//错误，需要在onactivitycreated里面调用
rcvarticle.setlayoutmanager(new linearlayoutmanager(mact));//这里用线性显示 类似于listview
butterknife.inject(this, view);
return view;
}
|
java.lang.nullpointerexception
at com.example.administrator.seenews.ui.fragment.common.articlefragment.oncreateview(articlefragment.java:111)
以上就是本文的全部内容，希望对大家的学习有所帮助。