自定义仿微信九张图片选择展示库

最新推荐文章于 2019-07-09 18:19:05 发布
最新推荐文章于 2019-07-09 18:19:05 发布
阅读量979 收藏 2
点赞数
分类专栏： android 文章标签： Recyclerview 微信九宫图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roy_xing/article/details/53090443
版权

简介

现在众多App中都会有发表图文的功能，在编辑图文的时候会有多图的展示效果。下面就给大家分享一下最近项目中用到的一款自定义出来的一个库。

思路讲解

该库是在fragment中，使用RecyclerView进行编写。利用RecyclerView的一些特性较好的实现了项目中需求。在此分享给大家，不足之处多多指出。

1.首先介绍一下所用到的几款开源库,非常实用向大家推荐一下：

图片选择库：FinalGallery是一款非常强大的图片选择库，支持多种自定义。
图片加载库：glide支持各种类型，各种路径下图片的查看。
屏幕适配库：AndroidAutoLayout鸿洋大神的一款神作，适配非常给力。

2.该库使用RecyclerView来加载显示图片，适配器代码如下：

public class AddPhotoAdapter extends RecyclerView.Adapter<AddPhotoAdapter.MyViewHolder> {

    private List<PhotoInfo> data = new ArrayList<>();
    private LayoutInflater mInflater;
    public final static int DEFAULT_PIC_ID = 0x2B67;
    private int maxNum;
    private Context mContext;

    private onRecyclerViewItemClickListener mRecyclerViewItemClickListener;

    public void setRecyclerViewItemClickListener(onRecyclerViewItemClickListener recyclerViewItemClickListener) {
        this.mRecyclerViewItemClickListener = recyclerViewItemClickListener;
    }

    public AddPhotoAdapter(Context context, int max) {
        this.maxNum = max;
        mInflater = LayoutInflater.from(context);
        mContext = context;
        PhotoInfo photo = addDefaultItem();
        data.add(photo);
    }

    @NonNull
       public PhotoInfo addDefaultItem() {
        PhotoInfo photo = new PhotoInfo();
        photo.setPhotoPath(R.drawable.icon_add_photo_new + "");
        photo.setPhotoId(DEFAULT_PIC_ID);
        return photo;
    }


    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.fragment_add_photo_item, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {

        if (isAddIcon(position)) {
            holder.im_add_photo_item.setScaleType(ImageView.ScaleType.FIT_XY);
            holder.im_add_photo_item.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    int pos = holder.getLayoutPosition();
                    mRecyclerViewItemClickListener.onImagePickClick(view, pos);
                }
            });
            holder.im_close_photo_item.setVisibility(View.GONE);
        } else {
            holder.im_add_photo_item.setScaleType(ImageView.ScaleType.CENTER_CROP);
            holder.im_add_photo_item.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int pos = holder.getLayoutPosition();
                    mRecyclerViewItemClickListener.onImagePreviewClick(holder.itemView, pos);
                }
            });

            holder.im_add_photo_item.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View view) {
                    int pos = holder.getLayoutPosition();
                    mRecyclerViewItemClickListener.onImageLongClick(view, holder);
                    return true;
                }
            });
            holder.im_close_photo_item.setVisibility(View.VISIBLE);
        }
        if (getInfo(position).getPhotoPath().equals(R.drawable.icon_add_photo_new + ""))
            Glide.with(mContext).load(R.drawable.icon_add_photo_new).into(holder.im_add_photo_item);
        else
            Glide.with(mContext).load(getInfo(position).getPhotoPath()).into(holder.im_add_photo_item);

        holder.im_close_photo_item.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int pos = holder.getLayoutPosition();
                if (pos < data.size())
                    mRecyclerViewItemClickListener.onCloseImageClick(view, pos);
            }
        });

    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    private PhotoInfo getInfo(int position) {
        return data.get(position);
    }

    private boolean isAddIcon(int position) {
        return data.get(position).getPhotoId() == DEFAULT_PIC_ID;
    }

    public void addData(List<PhotoInfo> list) {
        for (PhotoInfo photo : list) {
            data.add(data.size() - 1, photo);
            notifyItemInserted(data.size() - 2);
        }
        if (data.size() == maxNum + 1) {
            data.remove(data.size() - 1);
            notifyItemRemoved(data.size());
        }
    }

    public List<PhotoInfo> getData() {
        return data;
    }

    public List<String> getAllPath() {
        List<String> list = new ArrayList<>();
        for (PhotoInfo info : data) {
            if (info.getPhotoId() != DEFAULT_PIC_ID)
                list.add(info.getPhotoPath().trim());
        }
        return list;
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {

        private ImageView im_add_photo_item;
        private ImageView im_close_photo_item;

        public MyViewHolder(View itemView) {
            super(itemView);
            AutoUtils.autoSize(itemView);
            im_add_photo_item = (ImageView) itemView.findViewById(R.id.im_add_photo_item);
            im_close_photo_item = (ImageView) itemView.findViewById(R.id.im_close_photo_item);
        }
    }

    public void setMaxNum(int maxNum) {
        this.maxNum = maxNum;
    }
}

RecyclerView中在图片未达所设置最大选择数量时，会一直有一张默认图片供用户点击加载图片。所以需要在构造方法中调用addDefaultItem()方法添加一张默认图片，加入集合data中。
在onBindViewHolder(final MyViewHolder holder, final int position)方法中：通过isAddIcon(int position)方法判断用户当前点击的图片是默认图片或者已选择的图片；

定义接口onRecyclerViewItemClickListener来监控用户对RecyclerView的图片的各种操作：

public interface onRecyclerViewItemClickListener {

    void onImagePickClick(View view, int position);

    void onImagePreviewClick(View view, int position);

    void onImageLongClick(View view, AddPhotoAdapter.MyViewHolder holder);

    void onCloseImageClick(View view, int position);

}

需要注意的是在图库中选择好图片往RecyclerView中添加时需要做好默认图片的处理，addData(List list)需要在默认图片前面插入新选择的图片，并且判断所选择图片是否已经达到最大可选数量。注意刷新RecyclerView中相应位置的item。

3.fragment的代码如下：

public class AddPhotoFragment extends Fragment implements onRecyclerViewItemClickListener {

    private View view;
    private RecyclerView fragment_add_photo;
    private AddPhotoAdapter mAddPhotoAdapter;
    private int maxNum = 9;
    private int REQUEST_CODE_GALLERY = 0x12313;
    private ItemTouchHelper itemTouchHelper;

    private onPhotoNumChangedListener mNumCountListener;

    public void setNumCountListener(onPhotoNumChangedListener numCountListener) {
        mNumCountListener = numCountListener;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_add_photo, null);

        initView(view);
        initEvent();
        return view;
    }

    private void initView(View view) {
        fragment_add_photo = (RecyclerView) view.findViewById(R.id.fragment_add_photo);
        mAddPhotoAdapter = new AddPhotoAdapter(getActivity(), maxNum);
    }

    private void initEvent() {
        GridLayoutManager layoutManager = new GridLayoutManager(getActivity(), 3);
        layoutManager.setAutoMeasureEnabled(true);
        fragment_add_photo.setLayoutManager(layoutManager);
        fragment_add_photo.setAdapter(mAddPhotoAdapter);
        fragment_add_photo.setItemAnimator(new DefaultItemAnimator());
        itemTouchHelper = new ItemTouchHelper(new MyItemTouchHelper(mAddPhotoAdapter,maxNum));
        itemTouchHelper.attachToRecyclerView(fragment_add_photo);

        mAddPhotoAdapter.setRecyclerViewItemClickListener(this);

    }

    @Override
    public void onImagePickClick(View view, int position) {
        FunctionConfig config = new FunctionConfig.Builder().setMutiSelectMaxSize(maxNum - mAddPhotoAdapter.getData().size() + 1).build();
        GalleryFinal.openGalleryMuti(REQUEST_CODE_GALLERY, config, new GalleryFinal.OnHanlderResultCallback() {
            @Override
            public void onHanlderSuccess(int reqeustCode, List<PhotoInfo> resultList) {
                Log.e("roy", resultList.toString());
                mAddPhotoAdapter.addData(resultList);
                if (mNumCountListener != null)
                    mNumCountListener.getSelectedPhotoNum(mAddPhotoAdapter.getAllPath().size());
            }

            @Override
            public void onHanlderFailure(int requestCode, String errorMsg) {

            }
        });
    }

    @Override
    public void onImagePreviewClick(View view, final int position) {
        FunctionConfig config = new FunctionConfig.Builder().setMutiSelectMaxSize(1).build();
        GalleryFinal.openGallerySingle(REQUEST_CODE_GALLERY, config, new GalleryFinal.OnHanlderResultCallback() {
            @Override
            public void onHanlderSuccess(int reqeustCode, List<PhotoInfo> resultList) {
                mAddPhotoAdapter.getData().remove(position);
                mAddPhotoAdapter.getData().add(position, resultList.get(0));
                mAddPhotoAdapter.notifyItemChanged(position);
            }

            @Override
            public void onHanlderFailure(int requestCode, String errorMsg) {

            }
        });
    }

    @Override
    public void onImageLongClick(View view, AddPhotoAdapter.MyViewHolder holder) {
        boolean isContain = false;

        if (mAddPhotoAdapter.getData().size() == maxNum) {
            for (PhotoInfo info : mAddPhotoAdapter.getData()) {
                if (info.getPhotoId() == DEFAULT_PIC_ID) {
                    isContain = true;
                }
            }
        }

        if (mAddPhotoAdapter.getData().size() < maxNum || isContain) {
            mAddPhotoAdapter.getData().remove(mAddPhotoAdapter.getData().size() - 1);
            mAddPhotoAdapter.notifyItemRemoved(mAddPhotoAdapter.getData().size());
        }

        itemTouchHelper.startDrag(holder);
    }


    @Override
    public void onCloseImageClick(View view, int position) {
        /**
         * 该判断条件防止删除过快出现的crash
         */
        if (position <= mAddPhotoAdapter.getData().size() - 1) {
            mAddPhotoAdapter.getData().remove(position);
            mAddPhotoAdapter.notifyItemRemoved(position);
            boolean isContain = false;
            for (PhotoInfo photo : mAddPhotoAdapter.getData()) {
                if (photo.getPhotoId() == DEFAULT_PIC_ID) {
                    isContain = true;
                }
            }

            if (!isContain) {
                PhotoInfo photo = mAddPhotoAdapter.addDefaultItem();
                mAddPhotoAdapter.getData().add(photo);
                mAddPhotoAdapter.notifyItemInserted(mAddPhotoAdapter.getData().size() - 1);
            }

        }
        if (mNumCountListener != null)
            mNumCountListener.getSelectedPhotoNum(mAddPhotoAdapter.getAllPath().size());
    }

    /**
     * 设置可选择的最大照片数量
     *
     * @param maxNum
     */
    public void setMaxNum(int maxNum) {
        this.maxNum = maxNum;
        mAddPhotoAdapter.setMaxNum(maxNum);
        mAddPhotoAdapter.notifyDataSetChanged();
    }

    /**
     * 获取选择照片的本地路径
     *
     * @return
     */
    public List<String> getAllSelectedPath() {
        return mAddPhotoAdapter.getAllPath();
    }
}

这里需要注意的是layoutManager.setAutoMeasureEnabled(true)属性，该属性是在RecyclerView24以上版本才有的。其作用是为了让RecyclerView自适应高度。

该类中实现了适配器中的回调，在onImagePreviewClick(View view, final int position)和onImagePickClick(View view, int position)回调方法中结合FinalGallery库实现对图库的图片进行选择，拿到返回的路径。

在onCloseImageClick(View view, int position)回调方法实现图片的删除操作时需要加上if (position <= mAddPhotoAdapter.getData().size() - 1) 的判断，否则操作过快适配器刷新未完成会造成崩溃。

通过设置setMaxNum(int maxNum)和调用getAllSelectedPath()方法，我们可以设置选择图片的最大数量和获取到所选择图片的本地路径。

这里定义了接口onPhotoNumChangedListener来监听所选择的图片数量，可以自行选择实现与否。

public interface onPhotoNumChangedListener {
    void getSelectedPhotoNum(int count);
}

4.在这里利用RecyclerView的特性实现了选择图片的位置拖拽变换功能，需要继承ItemTouchHelper.Callback类，实现相应的方法：

public class MyItemTouchHelper extends ItemTouchHelper.Callback {

    private AddPhotoAdapter mAddPhotoAdapter;
    private int maxNum;

    public MyItemTouchHelper(AddPhotoAdapter adapter, int count) {
        this.mAddPhotoAdapter = adapter;
        this.maxNum = count;
    }

    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        if (recyclerView.getLayoutManager() instanceof GridLayoutManager) {
            final int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
            final int swipeFlags = 0;
            return makeMovementFlags(dragFlags, swipeFlags);
        } else {
            final int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
            final int swipeFlags = 0;
            return makeMovementFlags(dragFlags, swipeFlags);
        }
    }

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {

        int fromPosition = viewHolder.getAdapterPosition();
        int toPosition = target.getAdapterPosition();
        if (fromPosition < toPosition) {
            for (int i = fromPosition; i < toPosition; i++) {
                Collections.swap(mAddPhotoAdapter.getData(), i, i + 1);
            }
        } else {
            for (int i = fromPosition; i > toPosition; i--) {
                Collections.swap(mAddPhotoAdapter.getData(), i, i - 1);
            }
        }
        mAddPhotoAdapter.notifyItemMoved(fromPosition, toPosition);
        return true;
    }

    @Override
    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        super.clearView(recyclerView, viewHolder);

        if (mAddPhotoAdapter.getData().size() < maxNum) {
            PhotoInfo photo = mAddPhotoAdapter.addDefaultItem();
            mAddPhotoAdapter.getData().add(photo);
            mAddPhotoAdapter.notifyItemInserted(mAddPhotoAdapter.getData().size() - 1);
        }
    }

    @Override
    public boolean isLongPressDragEnabled() {
        return false;
    }

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {

    }
}

上一步中实现的适配器中的onImageLongClick(View view, AddPhotoAdapter.MyViewHolder holder)回调方法，我们需要在长按加载到RechclerView的图片时，如果默认图片存在，需要使其隐藏掉。并且调用itemTouchHelper.startDrag(holder);

getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder)中：我们需要判断当前的RecyclerView是实现的ListView的功能还是GridView的功能，设置拖动的方向。

在onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target)中：我们需要判断图片移动的位置，按照拖拽后的位置重新给集合排序，并且刷新RecyclerView。

isLongPressDragEnabled()中：需设置为return false。

clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder)中：在拖拽结束后需要判断当前选择的图片数量是否已经达到设置的上限，若无，需要把默认图片显示出来。

简单的几行代码就能实现这么炫酷的功能，是不是很酷。

附上git地址

实现仿微信选择多张图片，删除， 浏览等，以九宫格的样式显示，最多可显示九张图片
05-03
实现仿微信选择多张图片，删除， 浏览等，以九宫格的样式显示，最多可显示九张图片
仿微信选择最多9张图片
04-18
仿微信客户端发朋友圈最多选择9张图片上传，可以自己修改图片张数
Android 仿微信朋友圈9宫格图片展示&多选图片
03-31
博文源码 博文链接：http://blog.csdn.net/airsaid/article/details/51026447
懒人必备Android仿微信图片选择库sdk
巧克力的专栏
07-09 768
之所以写这个图片选择库是因为大部分项目都会用到，所以就抽时间写了一个sdk处理。
仿微信朋友圈9宫格图片选择器可删除.zip
06-08
仿微信朋友圈9宫格图片选择器可删除仿微信朋友圈9宫格图片选择器可删除仿微信朋友圈9宫格图片选择器可删除
Android 仿微信朋友圈9宫格图片展示&多选图片
11-11
在Android开发中，微信朋友圈的9宫格图片展示与多选图片功能是常见的需求，尤其在社交类应用中。这个项目旨在教你如何在Android应用中实现类似的功能。下面将详细介绍这些知识点。 一、9宫格图片展示 1. **自定义...
Android仿微信选择图片和拍照功能
09-01
在`MultiImageSelectorFragment`中，通常会有一个自定义的适配器来绑定数据源（即用户可选择的图片），并使用`GridView`或`RecyclerView`来展示图片缩略图。用户点击图片可以选中或者取消选中，并且在底部通常会有一...
Android开发，仿微信选择图片的图片选择器
12-19
总的来说，实现一个"Android开发，仿微信选择图片的图片选择器"需要综合运用Android SDK的多种功能，结合现代开发最佳实践，如模块化、依赖注入、异步处理等，确保功能的稳定性和用户体验。同时，测试代码（如...
Android 仿微信选择图片，上传图片
03-08
本示例项目"Android 仿微信选择图片，上传图片"旨在帮助开发者实现类似的功能，让用户可以从手机相册中选取图片，并能上传到服务器。下面我们将详细探讨这一过程中的关键知识点。 1. **权限申请**： 在Android 6.0...
仿微信多张图片选择器-----学习的DEMO
10-26
总的来说，"仿微信多张图片选择器"DEMO涉及到的知识点包括Android组件设计、多媒体文件访问、UI交互设计、图片加载库的使用、多选逻辑实现、权限管理以及性能优化等多个方面。通过学习和实践这个DEMO，开发者可以...
仿微信发朋友圈时的图片选择功能
11-01
本项目是模仿微信在发朋友圈的时候，图片选择功能，这里只实现了图片获取，并没有视频获取。获取了手机所有的图片以及图片所在文件夹，选择图片后记录数量，也加入了6.0运行时权限的判断。希望能给大家带来帮助！
仿微信图片上传 +图库选择9张图+ 多单评价
06-06
仿微信图片上传 +图库选择9张图+ 多单评价
cordova zxing 仿微信及摄像头识别率调整
01-22
修改了 zxing的扫描样式。摄像头调用的分辨率
android 批量选取多张照片
03-19
可能在开发中我们会使用到照片的选择，这时候如果大批量选择的时候！或许会用到！
cordova barcodescanner 仿微信样式并支持从相册选取
08-03
1. 首先通过cordova 命令安装二维码扫描插件 cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git 2. 安装完插件后将二维码的lib包替换为zxing.lib,jar包在我上传的demo里面有。 3. 将demo中的drawable图片拷贝到自己项目中，然后再依次拷贝layout布局文件夹，raw文件夹(此文件夹下是扫描成功后发出的声音)，values文件夹下的所有文件，xml文件夹下的xml 4.重新build一下即可
仿微信拍照和图片选择开源库（适配android7.0）multi-image-selector
黄孝果的博客
11-08 6277
防微信拍照和图片选择开源库multi-image-selector
Android绘制.9图片新手攻略
等一杯咖啡的博客
01-22 614
Android .9图片的制作，新手可以看一看
Android 自定义本地图片加载库，仿微信相册
热门推荐
lvshaorong的博客
04-27 1万+
总结一下微信的本地图片加载有以下几个特点，也是提高用户体验的关键点 1、缩略图挨个加载，一个一个加载完毕，直到屏幕所有缩略图都加载完成 2、不等当前屏的所有缩略图加载完，迅速向下滑，滑动停止时立即加载停止页面的图片 3、已经加载成功的缩略图，不管滑出去多远，滑回来的时候不需要重新加载 为了满足上面几个要求，主要采用以下几个方法： 0、为了防止图片加载出来OOM，需要对分辨率和颜色的位数进
Android图片选择器（选择多张图片）
董俊帅
11-18 5347
好久没有写过文章了，最近一直在忙公司桌面维护的一些事情，前几天接到一个写一个仿微信选择多张图片的任务，今天来总结一下。发现一个非常好用的图片选择库，下面来说一下这个库的用法： 1.通过Gradle抓取和导入Jar包（Glide和RecyclerView，文末有连接） dependencies { compile 'com.yancy.imageselector:imageselector:1
仿微信图片选择器：Android ImageSelector 实现
"Android ImageSelector是一个仿微信图片选择器的开源库，用于在Android应用中实现类似微信的图片选择功能。" 在Android应用开发中，图片选择器是一个必不可少的组件，尤其是在用户需要上传图片的场景下，如设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值