https://blog.csdn.net/csdn576038874/article/details/77648366

最近看到diycodeAPP中一個列表分組界面，起初是用listview嵌套gridview實現(xiàn)的，效果一樣只是有些復雜，但是后來看了下源碼，是用recycleview實現(xiàn)的，并且還很簡單，

最后就嘗試了一下，實現(xiàn)了這個列表功能，所以在這里記錄一下，方便以后遇到類似功能，直接可以拿來使用，這里感謝一下diycode的API以及實體類，為了方便接口和實體類直接用diycode的，API：https://diycode.cc/api/v3/sites.json

看下效果圖吧

image

1、實體類

[java] view plaincopy

<embed id="ZeroClipboardMovie_1" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=16&height=16" wmode="transparent" style="box-sizing: border-box;">

1. public class Sites implements Serializable {

2. private String name;

3. private int id;

4. private List<Site> sites;

5. public String getName() {

6. return name;

7. }

8. public void setName(String name) {

9. this.name = name;

10. }

11. public int getId() {

12. return id;

13. }

14. public void setId(int id) {

15. this.id = id;

16. }

17. public List<Site> getSites() {

18. return sites;

19. }

20. public void setSites(List<Site> sites) {

21. this.sites = sites;

22. }

23. public static class Site implements Serializable {

24. /**

25. • name : botlist
26. • url : http://botlist.co
27. • avatar_url : https://favicon.b0.upaiyun.com/ip2/botlist.co.ico

28. */

29. private String name;

30. private String url;

31. private String avatar_url;

32. public String getName() {

33. return name;

34. }

35. public void setName(String name) {

36. this.name = name;

37. }

38. public String getUrl() {

39. return url;

40. }

41. public void setUrl(String url) {

42. this.url = url;

43. }

44. public String getAvatar_url() {

45. return avatar_url;

46. }

47. public void setAvatar_url(String avatar_url) {

48. this.avatar_url = avatar_url;

49. }

50. }

51. }

2、適配器

[java] view plaincopy

<embed id="ZeroClipboardMovie_2" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=16&height=16" wmode="transparent" style="box-sizing: border-box;">

1. /**

2. • @ProjectName: DiycodeApp
3. • @PackageName: com.wenjie.diycode.adapter
4. • @FileName: com.wenjie.diycode.adapter.SitesAdapter.java
5. • @Author: wenjie
6. • @Date: 2017-08-17 14:57
7. • @Description:
8. • @Version:

9. */

10. public class SitesAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{

11. public static final int SITES = 0;//標題 跨一列 也就是合并兩列

12. public static final int SITE = 1;//不跨列

13. //所有數(shù)據(jù)的集合，將標題和數(shù)據(jù)項，全部裝在到這個集合中，在適配器中利用viewtype來區(qū)分，并顯示不同的布局

14. private List<Object> items = new ArrayList<>();

15. private Context context;

16. public SitesAdapter(Context context, List<Object> items) {

17. this.items = items;

18. this.context = context;

19. }

20. @Override

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

22. LayoutInflater mInflater = LayoutInflater.from(context);//獲取mInflater對象

23. switch (viewType) {//根據(jù)viewtyupe來區(qū)分，是標題還是數(shù)據(jù)項

24. case SITES://標題，加載顯示標題的item布局，就一個textview顯示文本，這里我們自頂一個標題的viewholder->SitesHolder

25. final SitesHolder sitesHolder = new SitesHolder(mInflater.inflate(R.layout.item_sites, parent, false));

26. //點擊事件

27. sitesHolder.itemView.setOnClickListener(new View.OnClickListener() {

28. @Override

29. public void onClick(View view) {

30. if(onItemClickListener != null){

31. onItemClickListener.onClick(sitesHolder.itemView , sitesHolder.getLayoutPosition());

32. }

33. }

34. });

35. return sitesHolder;

36. case SITE://數(shù)據(jù)項，雷同不贅述了，標題和數(shù)據(jù)項的item布局和veiwholder都不會相互影響的

37. final SiteHolder siteHolder = new SiteHolder(mInflater.inflate(R.layout.item_site, parent, false));

38. siteHolder.itemView.setOnClickListener(new View.OnClickListener() {

39. @Override

40. public void onClick(View view) {

41. if(onItemClickListener != null){

42. onItemClickListener.onClick(siteHolder.itemView , siteHolder.getLayoutPosition());

43. }

44. }

45. });

46. return siteHolder;

47. }

48. return null;

49. }

50. @Override

51. public int getItemViewType(int position) {

52. //這個方法很重要，這里根據(jù)position取出items集合中的對象，用instanceof判斷他是標題還是數(shù)據(jù)項，來返回對應的標識

53. if (items.get(position) instanceof Sites) {//根據(jù)items數(shù)據(jù)類型的不同來判斷他是標題還是數(shù)據(jù)項

54. return SITES;//標題

55. } else if (items.get(position) instanceof Sites.Site) {

56. return SITE;//數(shù)據(jù)項

57. } else {

58. return -1;

59. }

60. }

61. @Override

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

63. //根據(jù)getItemViewType綁定view進行賦值顯示

64. switch (holder.getItemViewType()) {

65. case SITES://標題

66. SitesHolder sitesHolder = (SitesHolder) holder;

67. sitesHolder.name.setText(((Sites) items.get(position)).getName());

68. break;

69. case SITE://數(shù)據(jù)項

70. SiteHolder siteHolder = (SiteHolder) holder;

71. siteHolder.name.setText(((Sites.Site) items.get(position)).getName());

72. Glide.with(context).load(((Sites.Site) items.get(position)).getAvatar_url()).into(siteHolder.icon);

73. break;

74. }

75. }

76. /**

77. • 公布點擊事件出去

78. */

79. private OnItemClickListener onItemClickListener;

80. public void setOnItemClickListener(OnItemClickListener onItemClickListener){

81. this.onItemClickListener = onItemClickListener;

82. }

83. public interface OnItemClickListener{

84. void onClick(View itemview , int position);

85. }

86. @Override

87. public int getItemCount() {

88. return items.size();

89. }

90. /**

91. • 數(shù)據(jù)項的viewholder 一個文本textview一個cion imageview

92. */

93. private class SiteHolder extends RecyclerView.ViewHolder {

94. TextView name;

95. ImageView icon;

96. SiteHolder(View itemView) {

97. super(itemView);

98. name = (TextView) itemView.findViewById(R.id.name);

99. icon = (ImageView) itemView.findViewById(R.id.icon);

100. }

101. }

102. /**

103. • 標題的viewholder 只有一個textview

104. */

105. private class SitesHolder extends RecyclerView.ViewHolder {

106. TextView name;

107. SitesHolder(View itemView) {

108. super(itemView);

109. name = (TextView) itemView.findViewById(R.id.name);

110. }

111. }

112. }

接下來就是 當數(shù)據(jù)獲取成功之后，如何和適配器進行綁定顯示

sites就是從獲取獲取到了并解析好的數(shù)據(jù)集合

[java] view plaincopy

<embed id="ZeroClipboardMovie_3" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&width=16&height=16" wmode="transparent" style="box-sizing: border-box;">

1. List<Object> items = new ArrayList<>();

2. //數(shù)據(jù)獲取之后 將數(shù)據(jù)循環(huán)遍歷，放進items集合中，至于服務器返回什么格式的數(shù)據(jù)，我想看下實體類就應該明白了

3. for (int i=0; i < sites.size(); i++){

4. items.add(sites.get(i));

5. for(int k = 0; k < sites.get(i).getSites().size(); k ++){

6. items.add(sites.get(i).getSites().get(k));

7. }

8. }

9. //實例化適配器將遍歷好的數(shù)據(jù)放進適配器中

10. sitesAdapter = new SitesAdapter(getActivity() ,items);

11. //new一個布局管理器，這里是用GridLayoutManager，要區(qū)分3列

12. GridLayoutManager gridLayoutManager = new GridLayoutManager(getActivity() , 3);//多少列，如果數(shù)據(jù)項只需要1列，這里寫1，下面return 也返回1即可實現(xiàn)

13. //下面這個方法很重要，根據(jù)position獲取當前這條數(shù)據(jù)是標題還是數(shù)據(jù)項，來設置他的跨列

14. gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {

15. @Override

16. public int getSpanSize(int position) {

17. //適配器中有這么一個方法，根據(jù)position獲取當前這條數(shù)據(jù)是標題還是數(shù)據(jù)項，來設置他的跨列

18. switch (sitesAdapter.getItemViewType(position)){

19. case SitesAdapter.SITES://標題的話跨多少列 這個值要跟整個列數(shù)相等 如果大于會出錯，小于布局會亂

20. return 3;

21. case SitesAdapter.SITE://數(shù)據(jù)項

22. return 1;//不跨列，就是分成三列顯示

23. default:

24. return -1;

25. }

26. }

27. });

28. sitesRecycleView.setLayoutManager(gridLayoutManager);

29. // sitesRecycleView.addItemDecoration(new DividerItemDecoration(getActivity() , GridLayoutManager.VERTICAL));

30. sitesRecycleView.setAdapter(sitesAdapter);

31. //item的點擊事件，這里實現(xiàn)，進行具體的操作

32. sitesAdapter.setOnItemClickListener(new SitesAdapter.OnItemClickListener() {

33. @Override

34. public void onClick(View itemview, int position) {

35. switch (sitesAdapter.getItemViewType(position)){

36. case SitesAdapter.SITE:

37. // ToastUtils.showToast(getActivity() , ((CoolSites.Site) items.get(position)).getName());

38. Intent intent = new Intent(getActivity() , WebViewActivity.class);

39. intent.putExtra("url" , ((Sites.Site) items.get(position)).getUrl());

40. startActivity(intent);

41. break;

42. case SitesAdapter.SITES:

43. ToastUtils.showToast(getActivity() , ((Sites) items.get(position)).getName());

44. break;

45. }

46. }

47. });