Android动态图片选择的一种简单实现方式

---

layout: post
title: Android动态图片选择的一种简单实现方式
date: 2018-01-20 20:20:08
tags:

• Android开发
  categories:
• Android开发

---

很久没有更新博客了，以后还是决定每个月来更新一遍。本次到来的是一个常用的场景，比如我们在发朋友圈的时候，我们可以选择多张照片，也可以删除之前选择的，但是最多一般会有个上限，达到上限之后一般添加的就消失了。这里给出一个简单的实现思路。

效果图

• 我们还是先看看效果图
• 首先是没有图片的时候

• 然后我们选择两张图片

• 选可以点图片右上交的×删除一张

• 最后是选择6张，继续添加标志消失（我这里上限是6张，后面读者可以更新代码自己设置上限）

代码实现

• 这里简单的提供一种实现方式
• 我这里是利用RecyclerView来实现，接下来具体看下
• 首先是主布局文件，其实就是一个RecyclerView

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rl_repair"
            android:layout_width="match_parent"
            android:layout_height="250dp">
        </android.support.v7.widget.RecyclerView>

• 然后主要逻辑代码在adapter，我们先看看adapter的布局

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp">

    <ImageView
        android:id="@+id/iv_add"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/bg_scan"/>

    <ImageView
        android:id="@+id/iv_photo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

    <ImageView
        android:id="@+id/iv_remove"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:paddingBottom="5dp"
        android:paddingLeft="5dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_delete"
        android:visibility="visible"/>
</RelativeLayout>

• 这部分代码没有什么要说的，主要是用RelativeLayout里面包裹3个ImageView，一个用图片右上角显示的删除，一个是添加新图片，还有一个是用来展示选择的图片
• 接下来是adapter的逻辑部分代码了

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        if (mList.size() >= MAX_SIZE) {
            //最多6张
            holder.ivAdd.setVisibility(View.GONE);
            holder.ivRemove.setVisibility(View.GONE);
        } else {
            holder.ivPhoto.setVisibility(View.VISIBLE);
            holder.ivPhoto.setVisibility(View.VISIBLE);
            holder.ivRemove.setVisibility(View.VISIBLE);
        }
        if (getItemViewType(position) == TYPE_ADD) {
            holder.ivRemove.setVisibility(View.GONE);
            holder.ivPhoto.setVisibility(View.GONE);
        } else {
            holder.ivRemove.setVisibility(View.VISIBLE);
            holder.ivAdd.setVisibility(View.GONE);
            holder.ivPhoto.setVisibility(View.VISIBLE);
            holder.ivPhoto.setImageBitmap(BitmapFactory.decodeFile(mList.get(position)));
        }

    }

• 不难看出，这里利用setVisibility来进行操作，更具数据来显示那些或者隐藏哪些。当我们的数目大于等于6的时候，我们就需要删除和添加隐藏起来。
• 别忘了，我们一开始就需要有添加的图片，所以我们的size应该是

    @Override
    public int getItemCount() {
        return mList.size() + 1;
    }

• 数目应该要多加一个，然后应该注意到了我们的getItemViewType()方法了，这里我们进入看下

    @Override
    public int getItemViewType(int position) {
        if (position == getItemCount() - 1) {
            return TYPE_ADD;
        } else {
            return TYPE_PIC;
        }
    }

• 没错，这里就是用来区别是那种类型的方法，我们这里有两个类型

    private static final int TYPE_ADD = 1;
    private static final int TYPE_PIC = 2;

• 然后我们根据传入的postion来区分，如果position==我们的总数-1，那就说明我们这里显示添加图片，否则就显示展示的图片。为什么要减一个的原因就是最后总是要显示添加，除非达到了上限。然后回到我们的onBindViewHolder()代码中，就很简单了，当需要展示添加的时候，就把展示图片和删除的GONE，当需要展示图片的时候，就需要把添加隐藏，其余的展示出来
• 然后我们还需要监听点击事件，用来增加或者是删除

    private OnItemClickListener itemClickListener;

    public interface OnItemClickListener {
        /**
         * 继续添加图片接口
         */
        void onItemAddClick();

        /**
         * 删除已经添加的图片接口
         *
         * @param position 删除的position
         */
        void onItemRemoveClick(int position);
    }

• 写一个点击事件的接口，两个方法，一个是添加，一个删除
• 然后注册监听

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (context == null) {
            context = parent.getContext();
        }
        final ViewHolder viewHolder = new ViewHolder(LayoutInflater.from(context).inflate(R.layout.item_photo, parent, false));

        viewHolder.ivAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                itemClickListener.onItemAddClick();
            }
        });

        viewHolder.ivRemove.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                itemClickListener.onItemRemoveClick(viewHolder.getAdapterPosition());
            }
        });
        return viewHolder;
    }

• 在构造函数当中把接口进行注册

        public TakePhotoAdapter(List<String> mList, OnItemClickListener itemClickListener) {
        this.mList = mList;
        this.itemClickListener = itemClickListener;
    }

• 最后就是我们的页面的逻辑代码，先把adapter的接口引入implementsTakePhotoAdapter.OnItemClickListener
• 然后就是两个接口中的方法

    @Override
    public void onItemAddClick() {
        //添加照片
        mTakePhoto = getTakePhoto();
        mTakePhoto.onPickFromCapture(configCompress());
    }

    @Override
    public void onItemRemoveClick(int position) {
        //删除照片
        mPhotoList.remove(position);
        mTakePhotoAdapter.notifyDataSetChanged();
    }

• 可以看到每次对图片操作了，我们需要进行刷新。这里图片的添加可以不是我们的重点，大家可以去用第三方库，我这里使用的是TakePhoto这个库。
• 然后我们这边对RecyclerView进行注册就OK了

        rlRepair.setLayoutManager(new GridLayoutManager(this, 3));
        mTakePhotoAdapter = new TakePhotoAdapter(mPhotoList, this);
        rlRepair.setAdapter(mTakePhotoAdapter);

• 这里用的是GridLayoutManager，并设置每行3个，读者可以更具情况自己设置
• 差不多就是这么多内容了，很简单的东西。如果有不对或者更好的方式，欢迎指教