RecycleView多类型布局

作者：从前慢现在也慢 | 2024-03-01 15:13:42

踩

RecycleView多类型布局

在项目中列表是基本都会用到的，然而在显示列表时，我们需要的数据可能需要不止一种item显示，对于复杂的数据就需要多种item，以不同的样式显示出来，这样效果是很棒的，我们先看一下效果
这里写图片描述

这里写图片描述

我们可以看到，这个RecyclerView中有多种item显示出来，那么具体怎么实现呢，其实在RecyclerView中，我们可以重写方法getItemViewType()，这个方法会传进一个参数position表示当前是第几个Item，然后我们可以通过position拿到当前的Item对象，然后判断这个item对象需要那种视图，返回一个int类型的视图标志，然后在onCreatViewHolder方法中给引入布局，这样就能够实现多种item显示了，讲了这么多我们看一下具体的例子

[java] view plain copy

@Override  
public int getItemViewType(int position) {  
    if(list.size() == 0){  
        return EMPTY_VIEW;  
    } else if(list.get(position) == null){  
        return PROGRESS_VIEW;  
    } else if(list.get(position).getType().equals(News.IMAGE_NEWS)){  
        return IMAGE_VIEW;  
    } else {  
        return super.getItemViewType(position);  
    }  
}  
1
2
3
4
5
6
7
8
9
10
11
12

首先我们重写了getItemViewType这个方法，在这个方法中根据position对item对象做了一些判断，如果存储item对象的集合大小为空，返回空view标识（这里为1），如果item对象为null，返回进度条标识，这个主要是用于实现下拉加载更多，如果item对象类型属于图片类型，就返回图片类型对应的Item，这个就是效果图中的第一个Item类型，否则就是其它类型，也就是效果图中的另一种item布局，然后我们在onCreatViewHolder中具体的为每一种类型引入其布局

[java] view plain copy

@Override  
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
    View view;  
    if(viewType == PROGRESS_VIEW){  
        view = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false);  
        return new ProgressViewHolder(view);  
    } else if(viewType == EMPTY_VIEW){  
        return null;  
    } else if(viewType == IMAGE_VIEW){  
        view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_news_item, parent, false);  
        return new ImageViewHolder(view);  
    } else {  
        view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);  
        return new NewsViewHolder(view);  
    }  
}  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上面的代码就是具体为每种viewType引入其对应的布局，这样就基本实现了多种item布局，但是仅仅是这些还不够，因为我们还要对每种item设置数据，所以还要对每种item写一个VIewHolder来为item显示数据

[java] view plain copy

class NewsViewHolder extends RecyclerView.ViewHolder{  

    @BindView(R.id.news_title)TextView title;  
    @BindView(R.id.news_digest)TextView digest;  
    @BindView(R.id.news_time)TextView time;  
    @BindView(R.id.news_src)ImageView image;  

    public NewsViewHolder(View itemView) {  
        super(itemView);  
        ButterKnife.bind(this, itemView);  
    }  
}  

class ImageViewHolder extends RecyclerView.ViewHolder{  

    @BindView(R.id.news_title) TextView title;  
    @BindView(R.id.image_left) ImageView imageLeft;  
    @BindView(R.id.image_right) ImageView imageRight;  
    @BindView(R.id.image_middle) ImageView imageMiddle;  
    @BindView(R.id.news_time) TextView time;  

    public ImageViewHolder(View itemView) {  
        super(itemView);  
        ButterKnife.bind(this, itemView);  
    }  
}  

class ProgressViewHolder extends RecyclerView.ViewHolder {  

    @BindView(R.id.progressBar) ProgressBar progressBar;  
    @BindView(R.id.textView) TextView textView;  

    public ProgressViewHolder(View itemView) {  
        super(itemView);  
        ButterKnife.bind(this, itemView);  
    }  
}  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

上面就是item对应的几个ViewHolder，判断viewHolder属于那种对象，然后在onBindViewHolder中根据对应的ViewHolder对其控件设置数据并显示

[java] view plain copy

@Override  
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {  
    holder.itemView.setOnClickListener(new View.OnClickListener() {  
        @Override  
        public void onClick(View v) {  
            clickListener.onItemClick(v, position);  
        }  
    });  
    if(holder instanceof NewsViewHolder){  
        NewsViewHolder viewHolder = (NewsViewHolder)holder;  
        viewHolder.title.setText(list.get(position).getTitle());  
        viewHolder.time.setText(list.get(position).getTime());  
        /** 
         * Glide加载图片 
         */  
        Glide.with(context).load(list.get(position).getImageUrl().get(0))  
                .override(dpToPx(72), dpToPx(72)).centerCrop().into(viewHolder.image);  
        if(list.get(position).getType().equals(News.TEXT_NEWS)){  
            viewHolder.digest.setText(list.get(position).getDigest());  
        } else {  
            viewHolder.digest.setText("");  
        }  
    } else if(holder instanceof ImageViewHolder){  
        ImageViewHolder viewHolder = (ImageViewHolder)holder;  
        viewHolder.title.setText(list.get(position).getTitle());  
        viewHolder.time.setText(list.get(position).getTime());  
        setItemImage(viewHolder, list, position);  
    } else if(holder instanceof ProgressViewHolder){  
        ProgressViewHolder viewHolder = (ProgressViewHolder)holder;  
        viewHolder.progressBar.setIndeterminate(true);  

    }  
}  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

整个过程基本就是这样，这种方式在项目中经常会用到，我们就可以这样去处理，下拉加载更多就可以这样实现，在加载完数据后再往对象集合中传入null，然后判断如果出现null就加载progressBar布局，再加上Google官方的SwipeRefreshLayout，下拉刷新，上拉加载就搞定了，其实很容易，而且也有点Material Design 的感觉~~

看下Adapter的全部代码

[java] view plain copy

package com.zmt.e_read.Adapter;  

import android.content.Context;  
import android.support.v7.widget.RecyclerView;  
import android.util.DisplayMetrics;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
import android.widget.ImageView;  
import android.widget.TextView;  

import com.bumptech.glide.Glide;  
import com.zmt.e_read.Module.News;  
import com.zmt.e_read.Module.OnItemClickListener;  
import com.zmt.e_read.R;  
import com.zmt.e_read.Utils.ProgressViewHolder;  

import java.util.Collection;  
import java.util.Collections;  
import java.util.List;  

import butterknife.BindView;  
import butterknife.ButterKnife;  

/** 
 * Created by Dangelo on 2016/9/27. 
 */  
public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {  

    private final int EMPTY_VIEW = 1;  
    private final int PROGRESS_VIEW = 2;  
    private final int IMAGE_VIEW = 3;  

    private Context context;  
    private List<News> list;  
    private OnItemClickListener clickListener;  

    public NewsAdapter(Context context, List<News> list, OnItemClickListener clickListener) {  
        this.context = context;  
        this.list = list;  
        this.clickListener = clickListener;  
    }  

    public void addOnItemClickListener(OnItemClickListener clickListener){  
        this.clickListener = clickListener;  
    }  

    @Override  
    public int getItemViewType(int position) {  
        if(list.size() == 0){  
            return EMPTY_VIEW;  
        } else if(list.get(position) == null){  
            return PROGRESS_VIEW;  
        } else if(list.get(position).getType().equals(News.IMAGE_NEWS)){  
            return IMAGE_VIEW;  
        } else {  
            return super.getItemViewType(position);  
        }  
    }  

    @Override  
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
        View view;  
        if(viewType == PROGRESS_VIEW){  
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false);  
            return new ProgressViewHolder(view);  
        } else if(viewType == EMPTY_VIEW){  
            return null;  
        } else if(viewType == IMAGE_VIEW){  
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_news_item, parent, false);  
            return new ImageViewHolder(view);  
        } else {  
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);  
            return new NewsViewHolder(view);  
        }  
    }  

    @Override  
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {  
        holder.itemView.setOnClickListener(new View.OnClickListener() {  
            @Override  
            public void onClick(View v) {  
                clickListener.onItemClick(v, position);  
            }  
        });  
        if(holder instanceof NewsViewHolder){  
            NewsViewHolder viewHolder = (NewsViewHolder)holder;  
            viewHolder.title.setText(list.get(position).getTitle());  
            viewHolder.time.setText(list.get(position).getTime());  
            /** 
             * Glide加载图片 
             */  
            Glide.with(context).load(list.get(position).getImageUrl().get(0))  
                    .override(dpToPx(72), dpToPx(72)).centerCrop().into(viewHolder.image);  
            if(list.get(position).getType().equals(News.TEXT_NEWS)){  
                viewHolder.digest.setText(list.get(position).getDigest());  
            } else {  
                viewHolder.digest.setText("");  
            }  
        } else if(holder instanceof ImageViewHolder){  
            ImageViewHolder viewHolder = (ImageViewHolder)holder;  
            viewHolder.title.setText(list.get(position).getTitle());  
            viewHolder.time.setText(list.get(position).getTime());  
            setItemImage(viewHolder, list, position);  
        } else if(holder instanceof ProgressViewHolder){  
            ProgressViewHolder viewHolder = (ProgressViewHolder)holder;  
            viewHolder.progressBar.setIndeterminate(true);  

        }  
    }  

    public void setItemImage(ImageViewHolder viewHolder, List<News> list, int position){  
        viewHolder.imageMiddle.setVisibility(View.VISIBLE);  
        viewHolder.imageRight.setVisibility(View.VISIBLE);  
        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();  
        if(list.get(position).getImageUrl().size() == 1){  
            Glide.with(context).load(list.get(position).getImageUrl().get(0))  
                    .override(displayMetrics.widthPixels - dpToPx(10), dpToPx(90))  
                    .centerCrop().into(viewHolder.imageLeft);  
            viewHolder.imageMiddle.setVisibility(View.GONE);  
            viewHolder.imageRight.setVisibility(View.GONE);  
        } else if(list.get(position).getImageUrl().size() == 2){  
            int imageWidth = (displayMetrics.widthPixels - dpToPx(20)) / 2;  
            Glide.with(context).load(list.get(position).getImageUrl().get(0))  
                    .override(imageWidth, dpToPx(90))  
                    .centerCrop().into(viewHolder.imageLeft);  
            Glide.with(context).load(list.get(position).getImageUrl().get(1))  
                    .override(imageWidth, dpToPx(90))  
                    .centerCrop().into(viewHolder.imageMiddle);  
            viewHolder.imageRight.setVisibility(View.GONE);  
        } else if(list.get(position).getImageUrl().size() >= 3){  
            int imageWidth = (displayMetrics.widthPixels - dpToPx(30)) / 3;  
            Glide.with(context).load(list.get(position).getImageUrl().get(0))  
                    .override(imageWidth, dpToPx(90))  
                    .centerCrop().into(viewHolder.imageLeft);  
            Glide.with(context).load(list.get(position).getImageUrl().get(1))  
                    .override(imageWidth, dpToPx(90))  
                    .centerCrop().into(viewHolder.imageMiddle);  
            Glide.with(context).load(list.get(position).getImageUrl().get(2))  
                    .override(imageWidth, dpToPx(90))  
                    .centerCrop().into(viewHolder.imageRight);  
        }  
    }  

    @Override  
    public int getItemCount() {  
        return list.size();  
    }  

    public int dpToPx(float dp){  
        float px = context.getResources().getDisplayMetrics().density;  
        return (int)(dp * px + 0.5f);  
    }  

    class NewsViewHolder extends RecyclerView.ViewHolder{  

        @BindView(R.id.news_title)TextView title;  
        @BindView(R.id.news_digest)TextView digest;  
        @BindView(R.id.news_time)TextView time;  
        @BindView(R.id.news_src)ImageView image;  

        public NewsViewHolder(View itemView) {  
            super(itemView);  
            ButterKnife.bind(this, itemView);  
        }  
    }  

    class ImageViewHolder extends RecyclerView.ViewHolder{  

        @BindView(R.id.news_title) TextView title;  
        @BindView(R.id.image_left) ImageView imageLeft;  
        @BindView(R.id.image_right) ImageView imageRight;  
        @BindView(R.id.image_middle) ImageView imageMiddle;  
        @BindView(R.id.news_time) TextView time;  

        public ImageViewHolder(View itemView) {  
            super(itemView);  
            ButterKnife.bind(this, itemView);  
        }  
    }  

    <pre name="code" class="java">    class ProgressViewHolder extends RecyclerView.ViewHolder {  

        @BindView(R.id.progressBar) ProgressBar progressBar;  
        @BindView(R.id.textView) TextView textView;  

        public ProgressViewHolder(View itemView) {  
            super(itemView);  
            ButterKnife.bind(this, itemView);  
        }  
    }  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191

}

项目地址：https://github.com/xiyouZmt/E-Read

转载：https://blog.csdn.net/zhumintao/article/details/53023920#commentsedit

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】