折叠式布局

效果图如下

从头开始先建立一个名为 Folding 项目，然后在创建一个Activity, OneActivity 这个Activity带有自身的XML布局文件，

** 标题栏折叠** 首先打开activity_one.xml文件将里面的总布局改为CoordinatorLayout里面以此嵌套AppBarLayout 、Toolbar。如下图所示

嵌套好之后设置一些简单的样式即可到这一步基本上这个折叠布局已经完成了，然后只要填充相关的控件即可实现效果，要注意的点是Toolbar中放置的是你需要折叠和展开的控件，而AppBarLayout中放置的是Toolbar折叠之后显示的控件，这个地方你可以放任何控件，前提是你得避免控件之间的冲突。我们就折叠一个图片ImageView吧，折叠之后显示一个标题TextView。如下图所示

到这里我们就已经实现了这个折叠式，当你点击这个蓝色背景标题往上面滑动时，ImageView就会折叠起来，往下滑动时图片就会展开。为了使体现更好可以AppBarLayout下面放一个滚动条，不要用ScrollView而是NestedScrollView因为这里你是要联动的。不论是ScrollView还是NestedScrollView，里面都只能包裹一个控件，我常用的是LinearLayout 然后LinearLayout里面设置纵向排列，放三张图片，这样LinearLayout的总高度就会超过手机屏幕，形成滑动之后图片向上面展示的效果，其实加了NestedScrollView之后，即使里面什么东西都没有，你照样可以滚动，但是如果你用ScrollView就不行，它里面就必须要有东西才行，我们看一下布局

这个时候再运行一下就有比较好的折叠效果了

最后我再放一下整体的布局页面的代码

<?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=".OneActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentInsetStart="0dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <ImageView
                android:scaleType="centerCrop"
                android:src="@drawable/background7"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>
        </android.support.v7.widget.Toolbar>


        <TextView
            android:gravity="center"
            android:textSize="18sp"
            android:textColor="#fff"
            android:text="标题"
            android:background="#2B8EE1"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>

    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            
            <ImageView
                android:scaleType="centerCrop"
                android:src="@drawable/background"
                android:layout_width="match_parent"
                android:layout_height="300dp"/>

            <ImageView
                android:scaleType="centerCrop"
                android:src="@drawable/background3"
                android:layout_width="match_parent"
                android:layout_height="300dp"/>

            <ImageView
                android:scaleType="centerCrop"
                android:src="@drawable/background5"
                android:layout_width="match_parent"
                android:layout_height="300dp"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Github地址

Android 折叠式布局

折叠式布局