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

2020-04-11 10:54:15

字体：大中小

来源：转载

供稿：网友

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

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

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

<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中设置

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的源码解析一下

/**  * 方形布局  */ 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的每一项了。
接下来贴图给大家看：

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.