您的位置:首页 > 移动开发

CollapsingToolbarLayout配合CoordinatorLayout、AppBarLayout,RecyclerView实现伸缩布局

2017-05-26 11:08 537 查看
这四个layout都是Android design中出现的控件,所以要想使用首先要在gradle中配置依赖,其中RecyclerView使用的第三方的库,配置如下:

compile 'com.jcodecraeer:xrecyclerview:1.3.2'
compile 'com.android.support:cardview-v7:25.1.0'
compile 'com.android.support:design:25.1.0'

demo中用到了cardview所以也有cardview-v7的包,要想实现这一功能主要的还是布局,布局写好后其他的就该怎么写就怎么写了;

布局如下:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xlistviewdemo.MainActivity">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">

<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<com.xlistviewdemo.view.NoScrollGridView
android:id="@+id/scroll_gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="@color/white"
android:numColumns="5"
android:layout_margin="10dp"
android:verticalSpacing="10dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<com.jcodecraeer.xrecyclerview.XRecyclerView
android:id="@+id/xrecyclerview_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

最外层的CoordinatorLayout继承于ViewGroup,类似于 FrameLayout,功能主要是作为顶层布局调度协调子布局,通过设置子布局的 
Behavior来协调子布局

AppBarLayout控制子视图,可以看到CollapsingToobarLayout里面有app:layout_scrollFlags这一属性,这一属性是用来控制滑动试图效果的,其有四个字:

scroll: 所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。例如,XRecyclerView没有设置这个值,将会停留在屏幕顶部。
enterAlways: 设置这个flag时,向下的滚动都会导致该view变为可见,启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
想要collapsingToolbar有滑动效果,以下是要设置的:

1. CoordinatorLayout作为布局的父布局容器。

2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。

3. 给滑动的组件设置app:layout_behavior属性

CollapsingToolbarLayout实现Toolbar的折叠效果。CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放。其属性有很多,我就不一一介绍了,想了解的可以看下官方文档:https://developer.android.google.cn/reference/android/support/design/widget/CollapsingToolbarLayout.html

这个demo实现的是随着XRecyclerView上滑,GridView折叠,所以给XRecyclerView设置了layout_behavior,想要实现折叠效果,就要使用Coordinatorlayout作为父布局,想要获取更好的效果,可以自定义Behavior实现。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  android 布局 控件
相关文章推荐