Android 九宫格图片展示的实现

添加图片效果图:

添加满 9 张图片效果图:

添加文件相关文章:《图片操作框架 TakePhoto 的引入

长按删除图片效果图:

删除弹窗相关文章:《常用代码整理:Android 常用弹窗整理

采用 RecyclerView.Adapter 实现九宫格:

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

    private List<String> mData;
    private final int mCountLimit = 9;

    private OnItemClickListener mOnItemClickListener;

    public interface OnItemClickListener {
        void onTakePhotoClick();
        void onItemLongClick(View view, int position);
    }

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.mOnItemClickListener = onItemClickListener;
    }

    public ImageAdapter(List<String> data) {
        this.mData = data;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        ImageView imageView = new ImageView(parent.getContext());
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(SizeUtil.dip2px(parent.getContext(), 95), SizeUtil.dip2px(parent.getContext(), 95));
        params.setMargins(10, 10, 10, 10);
        params.gravity = Gravity.CENTER;
        imageView.setLayoutParams(params);
        return new MyViewHolder(imageView);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, final int position) {
        if (position == getItemCount() - 1 && mData.size() < mCountLimit) {
            holder.imageView.setImageResource(R.mipmap.detal_icon_add);
            holder.imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mOnItemClickListener.onTakePhotoClick();
                }
            });
        } else {
            // 本地图片
            Glide.with(BaseApplication.getInstance().getApplicationContext()).load(new File(mData.get(position))).into(holder.imageView);
            // 网络图片
            // Glide.with(BaseApplication.getInstance().getApplicationContext()).load(mData.get(position)).into(holder.imageView);
            holder.imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // 点击操作,后续可添加点击后的响应
                }
            });
            // 长按监听
            holder.imageView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    mOnItemClickListener.onItemLongClick(v, position);
                    return true;
                }
            });
        }
    }

    @Override
    public int getItemCount() {
        // 满 9张图就不让其添加新图
        if (mData != null && mData.size() >= mCountLimit) {
            return mCountLimit;
        } else {
            return mData == null ? 1 : mData.size() + 1;
        }
    }

    class MyViewHolder extends RecyclerView.ViewHolder {

        private ImageView imageView;

        private MyViewHolder(View itemView) {
            super(itemView);
            imageView = (ImageView) itemView;
        }
    }
}

调用代码:

mRlvImage.setLayoutManager(new GridLayoutManager(DetailActivity.this, 3));
mImageAdapter = new ImageAdapter(mSDImageList);
mImageAdapter.setOnItemClickListener(new ImageAdapter.OnItemClickListener() {
    @Override
    public void onTakePhotoClick() {
        showImageDialog();
    }
    @Override
    public void onItemLongClick(View view, int position) {
        showDeletePop(view, position);
    }
});
mRlvImage.setAdapter(mImageAdapter);
// 添加图片
mSDImageList.add(imageUri);
mImageAdapter.notifyDataSetChanged();

// 长按删除
mSDImageList.remove(position);
mImageAdapter.notifyDataSetChanged();
  • 3
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
NineGridImageView 是一个九宫格图片控件。用法1. 首先添加依赖compile 'com.jaeger.ninegridimageview:library:1.0.0'2. 在布局文件中添加 NineGridImageView, 如下所示:nineGridImageView.setAdapter(nineGridViewAdapter);下面是 NineGridImageViewAdapter.class 的源码:public abstract class NineGridImageViewAdapter {     protected abstract void onDisplayImage(Context context, ImageView imageView, T t);     protected void onItemImageClick(Context context, int index, List list) {          }     protected ImageView generateImageView(Context context) {         GridImageView imageView = new GridImageView(context);         imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);         return imageView;     }}T 是你图片的数据类型, 你可以简单的使用 String 类型也可以是你自定义的类型;你必须重写 onDisplayImage(Context context, ImageView imageView, T t) 方法去设置显示图片的方式, 你可以使用 Picasso、Glide 、ImageLoader 或者其他的图片加载库,你也可以给 ImageView 设置一个占位图;如果你需要处理图片的点击事件,你可以重写 onItemImageClick(Context context, int index, List list) 方法,加上你自己的处理逻辑;如果你要使用自定义的 ImageView,你可以重写 generateImageView(Context context) 方法, 去生成自定的 ImageView。下面是一段示例代码:private NineGridImageViewAdapter mAdapter = new NineGridImageViewAdapter() { @Override protected void onDisplayImage(Context context, ImageView imageView, Photo photo) { Picasso.with(context)                     .load(photo.getSmallUrl)                     .placeholder(R.drawable.ic_default_image)                     .into(imageView);             }         @Override         protected ImageView generateImageView(Context context) {             return super.generateImageView(context);         }         @Override         protected void onItemImageClick(Context context, int index, List photoList) {            showBigPicture(context, photoList.get(index).getBigUrl());         }     };         ... mNineGridImageView.setAdapter(mAdapter);...4. 给 NineGridImageView 设置图片数据:nineGridImageView.setImagesData(List imageDataList);图片展示

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值