自带删除图片的DeleteImageView简单实现

声明：原文来源于我的简书（dev晴天）文章“自带删除图标的DeleteImageView”

需求：我们在一些app上，特别是电商的app 上常见到 文字+图片评价。最多评论几张图片，等等的需求。此时你会发现有的图片右上角会有个删除图标（如下图）

点击图标图片会删除，本篇文章就粗略的来实现下此功能?

一 、实现思路

自定义控件

二 、具体实现（啥也不说了上代码?）

1、首先自定义View 类

/**
* Created by 晴天 on 2018/8/10
* <p>
* 带删除图标的ImageView
*/
public class DeleteImageView extends RelativeLayout {

   private ImageView mImg;
   private ImageView mIv_delete;

   public DeleteImageView(Context context) {

       this(context, null);

   }

   public DeleteImageView(Context context, AttributeSet attrs) {
       this(context, attrs, 0);
   }

   public DeleteImageView(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
       LayoutInflater inflater = LayoutInflater.from(context);
       View view= inflater.inflate(R.layout.delete_view,this);

       mImg = view.findViewById(R.id.iv_img);
       mIv_delete = view.findViewById(R.id.iv_delete);
   }

   //向外部提供接口
   public ImageView getImg() {
       return mImg;
   }

  public void setDeleteListener(OnClickListener onClickListener){
       mIv_delete.setOnClickListener(onClickListener);
   }

}

2、自定义view的xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_margin="8dp"
        android:scaleType="center"
        android:id="@+id/iv_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageView

        android:id="@+id/iv_delete"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:src="@android:drawable/ic_delete"/>

</RelativeLayout>

3、主布局（用来显示添加的图片以及添加按钮）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".SecActivity"
    android:background="#cccccc"
    android:orientation="vertical">
    <HorizontalScrollView
        android:background="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp">
            <LinearLayout
                android:orientation="horizontal"
                android:id="@+id/ll_contain"
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />
            <ImageButton
                android:background="@null"
                android:id="@+id/ib_add_photo"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:src="@android:drawable/ic_input_add"/>

        </LinearLayout>

    </HorizontalScrollView>

</LinearLayout>

4、主activity的调用

public class SecActivity extends AppCompatActivity {

    private ImageButton mIbAddPhoto;
    private LinearLayout mLlContain;
    private int size = 0;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sec);

        intiUI();
    }

    private void intiUI() {
        mIbAddPhoto = findViewById(R.id.ib_add_photo);
        mLlContain = findViewById(R.id.ll_contain);

        mIbAddPhoto.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (size >= 5) {
                    Toast.makeText(SecActivity.this, "一次只能上传五张图片！！！", Toast.LENGTH_SHORT).show();
                    return;
                }

                Intent intent = new Intent(Intent.ACTION_PICK);
                intent.setType("image/*");
                startActivityForResult(intent, 0);
                size++;
            }
        });
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode == RESULT_OK) {
            Log.i("2333", "onActivityResult: " + data.getData());
            ContentResolver cr = this.getContentResolver();
            try {
                Bitmap bitmap = BitmapFactory.decodeStream(cr.openInputStream(data.getData()));
                final DeleteImageView deleteImageView = new DeleteImageView(SecActivity.this);
                deleteImageView.getImg().setImageBitmap(bitmap);
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(dip2px(SecActivity.this, 74),dip2px(SecActivity.this, 74));
                deleteImageView.setLayoutParams(params);
                mLlContain.addView(deleteImageView);
                deleteImageView.setDeleteListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        mLlContain.removeView(deleteImageView);
                        size--;
                    }
                });
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
        }


    }

    /*转化工具*/

        /**
         * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
         */
        public  int dip2px(Context context, float dpValue) {
            final float scale = context.getResources().getDisplayMetrics().density;
            return (int) (dpValue * scale + 0.5f);
        }

        /**
         * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
         */
        public  int px2dip(Context context, float pxValue) {
            final float scale = context.getResources().getDisplayMetrics().density;
            return (int) (pxValue / scale + 0.5f);
        }

}

效果：

小结：

以前在公司实习时看到此处的实现便自己总结简略的实现了一下，总的来说知道了这种效果如何实现的，但是本文写的过为粗略，还有诸如图片的裁剪，内存大小控制的都没有去搞，布局UI也搞得比较丑将就的看吧?写这篇目的是为了简单的总结一下，以及为没见过此实现的童鞋们提供一个思路。立个flag等自己知识丰富了在搞个完善的。。。。。溜了！！！