正文

Android仿微信发朋友圈浏览图片效果

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0723

这篇文章主要介绍了Android仿微信发朋友圈浏览图片效果的相关资料,需要的朋友可以参考下

先看一下效果吧：

Android仿微信发朋友圈浏览图片效果

下面就来说一下具体怎么实现的：

实现思路

  • 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软件编程有所帮助。