栗子——GridView仿微信添加多圖效果

帶你實現(xiàn)微信的九宮格添加圖片的效果

栗子配圖.png

栗子慣例，先上GIF

栗子GIF.gif

前言

在項目中這種添加⑨圖的效果應(yīng)該是非常常見的，后面有個添加的按鈕應(yīng)該怎么實現(xiàn)，這也許讓一部分小白抓狂了吧！來吧，淡漠帶你飛，走起~~

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

首先布局中添加普通的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代碼

看注釋（手動滑稽）

//圖片數(shù)據(jù)，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) {
        //判斷一下是否有數(shù)據(jù)，有的話就addAll()，不會覆蓋已經(jīng)有的圖
        if(images == null){
            images = (ArrayList<ImageItem>)
                     data.getSerializableExtra(ImagePicker.EXTRA_RESULT_ITEMS);
        }else{
            images.addAll((ArrayList<ImageItem>)
                     data.getSerializableExtra(ImagePicker.EXTRA_RESULT_ITEMS));
        }
        //拿到圖片數(shù)據(jù)后把images傳過去
        adapter = new MultiImageAdapter(this,images);
        gridView.setAdapter(adapter);
    } else {
        Toast.makeText(this, "沒有選擇圖片", Toast.LENGTH_SHORT).show();
    }
}

Ok，Java代碼也講完了，到這里沒有什么復(fù)雜的吧，添加按鈕和刪除按鈕的處理都在Adapter里面，下面開始說核心的Adapter

核心Adapter

其實這個效果的核心就在adapter里處理的，請仔細閱讀代碼，內(nèi)有詳細注釋~

item.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>

item中也不復(fù)雜

  1. 最外層的SquareLayout是一個讓GridView顯示的Item為正方形的處理
  2. RelativeLayout里有個ImageView這個是用來展示圖片
  3. ImageButton是刪除的按鈕；然后外面ImageButton是添加按鈕
  4. 設(shè)置了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.java

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();//設(shè)置圖片選擇的一些屬性
    }    public MultiImageAdapter(Activity activity) {
        this.activity = activity;
        this.inflater = LayoutInflater.from(activity);
        is = true;//設(shè)置為true表示第一次初始化
        initImagePicker();//設(shè)置圖片選擇的一些屬性
    }
    @Override
    public int getCount() {
        if(!is){
            //這里判斷數(shù)據(jù)如果有9張就size等于9,否則就+1，+1是為按鈕留的位置
            return mImages.size()==9?mImages.size():mImages.size()+1;
        }
        //沒有數(shù)據(jù)就是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()){
                //執(zhí)行到這里就說明是最后一個位置，判斷是否有9張圖
                if(mImages.size() != 9){
                    //沒有9張圖就顯示添加按鈕
                    holder.ibAdd.setVisibility(View.VISIBLE);
                }else{
                    //有就隱藏
                    holder.ibAdd.setVisibility(View.GONE);
                }
            }else{
                //還不是最后一個位置的時候執(zhí)行這里
                //隱藏添加按鈕，要設(shè)置圖片嘛~
                holder.ibAdd.setVisibility(View.GONE);
                //根據(jù)條目位置設(shè)置圖片
                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){
                    //到這里表示已經(jīng)選過了，然后用9-size算出還剩幾個圖的位置
                    imagePicker.setSelectLimit(9-mImages.size());//選中數(shù)量限制
                }
                //跳轉(zhuǎn)到圖片選擇
                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());   //設(shè)置圖片加載器
        imagePicker.setShowCamera(true);//顯示拍照按鈕
        imagePicker.setCrop(true);//允許裁剪（單選才有效）
        imagePicker.setSaveRectangle(true);//是否按矩形區(qū)域保存
        imagePicker.setSelectLimit(9);//選中數(shù)量限制
        imagePicker.setStyle(CropImageView.Style.CIRCLE);//裁剪框的形狀
        imagePicker.setFocusWidth(100);//裁剪框的寬度。單位像素（圓形自動取寬高最小值）
        imagePicker.setFocusHeight(100);//裁剪框的高度。單位像素（圓形自動取寬高最小值）
        imagePicker.setOutPutX(1000);//保存文件的寬度。單位像素
        imagePicker.setOutPutY(1000);//保存文件的高度。單位像素
    }
}

總結(jié)

其實原理就是把數(shù)據(jù)的size+1,做為添加按鈕的放置，然后判斷下有9張圖就不顯示添加按鈕，并且size也不+1，就這樣，一個帶添加按鈕的GridView就好了~有什么不懂得可以留言。

未經(jīng)本人允許禁止轉(zhuǎn)載，違者必究

簡書：www.itdecent.cn/u/3d2770e6e489

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容