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.