Android控件<第二十六篇>:CoordinatorLayout+AppBarLayout現實

NestedScrolling的使用是所有嵌套滾動效果的基礎,先看一下布局文件代碼:

<com.zyc.hezuo.animationdemo.MyCustomNestedScrollingParent
    android:id="@+id/nestedparent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/pic_shi"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="20sp"
        android:gravity="center"
        android:background="@color/bt_1"
        android:text="我是標題"/>

    <com.zyc.hezuo.animationdemo.MyCustomNestedScrollingChild
        android:id="@+id/nestedchild"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="我是任意內容我是任意內容我是任意內容我是任意內容我是任意內容我是任意內容我是任意內容我是任意內容我是任意內容我是任意內容"
            android:textSize="30sp"/>

    </com.zyc.hezuo.animationdemo.MyCustomNestedScrollingChild>

</com.zyc.hezuo.animationdemo.MyCustomNestedScrollingParent>

整個布局由MyCustomNestedScrollingParent包裹,它有三個子view,分別是ImageView、TextView、MyCustomNestedScrollingChildMyCustomNestedScrollingChild實現了NestedScrollingChild接口,MyCustomNestedScrollingParent實現了NestedScrollingParent接口,兩者相互配合,根據ImageView的高度計算具體行為。

然而,本章不會重復的說明NestedScrollingChildNestedScrollingParent,本章的重點是CoordinatorLayout、AppBarLayout、NestedScrollViewRecyclerView結合使用。

(1) CoordinatorLayout+AppBarLayout+NestedScrollView
圖片.png

如圖所示,CoordinatorLayout實現了NestedScrollingParent2接口,NestedScrollingParent2NestedScrollingParent類似,從上一篇就知道,僅僅只有NestedScrollingParent是沒有嵌套聯(lián)動效果的,必須結合NestedScrollingChild才可以,這里使用NestedScrollView,NestedScrollView實現了NestedScrollingChild2接口。

布局如下:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity"
    android:background="#cccccc">


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="26sp"
            android:text="阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多"/>

    </android.support.v4.widget.NestedScrollView>

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

然而,CoordinatorLayout還缺少一個至關重要的子布局AppBarLayout,兩者是黃金搭檔,它們同時存在才可以實現嵌套聯(lián)動效果,布局代碼如下:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity"
    android:background="#cccccc">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/che1"
            app:layout_scrollFlags="scroll"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="假設我是標題欄"
            android:textColor="#ffffff"
            android:gravity="center"
            android:textSize="20sp"/>

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="26sp"
            android:text="阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多"/>

    </android.support.v4.widget.NestedScrollView>

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

效果如下:

117.gif

以上效果看起來并不友好,NestedScrollView始終全屏,下拉時AppBarLayout感覺像覆蓋在NestedScrollView上一樣。為了解決這個問題,需要在NestedScrollView上添加Behavior

(2)添加Behavior

添加一句關鍵代碼:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

全部代碼如下:

    <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:textSize="26sp"
            android:text="阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多阿薩打算多啊實打實大大多所啊實打實大大所大多"/>

    </android.support.v4.widget.NestedScrollView>

appbar_scrolling_view_behavior它的值是degisn依賴包自帶的,它的值如下:

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

看到這個值就可以明白,原來就是為了綁定AppBarLayout的內部類ScrollingViewBehavior,其效果如下:

118.gif
(3)scrollFlags說明

首先看一下這個布局代碼

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/che1"
            app:layout_scrollFlags="scroll"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="假設我是標題欄"
            android:textColor="#ffffff"
            android:gravity="center"
            android:textSize="20sp"/>

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

在ImageView標簽上添加了一句代碼:

app:layout_scrollFlags="scroll"

這句代碼可以讓圖片實現滾動效果,如果刪除就不會有滾動效果了,scrollFlags往往和AppBarLayout一起使用。

scrollFlags的屬性有scroll、enterAlways、enterAlwaysCollapsed、exitUntilCollapsed、snap、snapMargins,他們的效果如下:

一、[app:layout_scrollFlags="scroll"]:一般聯(lián)動效果,上聯(lián)動時先父后子,下聯(lián)動時先子后父。

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/che1"
            app:layout_scrollFlags="scroll"/>
118.gif

二、[app:layout_scrollFlags="scroll|enterAlways"]:上聯(lián)動和下聯(lián)動都是先父后子。

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/che1"
            app:layout_scrollFlags="scroll|enterAlways"/>
119.gif

三、[app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"]

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/che1"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>

enterAlwaysCollapsed是enterAlways的延伸,enterAlwaysCollapsed必須和enterAlways一起使用。enterAlwaysCollapsed主要對view的minHeight屬性起作用。上聯(lián)動時先父后子,下聯(lián)動時,先父(到最小高度)后子再父。

120.gif

四、[app:layout_scrollFlags="scroll|exitUntilCollapsed"]

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/che1"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"/>

上聯(lián)動時,先父后到最小高度,后子。下聯(lián)動時,先子后父。

121.gif

五、[app:layout_scrollFlags="scroll|snap"]

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/che1"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|snap"/>

圖片實現viewpager類似的效果。

122.gif

六、[app:layout_scrollFlags="scroll|snap|snapMargins"]

snapMargins是snap延伸,必須和snap一起使用才會生效。

首先,給view添加margin,并且不使用snapMargins參數

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/che1"
            android:layout_marginTop="100dp"
            android:layout_marginBottom="100dp"
            app:layout_scrollFlags="scroll|snap"/>

效果如下:

123.gif

如果添加上snapMargins參數之后

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/che1"
            android:layout_marginTop="100dp"
            android:layout_marginBottom="100dp"
            app:layout_scrollFlags="scroll|snap|snapMargins"/>

效果如下:

124.gif
(4)結合RecyclerView
圖片.png

如圖所示,RecyclerView也實現了NestedScrollingChild2,所以RecyclerView可以和CoordinatorLayout、AppBarLayout一起實現聯(lián)動效果。

布局如下:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity"
    android:background="#cccccc">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/che1"
            app:layout_scrollFlags="scroll"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="假設我是標題欄"
            android:textColor="#ffffff"
            android:gravity="center"
            android:textSize="20sp"/>

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

效果如下:

125.gif

[本章完...]

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容