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

最近在做一个仿海词词典的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">  
8.   
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">  
14.   
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">  
22.   
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" />  
31.   
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"/>  
47.   
48.             </android.support.v7.widget.Toolbar>  
49.   
50.   
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="请输入要查询的单词..."/>  
66.   
67.   
68.         </android.support.design.widget.CollapsingToolbarLayout>  
69.   
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" />  
76.   
77.   
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具体可以参考这位大神的讲解，我这边没有用到那么多属性：

http://www.open-open.com/lib/view/open1438265746378.html

或者参考官方文档：

http://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout.html

代码实现：SearchActivity

[java]  view plain  copy

1. package com.dictionary.activity;  
2.   
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;  
9.   
10. import com.dictionary.adapter.RecyclerAdapter;  
11. import com.dictionary.entity.News;  
12. import com.example.dictionary.R;  
13.   
14. import java.util.ArrayList;  
15. import java.util.List;  
16.   
17.   
18. public class SearchActivity extends AppCompatActivity {  
19.   
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();  
30.   
31.    }  
32.   
33.    private void setupCollapsingToolbar() {  
34.       final CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(  
35.             R.id.collapse_toolbar);  
36.       collapsingToolbar.setTitleEnabled(false);  
37.    }  
38.   
39.    //设置标题  
40.    private void setupToolbar() {  
41.       Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
42.       setSupportActionBar(toolbar);  
43.       getSupportActionBar().setTitle("");  
44.    }  
45.   
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'  
8.   
9. }  

2、RecyclerView

     

       通过使用RecyclerView控件，我们可以在APP中创建带有Material Design风格的复杂列表。RecyclerView控件和ListView的原理有很多相似的地方,都是维护少量的View来进行显示大量的数据，不过RecyclerView控件比ListView更加高级并且更加灵活。当我们的数据因为用户事件或者网络事件发生改变的时候也能很好的进行显示。和ListView不同的是，RecyclerView不用在负责Item的显示相关的功能，在这边所有有关布局,绘制,数据绑定等都被分拆成不同的类进行管理。具体有关 RecyclerView的讲解可以参考：

http://blog.csdn.net/lmj623565791/article/details/45059587

         讲得非常详细，我参考了一些，再次感谢。现在我想说下加载不同布局的实现方法。RecyclerView的布局文件上边已经给出了，在此不再赘述，加载不同布局我们要重写RecyclerAdapter适配器，在这里我写了一个News的实体类来记录每个布局需要显示的信息，而通过这个实体类中的Type_View值来确定需要加载哪个布局文件：(那三个不同的item布局我就不贴了)

   RecyclerAdapter：

[java]  view plain  copy

1. package com.dictionary.adapter;  
2.   
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;  
15.   
16. public class RecyclerAdapter extends RecyclerView.Adapter<ViewHolder> {  
17.   
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;  
24.   
25.     public RecyclerAdapter(List<News> newses,Context context) {  
26.         super();  
27.         this.mContext = context;  
28.         this.newses = newses;  
29.     }  
30.       
31.     public void setOnItemClickListener(OnItemClickListener onItemClickListener) {  
32.         this.onItemClickListener = onItemClickListener;  
33.     }  
34.   
35.   
36.     public interface OnItemClickListener {  
37.         void OnItemClick(View view, int position);  
38.   
39.         void OnItemLongClick(View view, int position);  
40.     }  
41.   
42.     public void add(News news) {  
43.         this.newses.add(news);  
44.         notifyDataSetChanged();  
45.     }  
46.   
47.     @Override  
48.     public int getItemViewType(int position) {  
49.         return newses.get(position).getItemType();  
50.   
51.     }  
52.   
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.     }  
73.   
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.     }  
90.   
91.     @Override  
92.     public int getItemCount() {  
93.         return newses.size();  
94.     }  
95.   
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.     }  
104.   
105.     class ViewHolderTwo extends ViewHolder {  
106.         Button bt_item1;  
107.   
108.         public ViewHolderTwo(View itemView) {  
109.             super(itemView);  
110.             bt_item1 = (Button) itemView.findViewById(R.id.bt_item1);  
111.         }  
112.     }  
113.   
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.     }  
122.   
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;  
2.   
3. public class News {  
4.   
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.     }  
21.   
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);