RecyclerView实现多种item布局

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

 

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

 

1. @Override

2. public int getItemViewType(int position) {

3. if(list.size() == 0){

4. return EMPTY_VIEW;

5. } else if(list.get(position) == null){

6. return PROGRESS_VIEW;

7. } else if(list.get(position).getType().equals(News.IMAGE_NEWS)){

8. return IMAGE_VIEW;

9. } else {

10. return super.getItemViewType(position);

11. }

12. }

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

 

 

1. @Override

2. public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

3. View view;

4. if(viewType == PROGRESS_VIEW){

5. view = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false);

6. return new ProgressViewHolder(view);

7. } else if(viewType == EMPTY_VIEW){

8. return null;

9. } else if(viewType == IMAGE_VIEW){

10. view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_news_item, parent, false);

11. return new ImageViewHolder(view);

12. } else {

13. view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);

14. return new NewsViewHolder(view);

15. }

16. }

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

 

 

1. class NewsViewHolder extends RecyclerView.ViewHolder{

2.  

3. @BindView(R.id.news_title)TextView title;

4. @BindView(R.id.news_digest)TextView digest;

5. @BindView(R.id.news_time)TextView time;

6. @BindView(R.id.news_src)ImageView image;

7.  

8. public NewsViewHolder(View itemView) {

9. super(itemView);

10. ButterKnife.bind(this, itemView);

11. }

12. }

13.  

14. class ImageViewHolder extends RecyclerView.ViewHolder{

15.  

16. @BindView(R.id.news_title) TextView title;

17. @BindView(R.id.image_left) ImageView imageLeft;

18. @BindView(R.id.image_right) ImageView imageRight;

19. @BindView(R.id.image_middle) ImageView imageMiddle;

20. @BindView(R.id.news_time) TextView time;

21.  

22. public ImageViewHolder(View itemView) {

23. super(itemView);

24. ButterKnife.bind(this, itemView);

25. }

26. }

27.  

28. class ProgressViewHolder extends RecyclerView.ViewHolder {

29.  

30. @BindView(R.id.progressBar) ProgressBar progressBar;

31. @BindView(R.id.textView) TextView textView;

32.  

33. public ProgressViewHolder(View itemView) {

34. super(itemView);

35. ButterKnife.bind(this, itemView);

36. }

37. }

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

 

 

1. @Override

2. public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {

3. holder.itemView.setOnClickListener(new View.OnClickListener() {

4. @Override

5. public void onClick(View v) {

6. clickListener.onItemClick(v, position);

7. }

8. });

9. if(holder instanceof NewsViewHolder){

10. NewsViewHolder viewHolder = (NewsViewHolder)holder;

11. viewHolder.title.setText(list.get(position).getTitle());

12. viewHolder.time.setText(list.get(position).getTime());

13. /**

14. * Glide加载图片

15. */

16. Glide.with(context).load(list.get(position).getImageUrl().get(0))

17. .override(dpToPx(72), dpToPx(72)).centerCrop().into(viewHolder.image);

18. if(list.get(position).getType().equals(News.TEXT_NEWS)){

19. viewHolder.digest.setText(list.get(position).getDigest());

20. } else {

21. viewHolder.digest.setText("");

22. }

23. } else if(holder instanceof ImageViewHolder){

24. ImageViewHolder viewHolder = (ImageViewHolder)holder;

25. viewHolder.title.setText(list.get(position).getTitle());

26. viewHolder.time.setText(list.get(position).getTime());

27. setItemImage(viewHolder, list, position);

28. } else if(holder instanceof ProgressViewHolder){

29. ProgressViewHolder viewHolder = (ProgressViewHolder)holder;

30. viewHolder.progressBar.setIndeterminate(true);

31.  

32. }

33. }

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

看下Adapter的全部代码

 

1. package com.zmt.e_read.Adapter;

2.  

3. import android.content.Context;

4. import android.support.v7.widget.RecyclerView;

5. import android.util.DisplayMetrics;

6. import android.view.LayoutInflater;

7. import android.view.View;

8. import android.view.ViewGroup;

9. import android.widget.ImageView;

10. import android.widget.TextView;

11.  

12. import com.bumptech.glide.Glide;

13. import com.zmt.e_read.Module.News;

14. import com.zmt.e_read.Module.OnItemClickListener;

15. import com.zmt.e_read.R;

16. import com.zmt.e_read.Utils.ProgressViewHolder;

17.  

18. import java.util.Collection;

19. import java.util.Collections;

20. import java.util.List;

21.  

22. import butterknife.BindView;

23. import butterknife.ButterKnife;

24.  

25. /**

26. * Created by Dangelo on 2016/9/27.

27. */

28. public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

29.  

30. private final int EMPTY_VIEW = 1;

31. private final int PROGRESS_VIEW = 2;

32. private final int IMAGE_VIEW = 3;

33.  

34. private Context context;

35. private List<News> list;

36. private OnItemClickListener clickListener;

37.  

38. public NewsAdapter(Context context, List<News> list, OnItemClickListener clickListener) {

39. this.context = context;

40. this.list = list;

41. this.clickListener = clickListener;

42. }

43.  

44. public void addOnItemClickListener(OnItemClickListener clickListener){

45. this.clickListener = clickListener;

46. }

47.  

48. @Override

49. public int getItemViewType(int position) {

50. if(list.size() == 0){

51. return EMPTY_VIEW;

52. } else if(list.get(position) == null){

53. return PROGRESS_VIEW;

54. } else if(list.get(position).getType().equals(News.IMAGE_NEWS)){

55. return IMAGE_VIEW;

56. } else {

57. return super.getItemViewType(position);

58. }

59. }

60.  

61. @Override

62. public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

63. View view;

64. if(viewType == PROGRESS_VIEW){

65. view = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false);

66. return new ProgressViewHolder(view);

67. } else if(viewType == EMPTY_VIEW){

68. return null;

69. } else if(viewType == IMAGE_VIEW){

70. view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_news_item, parent, false);

71. return new ImageViewHolder(view);

72. } else {

73. view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);

74. return new NewsViewHolder(view);

75. }

76. }

77.  

78. @Override

79. public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {

80. holder.itemView.setOnClickListener(new View.OnClickListener() {

81. @Override

82. public void onClick(View v) {

83. clickListener.onItemClick(v, position);

84. }

85. });

86. if(holder instanceof NewsViewHolder){

87. NewsViewHolder viewHolder = (NewsViewHolder)holder;

88. viewHolder.title.setText(list.get(position).getTitle());

89. viewHolder.time.setText(list.get(position).getTime());

90. /**

91. * Glide加载图片

92. */

93. Glide.with(context).load(list.get(position).getImageUrl().get(0))

94. .override(dpToPx(72), dpToPx(72)).centerCrop().into(viewHolder.image);

95. if(list.get(position).getType().equals(News.TEXT_NEWS)){

96. viewHolder.digest.setText(list.get(position).getDigest());

97. } else {

98. viewHolder.digest.setText("");

99. }

100. } else if(holder instanceof ImageViewHolder){

101. ImageViewHolder viewHolder = (ImageViewHolder)holder;

102. viewHolder.title.setText(list.get(position).getTitle());

103. viewHolder.time.setText(list.get(position).getTime());

104. setItemImage(viewHolder, list, position);

105. } else if(holder instanceof ProgressViewHolder){

106. ProgressViewHolder viewHolder = (ProgressViewHolder)holder;

107. viewHolder.progressBar.setIndeterminate(true);

108.  

109. }

110. }

111.  

112. public void setItemImage(ImageViewHolder viewHolder, List<News> list, int position){

113. viewHolder.imageMiddle.setVisibility(View.VISIBLE);

114. viewHolder.imageRight.setVisibility(View.VISIBLE);

115. DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();

116. if(list.get(position).getImageUrl().size() == 1){

117. Glide.with(context).load(list.get(position).getImageUrl().get(0))

118. .override(displayMetrics.widthPixels - dpToPx(10), dpToPx(90))

119. .centerCrop().into(viewHolder.imageLeft);

120. viewHolder.imageMiddle.setVisibility(View.GONE);

121. viewHolder.imageRight.setVisibility(View.GONE);

122. } else if(list.get(position).getImageUrl().size() == 2){

123. int imageWidth = (displayMetrics.widthPixels - dpToPx(20)) / 2;

124. Glide.with(context).load(list.get(position).getImageUrl().get(0))

125. .override(imageWidth, dpToPx(90))

126. .centerCrop().into(viewHolder.imageLeft);

127. Glide.with(context).load(list.get(position).getImageUrl().get(1))

128. .override(imageWidth, dpToPx(90))

129. .centerCrop().into(viewHolder.imageMiddle);

130. viewHolder.imageRight.setVisibility(View.GONE);

131. } else if(list.get(position).getImageUrl().size() >= 3){

132. int imageWidth = (displayMetrics.widthPixels - dpToPx(30)) / 3;

133. Glide.with(context).load(list.get(position).getImageUrl().get(0))

134. .override(imageWidth, dpToPx(90))

135. .centerCrop().into(viewHolder.imageLeft);

136. Glide.with(context).load(list.get(position).getImageUrl().get(1))

137. .override(imageWidth, dpToPx(90))

138. .centerCrop().into(viewHolder.imageMiddle);

139. Glide.with(context).load(list.get(position).getImageUrl().get(2))

140. .override(imageWidth, dpToPx(90))

141. .centerCrop().into(viewHolder.imageRight);

142. }

143. }

144.  

145. @Override

146. public int getItemCount() {

147. return list.size();

148. }

149.  

150. public int dpToPx(float dp){

151. float px = context.getResources().getDisplayMetrics().density;

152. return (int)(dp * px + 0.5f);

153. }

154.  

155. class NewsViewHolder extends RecyclerView.ViewHolder{

156.  

157. @BindView(R.id.news_title)TextView title;

158. @BindView(R.id.news_digest)TextView digest;

159. @BindView(R.id.news_time)TextView time;

160. @BindView(R.id.news_src)ImageView image;

161.  

162. public NewsViewHolder(View itemView) {

163. super(itemView);

164. ButterKnife.bind(this, itemView);

165. }

166. }

167.  

168. class ImageViewHolder extends RecyclerView.ViewHolder{

169.  

170. @BindView(R.id.news_title) TextView title;

171. @BindView(R.id.image_left) ImageView imageLeft;

172. @BindView(R.id.image_right) ImageView imageRight;

173. @BindView(R.id.image_middle) ImageView imageMiddle;

174. @BindView(R.id.news_time) TextView time;

175.  

176. public ImageViewHolder(View itemView) {

177. super(itemView);

178. ButterKnife.bind(this, itemView);

179. }

180. }

181.  

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

183.  

184. @BindView(R.id.progressBar) ProgressBar progressBar;

185. @BindView(R.id.textView) TextView textView;

186.  

187. public ProgressViewHolder(View itemView) {

188. super(itemView);

189. ButterKnife.bind(this, itemView);

190. }

191. }

}

 

 

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

--------------------- 本文来自 xiyouZmt 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/zhumintao/article/details/53023920?utm_source=copy