Android 多个图片联动删除、修改（例如淘宝的商品评论）

最新推荐文章于 2024-04-01 03:47:41 发布
最新推荐文章于 2024-04-01 03:47:41 发布
阅读量262 收藏
点赞数
分类专栏： android activity 文章标签： android java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43184171/article/details/109601439
版权

效果图：
效果图

基本够用系列
首先xml里面我用得是FrameLayout嵌套三个LinearLayout（图片和删除按钮），其中LinearLayout里面嵌套两个ImageView，如图：布局图片

xml代码：（其中@mipmap/user_icon_upload和@mipmap/user_icon_red_close是两个本地图片）

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_height="wrap_content"
                    android:paddingLeft="16dp"
                    android:paddingTop="12dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="图片"
                        android:textColor="#ff333333"
                        android:textSize="14sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="8dp"
                        android:text="最多6张"
                        android:textColor="#ff999999"
                        android:textSize="12sp" />
                </LinearLayout>

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:paddingLeft="16dp"
                    android:paddingRight="8dp"
                    android:paddingBottom="16dp">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/iv_img1"
                            android:layout_width="104dp"
                            android:layout_height="104dp"
                            android:layout_marginTop="12dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/user_icon_upload" />

                        <ImageView
                            android:id="@+id/iv_img1_close"
                            android:layout_width="24dp"
                            android:layout_height="24dp"
                            android:layout_marginLeft="-16dp"
                            android:src="@mipmap/user_icon_red_close"
                            android:visibility="invisible" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/iv_img2"
                            android:layout_width="104dp"
                            android:layout_height="104dp"
                            android:layout_marginTop="12dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/user_icon_upload"
                            android:visibility="invisible" />

                        <ImageView
                            android:id="@+id/iv_img2_close"
                            android:layout_width="24dp"
                            android:layout_height="24dp"
                            android:layout_marginLeft="-16dp"
                            android:src="@mipmap/user_icon_red_close"
                            android:visibility="invisible" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="right"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/iv_img3"
                            android:layout_width="104dp"
                            android:layout_height="104dp"
                            android:layout_marginTop="12dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/user_icon_upload"
                            android:visibility="invisible" />

                        <ImageView
                            android:id="@+id/iv_img3_close"
                            android:layout_width="24dp"
                            android:layout_height="24dp"
                            android:layout_marginLeft="-16dp"

                            android:src="@mipmap/user_icon_red_close"
                            android:visibility="invisible" />
                    </LinearLayout>

                </FrameLayout>

                <FrameLayout
                    android:id="@+id/rl_sec_line"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:orientation="horizontal"
                    android:paddingLeft="16dp"
                    android:paddingRight="8dp"
                    android:paddingBottom="10dp"
                    android:visibility="invisible">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/iv_img4"
                            android:layout_width="104dp"
                            android:layout_height="104dp"
                            android:layout_marginTop="12dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/user_icon_upload"
                            android:visibility="invisible" />

                        <ImageView
                            android:id="@+id/iv_img4_close"
                            android:layout_width="24dp"
                            android:layout_height="24dp"
                            android:layout_marginLeft="-16dp"

                            android:src="@mipmap/user_icon_red_close"
                            android:visibility="invisible" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/iv_img5"
                            android:layout_width="104dp"
                            android:layout_height="104dp"
                            android:layout_marginTop="12dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/user_icon_upload"
                            android:visibility="invisible" />

                        <ImageView
                            android:id="@+id/iv_img5_close"
                            android:layout_width="24dp"
                            android:layout_height="24dp"
                            android:layout_marginLeft="-16dp"

                            android:src="@mipmap/user_icon_red_close"
                            android:visibility="invisible" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="right"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/iv_img6"
                            android:layout_width="104dp"
                            android:layout_height="104dp"
                            android:layout_marginTop="12dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/user_icon_upload"
                            android:visibility="invisible" />

                        <ImageView
                            android:id="@+id/iv_img6_close"
                            android:layout_width="24dp"
                            android:layout_height="24dp"
                            android:layout_marginLeft="-16dp"

                            android:src="@mipmap/user_icon_red_close"
                            android:visibility="invisible" />
                    </LinearLayout>

                    <View
                        android:layout_width="0dp"
                        android:layout_height="1dp"
                        android:layout_weight="1" />
                </FrameLayout>

            </LinearLayout>

当然，xml部分并不是很重要，重点是代码里面，由于我是上传图片再返回图片对应的url，所以先写上传的点击事件和删除的点击事件：

/**
* 控件绑定（黄油刀）及需要用到的数组
*/
private List<String> urls = new ArrayList<>();
private String url;
 private boolean select = false;

@InjectView(R.id.iv_img1)
    ImageView ivImg1;
    @InjectView(R.id.iv_img1_close)
    ImageView ivImg1Close;
    @InjectView(R.id.iv_img2)
    ImageView ivImg2;
    @InjectView(R.id.iv_img2_close)
    ImageView ivImg2Close;
    @InjectView(R.id.iv_img3)
    ImageView ivImg3;
    @InjectView(R.id.iv_img3_close)
    ImageView ivImg3Close;
    @InjectView(R.id.iv_img4)
    ImageView ivImg4;
    @InjectView(R.id.iv_img4_close)
    ImageView ivImg4Close;
    @InjectView(R.id.iv_img5)
    ImageView ivImg5;
    @InjectView(R.id.iv_img5_close)
    ImageView ivImg5Close;
    @InjectView(R.id.iv_img6)
    ImageView ivImg6;
    @InjectView(R.id.iv_img6_close)
    ImageView ivImg6Close;
/**
*初始化和长按点击事件
*/

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        for (int i = 0; i < 6; i++) {
            urls.add(null);
        }
        ivImg1.setOnLongClickListener(longClickListener);
        ivImg2.setOnLongClickListener(longClickListener);
        ivImg3.setOnLongClickListener(longClickListener);
        ivImg4.setOnLongClickListener(longClickListener);
        ivImg5.setOnLongClickListener(longClickListener);
        ivImg6.setOnLongClickListener(longClickListener);
}
/**
*黄油刀的点击事件
*/
 @OnClick({R.id.iv_img1, R.id.iv_img2, R.id.iv_img3,
            R.id.iv_img4, R.id.iv_img5, R.id.iv_img6,
            R.id.iv_img1_close, R.id.iv_img2_close, R.id.iv_img3_close,
            R.id.iv_img4_close, R.id.iv_img5_close, R.id.iv_img6_close})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.iv_img1:
            case R.id.iv_img2:
            case R.id.iv_img3:
            case R.id.iv_img4:
            case R.id.iv_img5:
            case R.id.iv_img6:
            //图片浏览器，可百度使用方法
                Album.image(this)
                        .singleChoice()
                        .camera(true)
                        .columnCount(3)
                        .onResult(new Action<ArrayList<AlbumFile>>() {
                            @Override
                            public void onAction(@NonNull ArrayList<AlbumFile> result) {
                                if (result.size() > 0) {
                                    AlbumFile file = result.get(0);
                                    //这里上传数据到服务器
                                }
                            }
                        })
                        .onCancel(new Action<String>() {
                            @Override
                            public void onAction(@NonNull String result) {
                            }
                        })
                        .start();
                break;
            case R.id.iv_img1_close:
                urls.set(0, null);
                closeChange();
                break;
            case R.id.iv_img2_close:
                urls.set(1, null);
                closeChange();
                break;
            case R.id.iv_img3_close:
                urls.set(2, null);
                closeChange();
                break;
            case R.id.iv_img4_close:
                urls.set(3, null);
                closeChange();
                break;
            case R.id.iv_img5_close:
                urls.set(4, null);
                closeChange();
                break;
            case R.id.iv_img6_close:
                urls.set(5, null);
                closeChange();
                break;
        }
    }

closeChange();的方法下面单独说（因为比较重要），然后需要在返回数据的方法里写上：


    /**
    * 获取后台返回的url后
    */
    @Override
    public void returnSuccess(String url){
		ivImg1Close.setVisibility(View.INVISIBLE);
        ivImg2Close.setVisibility(View.INVISIBLE);
        ivImg3Close.setVisibility(View.INVISIBLE);
        ivImg4Close.setVisibility(View.INVISIBLE);
        ivImg5Close.setVisibility(View.INVISIBLE);
        ivImg6Close.setVisibility(View.INVISIBLE);
        //StringUtil.isEmpty判断是否为空的工具类
        //GlideUtil加载url地址的图片的工具类
        for (int i = 0; i < 6; i++) {
            if (StringUtil.isEmpty(urls.get(i)) == true) {
                urls.set(i, url);
                if (i == 0) {
                    GlideUtil.loadPicture(url, ivImg1);
                    ivImg2.setVisibility(View.VISIBLE);
                    break;
                } else if (i == 1) {
                    GlideUtil.loadPicture(url, ivImg2);
                    ivImg3.setVisibility(View.VISIBLE);
                    break;
                } else if (i == 2) {
                    GlideUtil.loadPicture(url, ivImg3);
                    rlSecLine.setVisibility(View.VISIBLE);
                    ivImg4.setVisibility(View.VISIBLE);
                    break;
                } else if (i == 3) {
                    GlideUtil.loadPicture(url, ivImg4);
                    ivImg5.setVisibility(View.VISIBLE);
                    break;
                } else if (i == 4) {
                    GlideUtil.loadPicture(url, ivImg5);
                    ivImg6.setVisibility(View.VISIBLE);
                    break;
                } else if (i == 5) {
                    GlideUtil.loadPicture(url, ivImg6);
                    break;
                }
            }
        }
        }

上面主要做了判断数组里面是不是为空，如果为空就将url设置进去并将下一个imageview显示出来
接下来就是长按展示删除按钮，longClickListener这个方法直接绑定给ivImg1.setOnLongClickListener（）就行了

    private ImageView.OnLongClickListener longClickListener = new View.OnLongClickListener() {
        @Override
        public boolean onLongClick(View view) {
            if (select == false) {
                if (!StringUtil.isEmpty(urls.get(0)))
                    ivImg1Close.setVisibility(View.VISIBLE);
                if (!StringUtil.isEmpty(urls.get(1)))
                    ivImg2Close.setVisibility(View.VISIBLE);
                if (!StringUtil.isEmpty(urls.get(2)))
                    ivImg3Close.setVisibility(View.VISIBLE);
                if (!StringUtil.isEmpty(urls.get(3)))
                    ivImg4Close.setVisibility(View.VISIBLE);
                if (!StringUtil.isEmpty(urls.get(4)))
                    ivImg5Close.setVisibility(View.VISIBLE);
                if (!StringUtil.isEmpty(urls.get(5)))
                    ivImg6Close.setVisibility(View.VISIBLE);
                select = true;
            } else {
                ivImg1Close.setVisibility(View.INVISIBLE);
                ivImg2Close.setVisibility(View.INVISIBLE);
                ivImg3Close.setVisibility(View.INVISIBLE);
                ivImg4Close.setVisibility(View.INVISIBLE);
                ivImg5Close.setVisibility(View.INVISIBLE);
                ivImg6Close.setVisibility(View.INVISIBLE);
                select = false;
            }
            return false;
        }
    };

最后就是比较重要的closeChange这个方法，这个方法会删除前面urls这个数组里面数据为空的元素，然后判断每个元素是不是为空，如果不为空就显示新的，当然这样子不能多选删除

public void closeChange() {
        ivImg1Close.setVisibility(View.INVISIBLE);
        ivImg2Close.setVisibility(View.INVISIBLE);
        ivImg3Close.setVisibility(View.INVISIBLE);
        ivImg4Close.setVisibility(View.INVISIBLE);
        ivImg5Close.setVisibility(View.INVISIBLE);
        ivImg6Close.setVisibility(View.INVISIBLE);
        List<String> url = new ArrayList<>();
        for (int i = 0; i < urls.size(); i++) {
            if (!StringUtil.isEmpty(urls.get(i))) {
                url.add(urls.get(i));
            }
            urls.set(i,null);
        }

        for (int i = 0; i < url.size(); i++) {
            urls.set(i, url.get(i));
        }
        if (urls.get(0) != null) {
            GlideUtil.loadPicture(urls.get(0), ivImg1);
            if (urls.get(1) != null) {
                GlideUtil.loadPicture(urls.get(1), ivImg2);
                if (urls.get(2) != null) {
                    GlideUtil.loadPicture(urls.get(2), ivImg3);
                    if (urls.get(3) != null) {
                        GlideUtil.loadPicture(urls.get(3), ivImg4);
                        if (urls.get(4) != null) {
                            GlideUtil.loadPicture(urls.get(3), ivImg5);
                            if (urls.get(5) != null) {
                                GlideUtil.loadPicture(urls.get(5), ivImg6);
                            } else {
                                GlideUtil.loadDrawableRes(R.mipmap.user_icon_upload, ivImg6);
                            }
                        } else {
                            GlideUtil.loadDrawableRes(R.mipmap.user_icon_upload, ivImg5);
                            ivImg6.setVisibility(View.INVISIBLE);
                        }
                    } else {
                        GlideUtil.loadDrawableRes(R.mipmap.user_icon_upload, ivImg4);
                        ivImg5.setVisibility(View.INVISIBLE);
                    }
                } else {
                    GlideUtil.loadDrawableRes(R.mipmap.user_icon_upload, ivImg3);
                    ivImg4.setVisibility(View.INVISIBLE);
                }
            } else {
                GlideUtil.loadDrawableRes(R.mipmap.user_icon_upload, ivImg2);
                ivImg3.setVisibility(View.INVISIBLE);
            }
        } else {
            GlideUtil.loadDrawableRes(R.mipmap.user_icon_upload, ivImg1);
            ivImg2.setVisibility(View.INVISIBLE);
        }
    }
  • 最后说一下原理，因为是单线操作所以会比较简单，首先获得图片url后就展示在页面并加载到数组里面，删除一个图片时直接把数组里相同位置的元素变成空，遍历后排除空的元素就判断数组到第几个时为空，为空就删除展示页面的图片并把下一个图片隐藏，而由于是单选删除，所以基本不会有bug出现
  • 如果出bug了可以评论区提出
紫薯千层糕
关注
专栏目录
android开发常用组件和第三方库（二）
watertekhqx的博客
05-09 7164
都是在github上开源的项目，覆盖面非常之广，有它在手android开发无忧
各种Android ui 开源框架
最新发布
wang688699的博客
04-06 1613
在当下这个信息共享的时代，很多资源都可以在网络上找到，只取决于你愿不愿意找或是找的方法对不对了很多朋友不是没有资料，大多都是有几十上百个G，但是杂乱无章，不知道怎么看从哪看起，甚至是看后就忘如果大家觉得自己在网上找的资料非常杂乱、不成体系的话，我也分享一套给大家，比较系统，我平常自己也会经常研读。
Android图片批量删除
09-29
选取一项或多项,Android图片批量删除的功能,并解决集合滑动item紊乱问题.
安卓开发仿微信图片拖拽_仿微信朋友圈发表图片拖拽和删除功能
weixin_39944944的博客
12-21 205
原标题：仿微信朋友圈发表图片拖拽和删除功能 中国联通在香港公布了上市公司2017年中期业绩。2017年上半年，公司主要业绩指标持续向好，收入稳步回升，服务收入达到人民币1,241.1亿元，同比增长3.2%。盈利能力按计划明显改善，EBITDA达到人民币435.6亿元，同比增长5.5%，EBITDA占服务收入比达到35.1%，同比提升0.8个百分点；权益持有者应占盈利(净利润)同比增长68.9%，达...
Android GridView扩展仿微信微博发图动态添加删除图片功能
08-27
主要为大家详细介绍了Android GridView扩展仿微信微博发图动态添加删除图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android-MultiPictureView是一个将多张图片组合显示并支持添加和删除的控件
08-13
MultiPictureView 是一个将多张图片组合显示并支持添加和删除的控件
android批量文件上传（android批量图片上传）
dgqvhtlwq472235338的博客
10-21 76
原文：http://blog.csdn.net/y150481863/article/details/25201085 项目中多处用到文件批量上传功能，今天正好解决了此问题，在此写出来，以便日后借鉴。 首先，以下架构下的批量文件上传可能会失败或者不会成功： 1.android客户端+springMVC服务端：服务端采用org.springframewo...
android高仿淘宝购物车
11-30
在Android应用开发中，"高仿淘宝...总的来说，"android高仿淘宝购物车"项目涵盖了Android开发中多个重要方面，包括UI设计、数据管理、用户交互和性能优化。通过这个项目，开发者可以提升自己在实际开发中的综合能力。
Android 特效大全代码资源——源码
2401_84002482的博客
04-01 977
保存Fragment的状态。- 一个模仿iOS UIPopoverController效果的控件。- 实现星球大战字幕效果。- 电影级TextView动画效果，绝对惊艳你的双眼！。- listView侧滑删除效果：SwipeMenuListView。- 分类侧滑菜单。。- 带视觉差的侧滑返回，类似于新版微信和lofter的侧滑返回效果。核心代码小于50行。- 取代TabHost，实现滑动tab，引导页等效果。- 图片圆角、三角、五角、圆形、多角。- 隐藏图片的导航栏。
android 添加删除画面,Android中RecyclerView实现Item添加和删除的代码示例
weixin_36410567的博客
05-25 412
本文介绍了Android中RecyclerView实现Item添加和删除的代码示例，分享给大家，具体如下：先上效果图：RecyclerView简介:RecyclerView用以下两种方式简化了数据的展示和处理:1. 使用LayoutManager来确定每一个item的排列方式。2. 为增加和删除项目提供默认的动画效果,也可以自定义。RecyclerView项目结构如下：Adapter:使用Recy...
android仿淘宝添加地址
06-15
淘宝2018的添加收货地址的效果 , 收货地址选择，三页联动。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
Android GridView扩展仿微信微博发图动态添加删除图片
热门推荐
DylanAndroid
11-04 1万+
在平时的开发中，我们会看到不管是微信发朋友圈照片还是微博发布新鲜事，添加图片的时候都是选完后面还有个+号再去选择图片，这样的话比较方便用户去添加图片，有的右上角还有个－号方便用户去删除图片，而一般用户选择的图片多少都是不定的，我们只限制最大张数，我们用gridview去实现，代码可能比较简单，高手请略过。 0.效果图 1.准备资源图片 添加图片的+号图片 删除图片的图片
Android 调用相机相册并设置在GridView控件上，支持增加、删除
看美丽风晴
08-05 1525
感觉现在对于相机或者是相册上传图片，用的很多，而且好的例子也很少，我这个是上传前会有添加图片，在这里我规定的上传3张，所以那个添加图片的按钮消失了。下面给大家张图，喜欢的可以赶紧来，不用导入什么文件，直接代码实现。。 activity.main 先把这些布局给导入一下吧： &amp;amp;amp;lt;?xml version=&amp;amp;quot;1.0&amp;amp;quot; encoding=&amp;amp;quot;utf-8&amp
加载商品图片控件、长按可拖动、右上角删除按钮
qq331710168的专栏
03-11 3441
展示图片控件、长按可拖动、右上角删除按钮、可控制行数及一行的个数
android 多种方式实现拍照保存并更新图库，删除图片，获取所有图片
Framework-coder的博客
11-14 1724
多种方式实现拍照保存并更新图库，删除图片视频，查询数据库获取所有图片
AndroidStudio实现仿微信多图上传、删除
Max_Adrew的博客
12-19 2901
最近一直在忙项目很久没写博客了。今天补上最近遇到的问题。 前两天说要实现一个点击图片选择或者从相册上传图片，然后这个选择框自动后移以为。但最多上传四种。类似这种。 点击减号可以对应删除图片。图片显示就有gridview就行了上代码： public class GridViewAddImageAdapter extends BaseAdapter { private List&l...
Android动态添加和删除布局详解(及demo)
yuhang01的博客
10-18 1691
因公司需求的增加，需要我进行扫码完成后动态的添加数据到相同的布局中 效果图是这样的： 其中，点击扫码按钮的时候进行条形码的扫描以及添加他们共有的字段 共有的布局如下： fahuoadditem.layout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.an...
android studio recyclerview长按删除
sdsfs443的博客
08-03 3554
mainactivity： package com.example.jowang.indiatutorialrecycler803; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager;
Android安卓项目selector方法item里面修改选中显示图片大小
weixin_55751186的博客
06-20 2310
本文方法在selector中使用标签，这样就可以设置图片width、height属性
Android 中心导航栏的两个ViewPager联动实现
"Android 两个ViewPager的联动效果的实现" 在Android开发中，有时我们需要实现一个特殊的界面布局，其中导航栏位于屏幕中央，而非传统的顶部或底部。这种情况下，可能会涉及两个ViewPager的联动效果，以便用户在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值