GridView仿微信添加多圖效果

如果喜歡栗子系列可以關注哦~各種栗子正在趕來中......

栗子配圖（自己設計--栗子icon來自阿里圖標庫，背景圖來自攝圖網）.png

栗子慣例，先上GIF

栗子GIF.gif

在項目中這種添加⑨圖的效果應該是非常常見的，後面有個添加的按鈕應該怎麼實現，這也許讓一部分小白抓狂了吧~來吧，淡漠帶你飛，走起~~啦啦啦......

起飛前先說下，本篇只是講解九宮格添加圖片的效果，至於選擇圖片的效果是別人寫的庫，我只是接過來做選擇圖片用的~

首先這是用GridView實現的
xml佈局就一個GridView

 <GridView
     android:id="@+id/gridView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:columnWidth="90dp"
     android:gravity="center"
     android:horizontalSpacing="4dp"
     android:numColumns="3"
     android:scrollbars="none"
     android:stretchMode="columnWidth"
     android:verticalSpacing="4dp" />

接下來看看java代碼

 //圖片數據，ImageItem是圖片選擇的庫自帶的Bean
 private ArrayList<ImageItem> images;
 //adapter是核心，添加按鈕的處理刪除的處理都在裏面，後面會說，別急
 private MultiImageAdapter adapter;
 //初次進入的時候先只傳this
 adapter = new MultiImageAdapter(this);
 gridView.setAdapter(adapter);

 @Override
 protected void onActivityResult(int requestCode, int resultCode, Intent data) {
     super.onActivityResult(requestCode, resultCode, data);
     if (data != null && requestCode == 3) {
         //判斷一下是否有數據，有的話就addAll()，不會覆蓋已經有的圖
         if(images == null){
             images = (ArrayList<ImageItem>)
                      data.getSerializableExtra(ImagePicker.EXTRA_RESULT_ITEMS);
         }else{
             images.addAll((ArrayList<ImageItem>)
                      data.getSerializableExtra(ImagePicker.EXTRA_RESULT_ITEMS));
         }
         //拿到圖片數據後把images傳過去
         adapter = new MultiImageAdapter(this,images);
         gridView.setAdapter(adapter);
     } else {
         Toast.makeText(this, "沒有選擇圖片", Toast.LENGTH_SHORT).show();
     }
 }

Ok，Java代碼也講完了，到這裏沒有什麼複雜的吧，添加按鈕和刪除按鈕的處理都在Adapter裏面，下面開始說核心的Adapter

核心Adapter
先看xml吧

 <?xml version="1.0" encoding="utf-8"?>
 <com.anfq.mylibrary.view.SquareLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:background="#ffffff"
     android:layout_height="match_parent">
     <RelativeLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
         <ImageView
             android:id="@+id/ivIcon"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:background="@color/colorPrimaryDark"
             android:scaleType="fitXY" />
         <ImageButton
             android:id="@+id/ibDelete"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentEnd="true"
             android:layout_alignParentRight="true"
             android:layout_alignParentTop="true"
             android:background="@null"
             android:padding="10dp"
             android:src="@drawable/del" />
     </RelativeLayout>
     <ImageButton
         android:id="@+id/ibAdd"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_centerInParent="true"
         android:background="#eeeeee"
         android:src="@drawable/add"
         android:visibility="gone" />
 </com.anfq.mylibrary.view.SquareLayout>

xml也不復雜，最外層的SquareLayout是一個讓GridView顯示的Item爲正方形的處理，RelativeLayout裏有個ImageView這個是用來展示圖片的，ImageButton是刪除的按鈕；然後外面ImageButton是添加按鈕，設置了隱藏屬性android:visibility="gone"，只有在需要的時候才把添加按鈕召喚出來，添加完9個圖片的時候是沒有添加按鈕的。

把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) {
         setMeasuredDimension(getDefaultSize(0, widthMeasureSpec),
                 getDefaultSize(0, heightMeasureSpec));
         int childWidthSize = getMeasuredWidth();
         int childHeightSize = getMeasuredHeight();
         // 高度和寬度一樣
         heightMeasureSpec = widthMeasureSpec = MeasureSpec.makeMeasureSpec(
                 childWidthSize, MeasureSpec.EXACTLY);
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
     }
 }

Adapter來了

 public class MultiImageAdapter extends BaseAdapter {
     private Activity activity;
     private LayoutInflater inflater;
     private ArrayList<ImageItem> mImages;
     //用來判斷是否是剛剛進入，剛進入只顯示添加按鈕，也就是上面java代碼中只傳this的時候
     private boolean is = false;
     ImagePicker imagePicker = ImagePicker.getInstance();
     public MultiImageAdapter(Activity activity, ArrayList<ImageItem> images) {
         this.activity = activity;
         this.inflater = LayoutInflater.from(activity);
         this.mImages = images;
         initImagePicker();//設置圖片選擇的一些屬性
     }    public MultiImageAdapter(Activity activity) {
         this.activity = activity;
         this.inflater = LayoutInflater.from(activity);
         is = true;//設置爲true表示第一次初始化
         initImagePicker();//設置圖片選擇的一些屬性
     }
     @Override
     public int getCount() {
         if(!is){
             //這裏判斷數據如果有9張就size等於9,否則就+1，+1是爲按鈕留的位置
             return mImages.size()==9?mImages.size():mImages.size()+1;
         }
         //沒有數據就是1，1是爲按鈕留的位置
         return 1;
     }
     @Override
     public Object getItem(int position) {
         return mImages.get(position);
     }
     @Override
     public long getItemId(int position) {
         return position;
     }
     @Override
     public View getView(final int position, View view, final ViewGroup parent) {
         ViewHolder holder = null;
         if (null == view) {
             view = inflater.inflate(R.layout.item_ulti_image, null);
             holder = new ViewHolder();
             holder.ivIcon = (ImageView) view.findViewById(R.id.ivIcon);
             holder.ibAdd = (ImageButton) view.findViewById(R.id.ibAdd);
             holder.ibDelete = (ImageButton) view.findViewById(R.id.ibDelete);
             view.setTag(holder);
         } else {
             holder = (ViewHolder) view.getTag();
         }
         if(!is){
             //選了圖片後會進入這裏，先判斷下position 是否等於size
             if(position == mImages.size()){
                 //執行到這裏就說明是最後一個位置，判斷是否有9張圖
                 if(mImages.size() != 9){
                     //沒有9張圖就顯示添加按鈕
                     holder.ibAdd.setVisibility(View.VISIBLE);
                 }else{
                     //有就隱藏
                     holder.ibAdd.setVisibility(View.GONE);
                 }
             }else{
                 //還不是最後一個位置的時候執行這裏
                 //隱藏添加按鈕，要設置圖片嘛~
                 holder.ibAdd.setVisibility(View.GONE);
                 //根據條目位置設置圖片
                 ImageItem item = mImages.get(position);
                 Glide.with(activity)
                         .load(item.path)
                         .into(holder.ivIcon);
             }
             //刪除按鈕的點擊事件
             holder.ibDelete.setOnClickListener(new View.OnClickListener() {
                 @Override
                 public void onClick(View v) {
                     //移除圖片
                     mImages.remove(position);
                     //更新
                     notifyDataSetChanged();
                 }
             });
         }else{
             //初次初始化的時候顯示添加按鈕
             holder.ibAdd.setVisibility(View.VISIBLE);
         }
         //添加按鈕點擊事件
         holder.ibAdd.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 //判斷是否是初始化進入
                 if(!is){
                     //到這裏表示已經選過了，然後用9-size算出還剩幾個圖的位置
                     imagePicker.setSelectLimit(9-mImages.size());//選中數量限制
                 }
                 //跳轉到圖片選擇
                 Intent intent = new Intent(activity, ImageGridActivity.class);
                 activity.startActivityForResult(intent, 3);
             }
         });
         return view;
     }
     protected class ViewHolder {
         /** icon */
         protected ImageView ivIcon;
         /** 移除 */
         protected ImageButton ibDelete;
         /**添加 */
         protected ImageButton ibAdd;
     }
     private void initImagePicker() {
         imagePicker.setImageLoader(new GlideImageLoader());   //設置圖片加載器
         imagePicker.setShowCamera(true);//顯示拍照按鈕
         imagePicker.setCrop(true);//允許裁剪（單選才有效）
         imagePicker.setSaveRectangle(true);//是否按矩形區域保存
         imagePicker.setSelectLimit(9);//選中數量限制
         imagePicker.setStyle(CropImageView.Style.CIRCLE);//裁剪框的形狀
         imagePicker.setFocusWidth(100);//裁剪框的寬度。單位像素（圓形自動取寬高最小值）
         imagePicker.setFocusHeight(100);//裁剪框的高度。單位像素（圓形自動取寬高最小值）
         imagePicker.setOutPutX(1000);//保存文件的寬度。單位像素
         imagePicker.setOutPutY(1000);//保存文件的高度。單位像素
     }
 }

總結：其實原理就是把數據的size+1,做爲添加按鈕的放置，然後判斷下有9張圖就不顯示添加按鈕，並且size也不+1，就這樣，一個帶添加按鈕的GridView就好了~有什麼不懂得可以留言。

dwf_學海無涯

發佈了14 篇原創文章 · 獲贊 35 · 訪問量 11萬+

私信關注

GridView仿微信添加多圖效果

如果喜歡栗子系列可以關注哦~各種栗子正在趕來中......

栗子慣例，先上GIF

在項目中這種添加⑨圖的效果應該是非常常見的，後面有個添加的按鈕應該怎麼實現，這也許讓一部分小白抓狂了吧~來吧，淡漠帶你飛，走起~~啦啦啦......

起飛前先說下，本篇只是講解九宮格添加圖片的效果，至於選擇圖片的效果是別人寫的庫，我只是接過來做選擇圖片用的~

Ok，Java代碼也講完了，到這裏沒有什麼複雜的吧，添加按鈕和刪除按鈕的處理都在Adapter裏面，下面開始說核心的Adapter

總結：其實原理就是把數據的size+1,做爲添加按鈕的放置，然後判斷下有9張圖就不顯示添加按鈕，並且size也不+1，就這樣，一個帶添加按鈕的GridView就好了~有什麼不懂得可以留言。

Kafka簡介及使用PHP處理Kafka消息

TextView使用自定義HtmlHttpImageGetter實現異步加載網絡圖片，可限制加載圖片數量

Android 教你一步步搭建MVP+Retrofit+RxJava網絡請求框架

GridView仿微信添加多圖效果

Android 利用BroadcastReceiver實時檢測網絡狀態變化

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結