效果图:
基本够用系列
首先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了可以评论区提出