Material Design之CollapsingToolbarLayout,實現Toolbar的摺疊效果

簡介

是屬於Material Design的一個特點控件，能夠實現Toolbar摺疊效果。CollapsingToolbarLayout繼承FrameLayout，是一種幀佈局。

因此CollapsingToolbarLayout實現Toolbar的摺疊上具備絕對的優點，實現起來簡單。

實戰

看咱們的Activity基本上不須要設置滑動的監聽等等，直接在Activity的佈局使用CollapsingToolbarLayout便可實現Toolbar的摺疊效果。

public class CollapsingToolbarActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_toolbar);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }

}
複製代碼

接下來主要看activity_collapsing_toolbar.xml的佈局

<?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.main.collapsingtoolbar.CollapsingToolbarActivity">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:scaleType="centerCrop"
                    android:src="@drawable/cc"/>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:scaleType="centerCrop"
                    android:src="@drawable/cc"/>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:scaleType="centerCrop"
                    android:src="@drawable/cc"/>
            </android.support.v7.widget.CardView>
            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:scaleType="centerCrop"
                    android:src="@drawable/cc"/>
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="260dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="200dp"
            app:collapsedTitleGravity="center"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleGravity="left"
            app:expandedTitleMarginTop="200dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="@color/colorPrimary"
            app:title="標題"
            >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/bb"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="1"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#00ffffff"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:layout_behavior="com.main.behavior.FabBehavior"/>

</android.support.design.widget.CoordinatorLayout>

複製代碼

NestedScrollView能夠跟ScrollView同樣，實現View的滑動。AppBarLayout是一種支持響應滾動手勢的Toolbar佈局。

在CollapsingToolbarLayout做爲佈局，而Toolbar做爲子佈局，想實現摺疊效果，就必須在子View設置app:layout_collapseMode屬性。其屬性值能夠選擇：off、pin、parallax。

off：默認屬性，佈局將正常顯示，沒有摺疊的行爲。 pin：CollapsingToolbarLayout摺疊後，此佈局將固定在頂部。 parallax：CollapsingToolbarLayout摺疊時，此佈局也會有視差摺疊效果，能夠和app:layout_collapseParallaxMultiplier匹配使用，設置視差滾動因子，值爲：0~1。

注意： 一、AppBarLayout設置固定高度，而且要實現摺疊效果必須比toolbar的高度要高。 二、CollapsingToolbarLayout最好設置成match_parent

效果圖