正文

Android GridView仿微信朋友圈显示图片

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

这篇文章主要介绍了Android GridView仿微信朋友圈显示图片，上传多图并且多图显示，GridView可以动态加载图片的数量，感兴趣的小伙伴们可以参考一下

最近项目要求上传多图并且多图显示，而且要规则的显示，就像微信朋友圈的图片显示一样。
利用gridview再适合不过了，gridview可以动态加载图片的数量，而且还比较规律，下面说一下自己的思路：

  • 1.获取网络图片
  • 2.初始化gridview,自定义适配器
  • 3.根据图片数量设置gridview的列数
  • 4.更新适配器

下面贴上部分源码并给大家解析一下
一、首先是gridview的item

?
1
2
3
4
5
6
7
8
9
10
11
12
<com.view.squarelayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical" >
 <imageview
  android:id="@+id/item_grida_image"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:scaletype="fitxy"
  android:layout_margin="@dimen/tinyest_space">
 </imageview>
</com.view.squarelayout>

这里的squarelayout布局是自定义的下面会给大家详细讲解。
子项中是一个正方形布局里面嵌套着图片

二、接下来自定义适配器
因为项目需求不同，自己定义的适配器和平时用的不太一样，这里就不贴源码了。大体上也是将图片下载到本地，用imageloader加载，不过我这里有上传失败的和新建的，所以不太一样。

三、最后在用到的activity中设置

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
noscrollgridview = (gridview) findviewbyid(r.id.noscrollgridview);
  noscrollgridview.setnumcolumns(3); //默认设置在3列图片
  //上传成功传值给adapter
  picadapter = new pictureadapter(this, 1, appitem_file);
  noscrollgridview.setadapter(picadapter);
 
 
 
//根据图片数量设置图片的列
  int size = appitemfile.getfiles().split(",").length;
  if (size==1){
   noscrollgridview.setnumcolumns(1);
  }
  else if (size==2){
   noscrollgridview.setnumcolumns(2);
  }
  else if (size>2){
   noscrollgridview.setnumcolumns(3);
  }
  picadapter.notifydatasetchanged();

默认设置gridview的列数为3，根据图片的数量动态设置列数。

最后贴上squarelayout的源码解析一下

?
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
/**
 * 方形布局
 */
public class squarelayout extends relativelayout {
 public squarelayout(context context, attributeset attrs, int defstyle) {
  super(context, attrs, defstyle);
 }
 
 public squarelayout(context context, attributeset attrs) {
  super(context, attrs);
 }
 
 public squarelayout(context context) {
  super(context);
 }
 
 @suppresswarnings("unused")
 @override
 protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
  // for simple implementation, or internal size is always 0.
  // we depend on the container to specify the layout size of
  // our view. we can't really know what it is since we will be
  // adding and removing different arbitrary views and do not
  // want the layout to change as this happens.
  setmeasureddimension(getdefaultsize(0, widthmeasurespec),
    getdefaultsize(0, heightmeasurespec));
 
  // children are just made to fill our space.
  int childwidthsize = getmeasuredwidth();
  int childheightsize = getmeasuredheight();
  // 高度和宽度一样
  heightmeasurespec = widthmeasurespec = measurespec.makemeasurespec(
    childwidthsize, measurespec.exactly);
  super.onmeasure(widthmeasurespec, heightmeasurespec);
 }
}

这里主要重写了onmeasure（）方法，设置了高宽，需要注意的是在用squarelayout的时候要设置它的高宽都是match_parent。这样就可以填满gridview的每一项了。
接下来贴图给大家看：

Android GridView仿微信朋友圈显示图片

imgeview的scaletype的属性如果设置fitxy就会充满方形布局，如果center就会居中显示
详细说一下吧：
1）center：保持原图的大小，显示在imageview的中心。当原图的size大于imageview的size，超过部分裁剪处理。
2）centercrop：以填满整个imageview为目的，将原图的中心对准imageview的中心，等比例放大原图，直到填满imageview为止（指的是imageview的宽和高都要填满），原图超过imageview的部分作裁剪处理。
3）centerinside：以原图完全显示为目的，将图片的内容完整居中显示，通过按比例缩小原图的size宽(高)等于或小于imageview的宽(高)。如果原图的size本身就小于imageview的size，则原图的size不作任何处理，居中显示在imageview。
4）matrix：不改变原图的大小，从imageview的左上角开始绘制原图，原图超过imageview的部分作裁剪处理
5）fitcenter：把原图按比例扩大或缩小到imageview的imageview的高度，居中显示
6）fitend：把原图按比例扩大(缩小)到imageview的高度，显示在imageview的下部分位置
7）fitstart：把原图按比例扩大(缩小)到imageview的高度，显示在imageview的上部分位置
8）fitxy：把原图按照指定的大小在view中显示，拉伸显示图片，不保持原比例，填满imageview.

以上就是本文的全部内容，希望对大家的学习有所帮助。