先看一下效果吧：
下面就来说一下具体怎么实现的：
实现思路
- 1.首先我们要获取数据源，数据源就是我们的每条说说（包括姓名、标题、图片数组）
- 2.自定义适配器（listview嵌套着gridview）
- 3.图片点击浏览图片（fragment+viewpager）
具体实现
1.初始化数据源，设置适配器，看一下代码：
|
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
|
public class myactivity extends activity { /*图片显示列表*/ private listview listview; /*图片url数组*/ private list<contentbean> contentbeans; /*说说适配器*/ private myadapter adapter; /** * called when the activity is first created. */ @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); initdata(); initviews(); } /** * 初始化数据 */ private void initdata(){ contentbeans = new arraylist<contentbean>(); arraylist<string> imgurls1 = new arraylist<string>(); imgurls1.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); contentbean cb1 = new contentbean(1,"java","sun microsystems",imgurls1); contentbeans.add(cb1); arraylist<string> imgurls2 = new arraylist<string>(); imgurls2.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); imgurls2.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); imgurls2.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); contentbean cb2 = new contentbean(2,"oc","stepstone",imgurls2); contentbeans.add(cb2); arraylist<string> imgurls3 = new arraylist<string>(); imgurls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); imgurls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); imgurls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); imgurls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); imgurls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); imgurls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); imgurls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); imgurls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); imgurls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110h2e40-6.jpg?attname=&e=1448288962&token=kdscquawz3p-yt6in6opnt56eh2cig4zgqd12sj_:altjfyd9sbfodb4jmmzukxamop8"); contentbean cb3 = new contentbean(3,"python","guido van rossum",imgurls3); contentbeans.add(cb3); } private void initviews(){ listview = (listview) findviewbyid(r.id.lv_my); adapter = new myadapter(myactivity.this,contentbeans); listview.setadapter(adapter); }} |
这里面的图片是我上传到七牛的网络图片，加载图片是用imageloader,下面也有具体的imageloader配置。
2.看一下适配器内容
在说说列表适配器中去设置图片的适配器，图片的gridview是重写了一个不能滑动的gridview，重写一下onmeasure();
|
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
|
public class myadapter extends baseadapter { private context context; private list<contentbean> data; public myadapter(context context, list<contentbean> data) { this.context = context; this.data = data; } @override public int getcount() { return data.size(); } @override public object getitem(int i) { return data.get(i); } @override public long getitemid(int i) { return i; } @override public view getview(int i, view view, viewgroup viewgroup) { viewholder holder; if (view == null) { holder = new viewholder(); view = view.inflate(context, r.layout.item, null); holder.gridview = (noscrollgridview) view.findviewbyid(r.id.gridview); holder.tvname = (textview) view.findviewbyid(r.id.tv_name); holder.tvtitle = (textview) view.findviewbyid(r.id.tv_title); view.settag(holder); } else { holder = (viewholder) view.gettag(); } final contentbean bean = data.get(i); holder.tvname.settext(bean.getname()); holder.tvtitle.settext(bean.gettitle()); if (data != null && data.size() > 0) { holder.gridview.setadapter(new imagegridadapter(context, bean.getimgurls())); } /** * 图片列表点击事件 */ holder.gridview.setonitemclicklistener(new adapterview.onitemclicklistener() { @override public void onitemclick(adapterview<?> adapterview, view view, int i, long l) { intent intent = new intent(context, imagepageractivity.class); intent.putextra(imagepageractivity.extra_image_urls, (serializable) bean.getimgurls()); intent.putextra(imagepageractivity.extra_image_index, i); context.startactivity(intent); } }); return view; } class viewholder { textview tvname, tvtitle; noscrollgridview gridview; }} |
3.然后就是图片浏览，这个网上也有好多的demo，也有详细的讲解，直接拽过来用就可以了，下面的图片数量是监听setonpagechangelistener（）来改变下面的图片索引值
|
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
|
/** * 图片查看器 */public class imagepageractivity extends fragmentactivity { private static final string state_position = "state_position"; public static final string extra_image_index = "image_index"; public static final string extra_image_urls = "image_urls"; private hackyviewpager mpager; private int pagerposition; private textview indicator; @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.image_detail_pager); pagerposition = getintent().getintextra(extra_image_index, 0); arraylist<string> urls = getintent().getstringarraylistextra(extra_image_urls); mpager = (hackyviewpager) findviewbyid(r.id.pager); imagepageradapter madapter = new imagepageradapter(getsupportfragmentmanager(), urls); mpager.setadapter(madapter); indicator = (textview) findviewbyid(r.id.indicator); charsequence text = getstring(r.string.viewpager_indicator, 1, mpager.getadapter().getcount()); indicator.settext(text); // 更新下标 mpager.setonpagechangelistener(new onpagechangelistener() { @override public void onpagescrollstatechanged(int arg0) { } @override public void onpagescrolled(int arg0, float arg1, int arg2) { } @override public void onpageselected(int arg0) { charsequence text = getstring(r.string.viewpager_indicator, arg0 + 1, mpager.getadapter().getcount()); indicator.settext(text); } }); if (savedinstancestate != null) { pagerposition = savedinstancestate.getint(state_position); } mpager.setcurrentitem(pagerposition); } @override public void onsaveinstancestate(bundle outstate) { outstate.putint(state_position, mpager.getcurrentitem()); } private class imagepageradapter extends fragmentstatepageradapter { public arraylist<string> filelist; public imagepageradapter(fragmentmanager fm, arraylist<string> filelist) { super(fm); this.filelist = filelist; } @override public int getcount() { return filelist == null ? 0 : filelist.size(); } @override public fragment getitem(int position) { string url = filelist.get(position); return imagedetailfragment.newinstance(url); } }} |
图片fragment的详细界面，里面有长按点击事件，和图片加载的状态
|
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
102
103
104
105
106
107
108
109
|
package com.hankkin.weixinlookimgsdemo.activty;import android.graphics.bitmap;import android.os.bundle;import android.support.v4.app.fragment;import android.view.layoutinflater;import android.view.view;import android.view.viewgroup;import android.widget.imageview;import android.widget.progressbar;import android.widget.toast;import com.hankkin.weixinlookimgsdemo.r;import com.nostra13.universalimageloader.core.imageloader;import com.nostra13.universalimageloader.core.assist.failreason;import com.nostra13.universalimageloader.core.listener.simpleimageloadinglistener;import com.others.photoviewattacher;/** * 单张图片显示fragment */public class imagedetailfragment extends fragment { private string mimageurl; private imageview mimageview; private progressbar progressbar; private photoviewattacher mattacher; public static imagedetailfragment newinstance(string imageurl) { final imagedetailfragment f = new imagedetailfragment(); final bundle args = new bundle(); args.putstring("url", imageurl); f.setarguments(args); return f; } @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); mimageurl = getarguments() != null ? getarguments().getstring("url") : null; } @override public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) { final view v = inflater.inflate(r.layout.image_detail_fragment, container, false); mimageview = (imageview) v.findviewbyid(r.id.image); mattacher = new photoviewattacher(mimageview); mattacher.setonphototaplistener(new photoviewattacher.onphototaplistener() { @override public void onphototap(view arg0, float arg1, float arg2) { getactivity().finish(); } }); mattacher.setonlongclicklistener(new view.onlongclicklistener() { @override public boolean onlongclick(view view) { toast.maketext(getactivity().getapplicationcontext(),"保存",toast.length_short).show(); return false; } }); progressbar = (progressbar) v.findviewbyid(r.id.loading); return v; } @override public void onactivitycreated(bundle savedinstancestate) { super.onactivitycreated(savedinstancestate); imageloader.getinstance().displayimage(mimageurl, mimageview, new simpleimageloadinglistener() { @override public void onloadingstarted(string imageuri, view view) { progressbar.setvisibility(view.visible); } @override public void onloadingfailed(string imageuri, view view, failreason failreason) { string message = null; switch (failreason.gettype()) { case io_error: message = "下载错误"; break; case decoding_error: message = "图片无法显示"; break; case network_denied: message = "网络有问题，无法下载"; break; case out_of_memory: message = "图片太大无法显示"; break; case unknown: message = "未知的错误"; break; } toast.maketext(getactivity(), message, toast.length_short).show(); progressbar.setvisibility(view.gone); } @override public void onloadingcomplete(string imageuri, view view, bitmap loadedimage) { progressbar.setvisibility(view.gone); mattacher.update(); } }); }} |
忘了imageloader的初始化工作了，给大家加上吧，我写到application里了。
|
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
|
private myapplication context; @override public void oncreate() { super.oncreate(); context = this; initimageloader(context); } /** * 初始化imageloader * by hankkin at:2015-11-22 23:20:29 * @param context */ public static void initimageloader(context context){ displayimageoptions options = new displayimageoptions.builder() .showimageonloading(r.drawable.ic_launcher) .showimageonfail(r.drawable.ic_launcher) .resetviewbeforeloading(false) // default .delaybeforeloading(0) .cacheinmemory(true) // default .cacheondisk(true) // default .considerexifparams(true) // default .imagescaletype(imagescaletype.in_sample_power_of_2) // default .bitmapconfig(bitmap.config.argb_8888) // default .displayer(new simplebitmapdisplayer()) // default .handler(new handler()) // default .build(); file picpath = new file(environment.getexternalstoragedirectory().getpath() + file.separator + "weixinlookimgdemo" + file.separator + "files"); imageloaderconfiguration config = new imageloaderconfiguration.builder(context) .memorycacheextraoptions(480, 800) // default = device screen dimensions .diskcacheextraoptions(480, 800, null) .threadpoolsize(3) // default .threadpriority(thread.norm_priority - 1) // default .tasksprocessingorder(queueprocessingtype.fifo) // default .denycacheimagemultiplesizesinmemory() .memorycache(new lrumemorycache(2 * 1024 * 1024)) .memorycachesize(2 * 1024 * 1024) .memorycachesizepercentage(13) // default .diskcache(new unlimiteddisccache(picpath)) // default .diskcachesize(50 * 1024 * 1024) .diskcachefilecount(1000) .diskcachefilenamegenerator(new hashcodefilenamegenerator()) // default .imagedownloader(new baseimagedownloader(context)) // default .imagedecoder(new baseimagedecoder(true)) // default .defaultdisplayimageoptions(options) // default .writedebuglogs() .build(); // initialize imageloader with configuration. imageloader.getinstance().init(config); } |
以上就是关于android仿微信发朋友圈浏览图片效果的全部内容，希望对大家学习android软件编程有所帮助。
