之前写图片上传的时候说过，要做个图片展示器来向用户展示图片。我这里是使用recyclerView来实现图片展示器的效果。
一.效果展示
展示图片我暂时只设置了三种模式。
1.动态添加模式
15048394280491504839416661.gif
比如此处设置最多五张图，添加到最后一张时，就隐藏添加图的那个按钮。
2.只允许展示图片，不允许添加
15048400146681504839989299.gif
这就是最普通的展示图片的方式。用RecyclerView就能实现了为什么要在这里特意加这个模式呢，为了复用。
3.固定总个数
15048403283391504840316493.gif
个数是固定的，对比第一个模式不是动态的改变。相比之下个人建议使用第一种，是因为有特殊需求才增加这种模式的，比如说第几个坑位只能放什么类型的图之类的需求。
二.展示器View
图片展示器我这里是使用自定义View的方式来做的，这样可以直接定义在xml中还是十分方便的。
1.View
public class PictureDisplayLayout extends RelativeLayout {
private RecyclerView mRecyclerView;
private RecyclerView.Adapter adapter;
private Context context;
private int count;
private PictureDisplayType type;
public PictureDisplayLayout(Context context) {
super(context);
initView();
}
public PictureDisplayLayout(Context context, AttributeSet attrs) {
super(context, attrs);
inial(context, attrs);
initView();
}
public PictureDisplayLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
inial(context, attrs);
initView();
}
private void inial(Context context,AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.picture_display_style);
count = typedArray.getInteger(R.styleable.picture_display_style_count,3);
type = PictureDisplayType.getType(typedArray.getInteger(R.styleable.picture_display_style_showtype,0));
typedArray.recycle();
}
public void initView(){
mRecyclerView = new RecyclerView(getContext());
mRecyclerView.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
this.addView(mRecyclerView);
mRecyclerView.setLayoutManager(new GridLayoutManager(getContext(),count));
}
/**
* 使用组合
*/
public void setAdapter(RecyclerView.Adapter adapter){
this.adapter = adapter;
adapter.registerAdapterDataObserver(new RecyclerView.AdapterDataObserver() {
@Override
public void onChanged() {
super.onChanged();
// todo 可以做数据改变时的操作
}
});
if (adapter instanceof PictureDisplayAdapter) {
((PictureDisplayAdapter)adapter).setType(type);
((PictureDisplayAdapter)adapter).setCount(count);
}
if (mRecyclerView != null) {
mRecyclerView.setAdapter(adapter);
}
}
}
因为是第一版，代码不会很复杂，不把adapter封装在内部是因为为了暂时适配多种情况，之后功能更完善之后会把adapter嵌套在内部。
代码很简单，主要是要拿到两个重要的参数：
（1） count ： 设置你总共需要展示多少张图片
（2） type ： 设置你要展示图片的模式，目前就上面展示的三种模式
2.模式与AttributeSet
（1）模式的定义采用枚举的做法
public enum PictureDisplayType {
ONLY_SHOW(0),ADD(1),ALL_SHOW(2);
private final int id;
PictureDisplayType(int k){
this.id = k;
}
public static PictureDisplayType getType(int k){
switch (k){
case 0:
return ONLY_SHOW;// 只做展示，不做添加
case 1:
return ADD;//展示数量动态改变
case 2:
return ALL_SHOW;//展示数量为固定总数
default:
return ONLY_SHOW;
}
}
}
（2）使用AttributeSet来添加count和type十分方便
<!-- 图片展示器 -->
<declare-styleable name="picture_display_style">
<attr name="hintimage" format="reference"/>
<attr name="count" format="integer"/>
<attr name="showtype" format="enum">
<enum name="only_show" value="0"/>
<enum name="add" value="1"/>
<enum name="all_show" value="2"/>
</attr>
</declare-styleable>
3.xml中定义
<com.example.kylinarm.picturedisplay.PictureDisplayLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/pdl"
app:count = "5"
app:showtype = "add"
android:background="#ffffff"
>
</com.example.kylinarm.picturedisplay.PictureDisplayLayout>
定义的方式就这么简单，有点复杂的是adapter，因为adapter要根部不同的模式去作不同的操作。
三.配置adapter与viewholder
1.adapter
代码我就不全部贴完了，就贴那几个关键的方法。在最后我会发demo的地址，想要完整代码的可以去那里拿。
（1）getItemCount
@Override
public int getItemCount() {
if (type.equals(PictureDisplayType.ADD)){
//如果小于count， + 1 是为了没到max的时候显示一个 “+” 的item
if (dataSource.size()<count){
return dataSource.size() + 1;
}else {
return dataSource.size();
}
}else if (type.equals(PictureDisplayType.ONLY_SHOW)){
return dataSource.size();
}else if (type.equals(PictureDisplayType.ALL_SHOW)){
return count;
}
return dataSource.size();
}
第一个Add模式，如果数组的个数小于用户设置的总个数，就+1，这个多出来的表示添加按钮。如果正好等于总个数的话就没有添加按钮。
第二个模式直接展示个数，第三个模式直接设置总个数。
（2）onBindViewHolder
@Override
public void onBindViewHolder(PictureDisplayHolder holder, int position) {
if (type.equals(PictureDisplayType.ADD)) {
if (position < dataSource.size()) {
holder.setDataToView(dataSource.get(position));
} else {
holder.setDataToView(null);
}
}else if (type.equals(PictureDisplayType.ONLY_SHOW)){
holder.setDataToView(dataSource.get(position));
}else if (type.equals(PictureDisplayType.ALL_SHOW)){
holder.setDataToView(dataSource.get(position));
}
}
第一个模式如果是添加按钮的情况下，传null，viewholder就会展示添加按钮。
2.viewholder
public class PictureDisplayHolder extends RecyclerView.ViewHolder {
@InjectView(R.id.btn_add_img)
ImageButton btnAddImg;
@InjectView(R.id.iv_content)
ImageView ivContent;
@InjectView(R.id.btn_delete)
ImageButton btnDelete;
private Context context;
private PictureDisplayType type;
public PictureDisplayHolder(View itemView, Context context,PictureDisplayType type) {
super(itemView);
ButterKnife.inject(this,itemView);
this.context = context;
this.type = type;
}
public void setDataToView(String data){
switch (type){
case ADD:
setDataToAdd(data);
break;
case ONLY_SHOW:
setDataToOnlyshow(data);
break;
case ALL_SHOW:
setDataToAllshow(data);
break;
}
}
private void setDataToAdd(String data){
if (data == null){
ivContent.setVisibility(View.GONE);
btnAddImg.setVisibility(View.VISIBLE);
btnDelete.setVisibility(View.GONE);
}else {
ivContent.setVisibility(View.VISIBLE);
btnAddImg.setVisibility(View.GONE);
btnDelete.setVisibility(View.VISIBLE);
Glide.with(context).load(data).into(ivContent);
}
}
private void setDataToOnlyshow(String data){
ivContent.setVisibility(View.VISIBLE);
btnAddImg.setVisibility(View.GONE);
btnDelete.setVisibility(View.GONE);
Glide.with(context).load(data).into(ivContent);
}
private void setDataToAllshow(String data){
if (data.equals("")){
ivContent.setVisibility(View.GONE);
btnAddImg.setVisibility(View.VISIBLE);
btnDelete.setVisibility(View.GONE);
}else {
ivContent.setVisibility(View.VISIBLE);
btnAddImg.setVisibility(View.GONE);
btnDelete.setVisibility(View.VISIBLE);
Glide.with(context).load(data).into(ivContent);
}
}
@OnClick({R.id.btn_add_img,R.id.btn_delete})
public void itemClick(View v){
switch (v.getId()){
case R.id.btn_add_img:
if (type.equals(PictureDisplayType.ALL_SHOW)) {
((AllShowActivity) context).index = getAdapterPosition();
}
Intent intent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
((Activity) context).startActivityForResult(intent, 0x1111);
break;
case R.id.btn_delete:
if (type.equals(PictureDisplayType.ADD)) {
((MainActivity) context).getAdapter().remove(getAdapterPosition());
}else if (type.equals(PictureDisplayType.ALL_SHOW)){
((AllShowActivity) context).getAdapter().delete(getAdapterPosition(),"");
}
break;
}
}
}
不同的模式设置不同的setdatatoview。这里做的逻辑处理不是很好，因为比较忙，写出来我就直接发布了，没时间去重构。
其实就算不用我的adapter和viewholder也行，可以自己去写，主要就是PictureDisplayLayout的使用。我想表达的是用自定义View的方法去实现图片展示器是一个很不错的选择。
项目地址：
https://github.com/994866755/handsomeYe.seekbar.picturedisplay
更新
更新时间：2017.11.28
我在之后用到这个控件的时候发现了两个问题。
1.改变枚举类型
最好把枚举类型改成整形，因为之后我记得看过一篇文章说尽量少用枚举，理由不太记得了，而这里没有绝对要使用枚举的必要，所以把三种展示图片的type从枚举变成整形。
2.改变数据结构
之前是直接传string类型，但是现在有另外的情况，如果你需要从服务器获取图片并且添加本地图片的情况呢？这样你的图片就有两种地址，第一种是网络的地址，第二种是本地地址，如果你使用暴力一点的方法的话，可以先把图片下到本地，再最后上传的时候一起上传。
但是认真想想，后台已经有图片的话就没必要重复上传了，比如5张图片，前两张是网络地址，后3张是本地的，所以最好的办法就是只传本地的3张，然后拿到成功后的三个地址再拼接已有的两个一起传给服务端。这样就需要一个type来分辨哪个地址是本地的，哪个地址是网络的。
public class PictureDisplayEntity {
public String picUrl; //图片的地址（本地地址或网络地址）
public int type; // 图片类型。 0表示网络图片，1表示本地图片
}
网友评论