CoordinatorLayout +RecyclerView+加载不同布局的item

论坛 › 期权论坛 › 脚本     
匿名网站用户   2020-12-20 05:58   47   0

最近在做一个仿海词词典的demo,首页主要用到了CoordinatorLayout 折叠标题，并加载下方不同布局的数据。海词词典的的首页是非常漂亮的，先让我们看下它的首页吧。直接上图片


这里我们可以看到，首页向上滑动的过程中，只有上部分滑出了屏幕，而搜索框并没有，而是滑到了屏幕的上方看上去非常漂亮
在下边的listview中，装载了不同布局的item(可以看到第一部分和第二部分的布局是不同的)，那这是怎么实现的呢？具体我不清楚人家是用的什么方法，但是我使用了CoordinatorLayout 的折叠标题功能实现了上滑折叠功能，然后下边是用了RecyclerView嵌套了不同布局的item,刚开始做的时候我没有使用RecyclerView而是直接用的ListView嵌套不同布局的item，但是做成后没有折叠效果，查了网上的资料后发现在RecyclerView中的layout_behavior是对折叠效果支持的，具体用listview怎么实现，能否实现？小弟bu知，望大神指点！
下边看下我做的demo吧



1、CoordinatorLayout
先看下我的整个布局文件activity_mainsearch.xml
[java] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. xmlns:app="http://schemas.android.com/apk/res-auto"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:fitsSystemWindows="true">
  9. <android.support.design.widget.AppBarLayout
  10. android:layout_width="match_parent"
  11. android:layout_height="wrap_content"
  12. android:fitsSystemWindows="true"
  13. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  15. <android.support.design.widget.CollapsingToolbarLayout
  16. android:id="@+id/collapse_toolbar"
  17. android:layout_width="match_parent"
  18. android:layout_height="180dp"
  19. android:fitsSystemWindows="true"
  20. app:contentScrim="?attr/colorPrimary"
  21. app:layout_scrollFlags="scroll|exitUntilCollapsed">
  23. <ImageView
  24. android:id="@+id/header"
  25. android:layout_width="match_parent"
  26. android:layout_height="match_parent"
  27. android:background="@drawable/photo"
  28. android:fitsSystemWindows="true"
  29. android:scaleType="centerCrop"
  30. app:layout_collapseMode="parallax" />
  32. <android.support.v7.widget.Toolbar
  33. android:id="@+id/toolbar"
  34. android:layout_width="match_parent"
  35. android:layout_height="40dp"
  36. android:gravity="top"
  37. android:minHeight="?attr/actionBarSize"
  38. app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
  39. app:titleMarginTop="0dp" >
  40. <TextView
  41. android:id="@+id/toolbar_title"
  42. android:text="海工词典"
  43. style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
  44. android:layout_width="wrap_content"
  45. android:layout_height="wrap_content"
  46. android:layout_gravity="center"/>
  48. </android.support.v7.widget.Toolbar>
  51. <EditText
  52. android:id="@+id/et_search"
  53. android:layout_width="match_parent"
  54. android:layout_height="wrap_content"
  55. android:layout_gravity="bottom"
  56. app:tabIndicatorColor="@color/colorAccent"
  57. android:padding="5dip"
  58. android:layout_marginLeft="10dp"
  59. android:layout_marginRight="10dp"
  60. android:layout_marginBottom="5dp"
  61. android:background="@drawable/bg_edittext"
  62. android:textColorHint="#AAAAAA"
  63. android:textSize="15dip"
  64. android:singleLine="true"
  65. android:hint="请输入要查询的单词..."/>
  68. </android.support.design.widget.CollapsingToolbarLayout>
  70. </android.support.design.widget.AppBarLayout>
  71. <android.support.v7.widget.RecyclerView
  72. android:id="@+id/rv_mainsearch"
  73. android:layout_width="match_parent"
  74. android:layout_height="match_parent"
  75. app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  78. </android.support.design.widget.CoordinatorLayout>

CoordinatorLayout 我在这里嵌套了：AppBarLayout 、CollapsingToolbarLayout 和 RecyclerView，其中CollapsingToolbarLayout 中又包含了上部显示的图片ImageView 、标题Toolbar 和 搜索框EditText，在Toolbar 中可以设置app:layout_collapseMode="pin"属性来决定当上滑的时候标题是否隐藏，这里添加一点当我们加载出Toolbar后会发现上边有个向左的按钮，如果我们不想要的话可以在Acticity中设置 ，（代码片段，完整代码请稍候...）
[java] view plain copy
  1. private void setupToolbar() {
  2. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  3. setSupportActionBar(toolbar);
  4. getSupportActionBar().setTitle("TabbedCoordinatorLayout");//设置标题
  5. getSupportActionBar().setDisplayHomeAsUpEnabled(true);//删除，则没有向左的箭头
  6. }
CollapsingToolbarLayout具体可以参考这位大神的讲解，我这边没有用到那么多属性：
或者参考官方文档：

代码实现：SearchActivity


[java] view plain copy
  1. package com.dictionary.activity;
  3. import android.os.Bundle;
  4. import android.support.design.widget.CollapsingToolbarLayout;
  5. import android.support.v7.app.AppCompatActivity;
  6. import android.support.v7.widget.LinearLayoutManager;
  7. import android.support.v7.widget.RecyclerView;
  8. import android.support.v7.widget.Toolbar;
  10. import com.dictionary.adapter.RecyclerAdapter;
  11. import com.dictionary.entity.News;
  12. import com.example.dictionary.R;
  14. import java.util.ArrayList;
  15. import java.util.List;
  18. public class SearchActivity extends AppCompatActivity {
  20. private RecyclerView recyclerview;
  21. private RecyclerAdapter adapter;
  22. @Override
  23. protected void onCreate(Bundle savedInstanceState) {
  24. super.onCreate(savedInstanceState);
  25. setContentView(R.layout.acty_mainsearch);
  26. //设置标题
  27. setupToolbar();
  28. //设置滑动标题
  29. setupCollapsingToolbar();
  31. }
  33. private void setupCollapsingToolbar() {
  34. final CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(
  35. R.id.collapse_toolbar);
  36. collapsingToolbar.setTitleEnabled(false);
  37. }
  39. //设置标题
  40. private void setupToolbar() {
  41. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  42. setSupportActionBar(toolbar);
  43. getSupportActionBar().setTitle("");
  44. }
  46. }

不过要在build.guild文件中添加依赖包,到这里就已经实现了上滑折叠的效果，其实很简单，可见这个控件的强大之处

[java] view plain copy
  1. dependencies {
  2. compile fileTree(dir: 'libs', include: '*.jar')
  3. compile 'com.android.support:appcompat-v7:23.0.1'
  4. compile 'com.android.support:design:23.0.1'
  5. compile 'com.android.support:recyclerview-v7:23.0.1'
  6. compile 'com.android.support:cardview-v7:23.0.1'
  7. compile 'com.android.support:recyclerview-v7:23.1.1'
  9. }

2、RecyclerView
通过使用RecyclerView控件，我们可以在APP中创建带有Material Design风格的复杂列表。RecyclerView控件和ListView的原理有很多相似的地方,都是维护少量的View来进行显示大量的数据，不过RecyclerView控件比ListView更加高级并且更加灵活。当我们的数据因为用户事件或者网络事件发生改变的时候也能很好的进行显示。和ListView不同的是，RecyclerView不用在负责Item的显示相关的功能，在这边所有有关布局,绘制,数据绑定等都被分拆成不同的类进行管理。具体有关RecyclerView的讲解可以参考：
讲得非常详细，我参考了一些，再次感谢。现在我想说下加载不同布局的实现方法。RecyclerView的布局文件上边已经给出了，在此不再赘述，加载不同布局我们要重写RecyclerAdapter适配器，在这里我写了一个News的实体类来记录每个布局需要显示的信息，而通过这个实体类中的Type_View值来确定需要加载哪个布局文件：(那三个不同的item布局我就不贴了)

RecyclerAdapter：
[java] view plain copy
  1. package com.dictionary.adapter;
  3. import android.content.Context;
  4. import android.support.v7.widget.RecyclerView;
  5. import android.support.v7.widget.RecyclerView.ViewHolder;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9. import android.widget.Button;
  10. import android.widget.TextView;
  11. import com.dictionary.entity.News;
  12. import com.example.dictionary.R;
  13. import java.util.ArrayList;
  14. import java.util.List;
  16. public class RecyclerAdapter extends RecyclerView.Adapter<ViewHolder> {
  18. public final static int TYPE_ONE = 1;
  19. public final static int TYPE_TWO = 2;
  20. public final static int TYPE_THREE = 3;
  21. private Context mContext;
  22. private List<News> newses = new ArrayList<>();
  23. private OnItemClickListener onItemClickListener;
  25. public RecyclerAdapter(List<News> newses,Context context) {
  26. super();
  27. this.mContext = context;
  28. this.newses = newses;
  29. }
  31. public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
  32. this.onItemClickListener = onItemClickListener;
  33. }
  36. public interface OnItemClickListener {
  37. void OnItemClick(View view, int position);
  39. void OnItemLongClick(View view, int position);
  40. }
  42. public void add(News news) {
  43. this.newses.add(news);
  44. notifyDataSetChanged();
  45. }
  47. @Override
  48. public int getItemViewType(int position) {
  49. return newses.get(position).getItemType();
  51. }
  53. @Override
  54. public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  55. View view = null;
  56. ViewHolder holder = null;
  57. switch (viewType) {
  58. case TYPE_ONE:
  59. view = LayoutInflater.from(mContext).inflate(R.layout.list_item1_mainsearch, parent, false);
  60. holder = new ViewHolderOne(view);
  61. break;
  62. case TYPE_TWO:
  63. view = LayoutInflater.from(mContext).inflate(R.layout.list_item2_mainsearch, parent, false);
  64. holder = new ViewHolderTwo(view);
  65. break;
  66. case TYPE_THREE:
  67. view = LayoutInflater.from(mContext).inflate(R.layout.list_item3_mainsearch, parent, false);
  68. holder = new ViewHolderThree(view);
  69. break;
  70. }
  71. return holder;
  72. }
  74. @Override
  75. public void onBindViewHolder(final ViewHolder holder, int position) {
  76. switch (getItemViewType(position)) {
  77. case TYPE_ONE:
  78. final ViewHolderOne holderOne = (ViewHolderOne) holder;
  79. onItemEventClick(holderOne);
  80. break;
  81. case TYPE_TWO:
  82. ViewHolderTwo holderTwo = (ViewHolderTwo) holder;
  83. onItemEventClick(holderTwo);
  84. break;
  85. case TYPE_THREE:
  86. ViewHolderThree holderThree = (ViewHolderThree) holder;
  87. onItemEventClick(holderThree);
  88. }
  89. }
  91. @Override
  92. public int getItemCount() {
  93. return newses.size();
  94. }
  96. class ViewHolderOne extends ViewHolder {
  97. TextView tv_item1;
  98. public ViewHolderOne(View itemView) {
  99. super(itemView);
  100. tv_item1 = (TextView) itemView.findViewById(R.id.tv_item1);
  101. tv_item1.setText("我是修改过得文本1");
  102. }
  103. }
  105. class ViewHolderTwo extends ViewHolder {
  106. Button bt_item1;
  108. public ViewHolderTwo(View itemView) {
  109. super(itemView);
  110. bt_item1 = (Button) itemView.findViewById(R.id.bt_item1);
  111. }
  112. }
  114. class ViewHolderThree extends ViewHolder {
  115. TextView textView;
  116. public ViewHolderThree(View itemView) {
  117. super(itemView);
  118. textView = (TextView) itemView.findViewById(R.id.tv_content1);
  119. textView.setText("我是修改过得图片1");
  120. }
  121. }
  123. protected void onItemEventClick(ViewHolder holder) {
  124. final int position = holder.getLayoutPosition();
  125. holder.itemView.setOnClickListener(new View.OnClickListener() {
  126. @Override
  127. public void onClick(View v) {
  128. onItemClickListener.OnItemClick(v, position);
  129. }
  130. });
  131. holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
  132. @Override
  133. public boolean onLongClick(View v) {
  134. onItemClickListener.OnItemLongClick(v, position);
  135. return true;
  136. }
  137. });
  138. }
  139. }

News:
[java] view plain copy
  1. package com.dictionary.entity;
  3. public class News {
  5. private String text;
  6. private String image;
  7. private String button;
  8. private int itemType;
  9. public String getText() {
  10. return text;
  11. }
  12. public void setText(String text) {
  13. this.text = text;
  14. }
  15. public String getImage() {
  16. return image;
  17. }
  18. public void setImage(String image) {
  19. this.image = image;
  20. }
  22. public String getButton() {
  23. return button;
  24. }
  25. public void setButton(String button) {
  26. this.button = button;
  27. }
  28. public int getItemType() {
  29. return itemType;
  30. }
  31. public void setItemType(int itemType) {
  32. this.itemType = itemType;
  33. }
  34. public News(String text, int itemType, String button, String image) {
  35. this.text = text;
  36. this.itemType = itemType;
  37. this.button = button;
  38. this.image = image;
  39. }
  40. }

Activity中的实现：（只需要在最上面那个代码片段中添加以下片段就可以）

[java] view plain copy
  1. recyclerview = (RecyclerView) findViewById(R.id.rv_mainsearch);
  2. recyclerview.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
  3. //初始化数据
  4. List<News> myDataset = new ArrayList<News>();
  5. myDataset.add(new News("111",1,"bbb","III"));
  6. myDataset.add(new News("222",2,"bbb","III"));
  7. myDataset.add(new News("333",3,"bbb","III"));
  8. //创建Adapter
  9. adapter = new RecyclerAdapter(myDataset,SearchActivity.this);
  10. recyclerview.setAdapter(adapter);
回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

16级独孤
匿名网站用户

积分:1136255
帖子:227251
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP