Android 图片展示器

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

}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343