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
- <?xml version="1.0" encoding="utf-8"?>
- <android.support.design.widget.CoordinatorLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:fitsSystemWindows="true">
- <android.support.design.widget.AppBarLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:fitsSystemWindows="true"
- android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
- <android.support.design.widget.CollapsingToolbarLayout
- android:id="@+id/collapse_toolbar"
- android:layout_width="match_parent"
- android:layout_height="180dp"
- android:fitsSystemWindows="true"
- app:contentScrim="?attr/colorPrimary"
- app:layout_scrollFlags="scroll|exitUntilCollapsed">
- <ImageView
- android:id="@+id/header"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@drawable/photo"
- android:fitsSystemWindows="true"
- android:scaleType="centerCrop"
- app:layout_collapseMode="parallax" />
- <android.support.v7.widget.Toolbar
- android:id="@+id/toolbar"
- android:layout_width="match_parent"
- android:layout_height="40dp"
- android:gravity="top"
- android:minHeight="?attr/actionBarSize"
- app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
- app:titleMarginTop="0dp" >
- <TextView
- android:id="@+id/toolbar_title"
- android:text="海工词典"
- style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"/>
- </android.support.v7.widget.Toolbar>
- <EditText
- android:id="@+id/et_search"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_gravity="bottom"
- app:tabIndicatorColor="@color/colorAccent"
- android:padding="5dip"
- android:layout_marginLeft="10dp"
- android:layout_marginRight="10dp"
- android:layout_marginBottom="5dp"
- android:background="@drawable/bg_edittext"
- android:textColorHint="#AAAAAA"
- android:textSize="15dip"
- android:singleLine="true"
- android:hint="请输入要查询的单词..."/>
- </android.support.design.widget.CollapsingToolbarLayout>
- </android.support.design.widget.AppBarLayout>
- <android.support.v7.widget.RecyclerView
- android:id="@+id/rv_mainsearch"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- app:layout_behavior="@string/appbar_scrolling_view_behavior" />
- </android.support.design.widget.CoordinatorLayout>
CoordinatorLayout 我在这里嵌套了:AppBarLayout 、CollapsingToolbarLayout 和 RecyclerView,其中CollapsingToolbarLayout 中又包含了上部显示的图片ImageView 、标题Toolbar 和 搜索框EditText,在Toolbar 中可以设置 app:layout_collapseMode="pin" 属性来决定当上滑的时候标题是否隐藏,这里添加一点当我们加载出Toolbar后会发现上边有个向左的按钮,如果我们不想要的话可以在Acticity中设置 ,(代码片段,完整代码请稍候...)
[java] view plain copy
- private void setupToolbar()
- Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
- setSupportActionBar(toolbar);
- getSupportActionBar().setTitle("TabbedCoordinatorLayout");//设置标题
- getSupportActionBar().setDisplayHomeAsUpEnabled(true);//删除,则没有向左的箭头
代码实现:SearchActivity
[java] view plain copy
- package com.dictionary.activity;
- import android.os.Bundle;
- import android.support.design.widget.CollapsingToolbarLayout;
- import android.support.v7.app.AppCompatActivity;
- import android.support.v7.widget.LinearLayoutManager;
- import android.support.v7.widget.RecyclerView;
- import android.support.v7.widget.Toolbar;
- import com.dictionary.adapter.RecyclerAdapter;
- import com.dictionary.entity.News;
- import com.example.dictionary.R;
- import java.util.ArrayList;
- android RecyclerView adapter 封装
android RecyclerView adapter 封装
android RecyclerView adapter 封装