Android之摺疊懸浮

    我們的Android手機的屏幕是十分有限的，怎麼在有限的屏幕展示足夠多的內容一直是我們不懈的追求。而摺疊懸浮效果正是這個需求的實現，且兼顧了美觀。話不多說，先上效果圖。

    內容大致分兩部分，當完全展開的時候，上半部分展示標題，且可展示額外的如背景圖、頭像等信息。下半部分是可滾動的控件或包含可滾動控件的控件(如ViewPager)。而還有一個特殊的部分是當摺疊的時候會停留下頁面頂部的部分，一般做導航指示器。這樣，當完全展開的時候，可以展示足夠多的內容。而當完全摺疊的時候，有可以將屏幕控件基本全部留給列表，使列表的可展示區域最大化。

    那麼這個效果是如何實現的呢，其實是使用了CoordinatorLayout+AppBarLayout+可滾動列表作爲核心來實現的。請注意，這裏的可滾動列表不能用之前的ListView、GridView，而必須使用實現了NestedScrollingParent、NestedScrollingChild的如NestedScrollView、RecyclerView這種控件。而之所以能實現這種摺疊懸浮的效果也正是由於CoordinatorLayout也實現了NestedScrollingParent、NestedScrollingChild，這樣它們之間的滾動才能聯動起來，知道列表滾動到了哪兒，是否該摺疊或者懸浮。

    我這裏爲了兼容androidX對引入的控件包做了兼容，下面給出包。如果沒兼容androidX的話按原控件包引入。

implementation 'androidx.appcompat:appcompat:1.0.2'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

先看下佈局代碼：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="300dp"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5" >
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:src="@drawable/ic_sys_notification"/>
            </RelativeLayout>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:textAlignment="center"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin">

            </androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="center"
            app:layout_scrollFlags="scroll|enterAlways|snap">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="我是想懸停的TableLayout"/>
        </TableLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

CoordinatorLayout包裹了一個AppBarLayout和一個NestedScrollView(或者RecyclerView)，且滾動控件添加代碼app:layout_behavior="@string/appbar_scrolling_view_behavior"，AppBarLayout內部控件通過app:layout_scrollFlags來設置聯動方式及懸浮。

以上佈局就實現了摺疊懸浮的頁面，基本不需要額外的代碼介入。可以發現Google其實已經爲我們實現了許多有趣而又好用的控件等待我們去發現呢!

國際慣例，代碼地址：https://gitee.com/calm1516/CHover.git