CoordinatorLayout:CollapsingToolbarLayout折叠效果的布局容器

来源：互联网发布：开发电脑点歌软件编辑：程序博客网时间：2024/05/17 22:45

如果项目中需要这种效果，可以使用CollapsingToolbarLayout(折叠效果的布局容器)

从名字就可以看出是和Toolbar结合使用的；

CollapsingToolbarLayout相当于代理了ToolBar,专门给Toolbar使用的；

Toolbar可以随着CollapsingToolbarLayout向上滑动

xml布局：

<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"    android:fitsSystemWindows="true"    tools:context="www.abld.com.appbarlayoutdemo.MainActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:fitsSystemWindows="true">        <!--        collapsingToolbarLayout专门给ToolBar使用的        app:layout_scrollFlags="scroll"属性就直接配置在collapsingToolbarLayout上面;toolbar和子控件就不再配置了        exitUntilCollapsed：不管滑动列表到哪只要向上拉，这个View会跟着滑动直到折叠，配合android：minHeight属性使用，最小高度即为折叠后的高度        -->        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/toolbarlayout"            android:layout_width="match_parent"            android:layout_height="200dp"            android:background="@android:color/holo_blue_dark"            android:fitsSystemWindows="true"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <!--            如果imageview放到toolbar下面就会把toolbar覆盖掉，根节点是collapsingToolbarLayout            app:layout_collapseMode="none"默认效果，随父控件一起滑动；            app:layout_collapseMode="pin"缩放模式，在滚动的时候子控件不跟着走；            app:layout_collapseMode="parallax"视察效果，随父控件进行高度缩放            -->            <ImageView                android:layout_width="match_parent"                android:layout_height="match_parent"                android:scaleType="centerCrop"                android:src="@drawable/lbthree"                app:layout_collapseMode="parallax" />            <!---->            <android.support.v7.widget.Toolbar                android:id="@+id/toobar"                android:layout_width="match_parent"                android:layout_height="56dp"                app:layout_collapseMode="pin" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:padding="18dp"            android:text="@string/app_text" />    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

如果不了解CoordinatorLayout,AppBarLayout和app:layout_scrollFlags="exitUntilCollapsed"的可以看下这篇博客：

http://blog.csdn.net/zheng_jiao/article/details/52590281

其实CollapsingToolbarLayout的标题就是代理的ToolBar的标题，为什么这么说呢，因为在代码中可以直接使用CollapsingToolbarLayout设置标题：CollapsingToolbarLayout collapsingToolbarLayout= (CollapsingToolbarLayout) findViewById(R.id.toolbarlayout);        collapsingToolbarLayout.setTitle("collapsingToolbarLayout");

如果Toolbar和CollapsingToolbarLayout同时也设置标题的的话，CollapsingToolbarLayout生效；
还有我们上面提到的：exitUntilCollapsed需要配合android：minHeight属性使用，在没有设置的情况下默认使用toolbar的高度；

点击打开链接免费下载源码

4 0