Android 图片展示器

更新时间：2022-05-10 04:55:47

之前写图片上传的时候说过，要做个图片展示器来向用户展示图片。我这里是使用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表示本地图片

}

上一篇 : ：ASP.net:未能加载文件或程序集下一篇 : ASP.NET C# 用后台代码实现跨域名访问返回HTML代码