GridView仿微信添加多图效果

如果喜欢栗子系列可以关注哦~各种栗子正在赶来中......

栗子配图（自己设计--栗子icon来自阿里图标库，背景图来自摄图网）.png

栗子惯例，先上GIF

栗子GIF.gif

---

在项目中这种添加⑨图的效果应该是非常常见的，后面有个添加的按钮应该怎么实现，这也许让一部分小白抓狂了吧~来吧，淡漠带你飞，走起~~啦啦啦......

---

起飞前先说下，本篇只是讲解九宫格添加图片的效果，至于选择图片的效果是别人写的库，我只是接过来做选择图片用的~

1. 首先这是用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" />

2. 接下来看看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

3. 核心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就好了~有什么不懂得可以留言。