常见的两种UI样式:
1.列表最后一张默认显示的是一张“加号”图片,点击可以拍照或者从相册中选择照片。当已选图片超过自定义最大张数(比如9张)时,“加号”图片消失。
2.列表第一张始终是默认的”加号”图片,点击可以拍照或者从相册中选择照片。当已选图片超过自定义最大张数(比如5张)时,“加号”图片不消失。
实现思路:
样式一:
整体布局为recycleview,
recyclerView.setLayoutManager(new GridLayoutManager(this, 3)); recyclerView.setAdapter(mAdapter);
重在控制adppter中的@Override public int getItemCount() {}
。当数据源list集合size等于自定义最大张数(9)时返回最大张数(9),否则返回list.size()+1;
注意:此处的“+1”即为自行添加的“加号”图片。现在设定一种场景,我们要展示的最大图片张数为9张。分情况讨论:1.数据源list的size=9,即含有9张图片,那么此时不需要显示“加号”图片,直接把list中的9张图片展示出来即可;2.list的size<9,即list含有的图片张数不满足我们的设定条件,次数需要在list集合末尾添加“加号”图片,点击“加号”图片来增加list中的图片数量以满足我们的设定条件。所以才有在 getItemCount()中两种条件的出现。
RecyclerView.Adapter mAdapter = new RecyclerView.Adapter<PaypicHolder>() {
@Override
public PaypicHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View picView = View.inflate(parent.getContext(), R.layout.recycler_paypic_item, null);
return new PaypicHolder(picView);
}
@Override
public void onBindViewHolder(final PaypicHolder holder, final int position) {
holder.item_del_iv_icon_back.setVisibility(View.GONE);
//在list.size<9时,最后一个默认显示“加号”图片
if (position == mReturnList.size()) {
holder.item_pay_pic.setImageResource(R.mipmap.up_add_icon);
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//从相册中选择图片 此处使用知乎开源库Matisse
Matisse.from(MainActivity.this)
.choose(MimeType.allOf())
.countable(true)
//相册图片每次只能选择一张
.maxSelectable(1)
.addFilter(new GifSizeFilter(320, 320, 5 * Filter.K * Filter.K))
.gridExpectedSize(getResources().getDimensionPixelSize(R.dimen.grid_expected_size))
.restrictOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED)
.thumbnailScale(0.85f)
.imageEngine(new GlideEngine())
.forResult(REQUEST_CODE_CHOOSE_GRIDE);
}
});
} else {
//glide 加载图片
Glide.with(MainActivity.this).load(mReturnList.get(position).getUri()).asBitmap().into(holder.item_pay_pic);
//非最后一张显示删除角标
if (position < mReturnList.size()) {
//图片删除角标
holder.item_del_iv_icon_back.setVisibility(View.VISIBLE);
holder.item_del_iv_icon_back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//从数据源list中移除
mReturnList.remove(position);
notifyDataSetChanged();
}
});
}
}
}
@Override
public int getItemCount() {
//含有9张图片,直接展示,不需要“加号”图片
if (mReturnList.size() == 9) {
return 9;
}
//小于9张需要“加号”图片
return mReturnList.size() + 1;
}
};
class PaypicHolder extends RecyclerView.ViewHolder {
/**
* 图片控件
*/
ImageView item_pay_pic;
/**
* 图片删除控件
*/
ImageView item_del_iv_icon_back;
public PaypicHolder(View itemView) {
super(itemView);
item_pay_pic = itemView.findViewById(R.id.item_pay_pic);
item_del_iv_icon_back = itemView.findViewById(R.id.item_del_iv_icon_back);
}
}
选完照片的回调:
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
//知乎开源库Matisse选完照片
if (requestCode == REQUEST_CODE_CHOOSE_GRIDE && resultCode == RESULT_OK) {
List<Uri> list = Matisse.obtainResult(data);
if (!list.isEmpty()) {
if (null != list.get(0)) {
//ImageBean 照片bean
//因为在选择照片时已经限制了每次只能选择一张,故此处list的大小为1,只取第一张
mReturnList.add(new ImageBean(list.get(0)))
mAdapter.notifyDataSetChanged();
}
}
}
}
照片实体:
public class ImageBean {
private Uri uri;
public ImageBean(Uri uri) {
this.uri = uri;
}
public Uri getUri() {
return uri;
}
public void setUri(Uri uri) {
this.uri = uri;
}
}
样式二:
因为“加号”图片始终在第一张位置显示,所以getItemCount()始终返回list.size()+1,图片张数的控制只需要判断list.size()的大小
RecyclerView.Adapter mAdapter = new RecyclerView.Adapter<PaypicHolder>() {
@Override
public PaypicHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View picView = View.inflate(parent.getContext(), R.layout.recycler_paypic_item, null);
return new PaypicHolder(picView);
}
@Override
public void onBindViewHolder(final PaypicHolder holder, final int position) {
holder.item_del_iv_icon_back.setVisibility(View.GONE);
//第一张默认显示“加号”图片
if (position == 0) {
holder.item_pay_pic.setImageResource(R.mipmap.up_add_icon);
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//最多五张图
if (mReturnList.size() >=5) {
Toast.makeText(MainActivity1.this, "最多5张哦", Toast.LENGTH_SHORT).show();
return;
}
//从相册中选择图片 此处使用知乎开源库Matisse
Matisse.from(MainActivity1.this)
.choose(MimeType.allOf())
.countable(true)
//相册图片每次只能选择一张
.maxSelectable(1)
.addFilter(new GifSizeFilter(320, 320, 5 * Filter.K * Filter.K))
.gridExpectedSize(getResources().getDimensionPixelSize(R.dimen.grid_expected_size))
.restrictOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED)
.thumbnailScale(0.85f)
.imageEngine(new GlideEngine())
.forResult(REQUEST_CODE_CHOOSE_GRIDE);
}
});
} else {
if (position - 1 >= 0) {
//图片删除角标
holder.item_del_iv_icon_back.setVisibility(View.VISIBLE);
holder.item_del_iv_icon_back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//从数据源list中移除
mReturnList.remove(position);
notifyDataSetChanged();
}
});
//glide 加载图片
Glide.with(MainActivity1.this).load(mReturnList.get(position - 1).getUri()).asBitmap().into(holder.item_pay_pic);
}
}
}
@Override
public int getItemCount() {
return mReturnList.size() + 1;
}
};
class PaypicHolder extends RecyclerView.ViewHolder {
/**
* 图片控件
*/
ImageView item_pay_pic;
/**
* 图片删除控件
*/
ImageView item_del_iv_icon_back;
public PaypicHolder(View itemView) {
super(itemView);
item_pay_pic = itemView.findViewById(R.id.item_pay_pic);
item_del_iv_icon_back = itemView.findViewById(R.id.item_del_iv_icon_back);
}
}