Android GridView仿微信朋友圈顯示圖片

更新時間：2016年01月26日 14:59:07 作者：Hankkin

這篇文章主要介紹了Android GridView仿微信朋友圈顯示圖片，上傳多圖并且多圖顯示，GridView可以動態(tài)加載圖片的數(shù)量，感興趣的小伙伴們可以參考一下

最近項目要求上傳多圖并且多圖顯示，而且要規(guī)則的顯示，就像微信朋友圈的圖片顯示一樣。
利用GridView再適合不過了，GridView可以動態(tài)加載圖片的數(shù)量，而且還比較規(guī)律，下面說一下自己的思路：

1.獲取網(wǎng)絡圖片
2.初始化gridview,自定義適配器
3.根據(jù)圖片數(shù)量設置gridview的列數(shù)
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); 



//根據(jù)圖片數(shù)量設置圖片的列 
  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的列數(shù)為3，根據(jù)圖片的數(shù)量動態(tài)設置列數(shù)。

最后貼上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.