需求：我们在一些app上，特别是电商的app 上常见到 文字+图片评价。最多评论几张图片，等等的需求。此时你会发现有的图片右上角会有个删除图标（如下图）
image.png
点击图标图片会删除，本篇文章就粗略的来实现下此功能😁
1 大体思路
自定义控件
2具体实现（啥也不说了上代码😂）
主布局（用来显示添加的图片以及添加按钮）
<?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>
自定义View
package com.example.zhangbiao.huanbeidemo;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
/**
* 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);
}
}
自定义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>
主activity的调用
package com.example.zhangbiao.huanbeidemo;
import android.content.ContentResolver;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import java.io.FileNotFoundException;
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);
}
}
效果：
image.png
小结：在公司实习看到此处的实现便自己总结简略的实现了一下，总的来说知道了这种效果如何实现的，但是本文写的过为粗略，还有诸如图片的裁剪，内存大小控制的都没有去搞，布局UI也搞得比较丑将就的看吧😁写这篇目的是为了自己实习的总结，以及为没见过此实现的童鞋们提供一个思路。
网友评论