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

Posted changhaiSmile

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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. android RecyclerView adapter 封装

    android RecyclerView adapter 封装

    android RecyclerView adapter 封装

    RecyclerView 中的 YouTubePlayerFragment

    RecyclerView的一些优化点

    从 RecyclerView 中删除房间条目