AppBarLayout
詳細可參考這裡:玩轉AppBarLayout,更酷炫的頂部欄
用AppBarLayout 可讓你定制 當某個可滾動View的滾動手勢 發生變化時,其内部的子View實作何種動作。 通常和CoordinateLayout合作使用。
舉個例子:AppBarLayout、ViewPager作為CoordinateLayout的子view,ViewPager設定“app:layout_behavior="@string/appbar_scrolling_view_behavior"來關聯AppBarLayout,來始終保持在AppBarLayout下方;AppBarLayout中子view設定 “app:layout_scrollFlags”來決定如何滾動。
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout_ranking_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:background="@color/comm_transparent">
<!--text設定了layout_scrollFlags="scroll",會跟着"可滾動View(viewPager内fragment中的recyclerView)一起滑出去"-->
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="@color/common_color_e62117"
android:gravity="center"
tools:text="輪播TextViewTextViewTextViewTextViewTextViewTextViewTextView"
app:layout_scrollFlags="scroll"/>
<!--沒設定layout_scrollFlags,是以到頂部就停止了-->
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_ranking_list_category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/comm_yellow"/>
</android.support.design.widget.AppBarLayout>
<!--ViewPager設定了app:layout_behavior="@string/appbar_scrolling_view_behavior",和AppBarLayout關聯,始終保持在AppBarLayout下方-->
<!--雖然ViewPager本身不是NestedScroll,但是内部fragment中的recyclerView是可滑動view-->
<android.support.v4.view.ViewPager
android:id="@+id/vp_ranking_list"
android:layout_width="match_parent"
android:layout_height="600dp"
android:background="@color/lite_blue"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
效果如圖,手指滑紅色text、黃色tab、viewPager中fragment裡的清單 都是相同效果:紅色text滑出去了,黃色tab隻能滑到頂部。
CollapsingToolbarLayout
CollapsingToolbarLayout是用來對Toolbar進行再次包裝的ViewGroup,主要是用于實作折疊(其實就是看起來像伸縮~)的AppBar效果。它需要放在AppBarLayout布局裡面,并且作為AppBarLayout的直接子View。
效果圖:
下面直接上代碼:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--用AppBarLayout 可讓你定制當某個可滾動View的滾動手勢發生變化時,其内部的子View實作何種動作-->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--AppBarLayout的直接子view,使用layout_scrollFlags設定滾動方式-->
<!--CollapsingToolbarLayout是用來對Toolbar進行再次包裝的ViewGroup,主要是用于實作折疊(其實就是看起來像伸縮~)的App Bar效果。它需要放在AppBarLayout布局裡面,并且作為AppBarLayout的直接子View。 -->
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="this is title!"
app:titleEnabled="true">
<!--視差滾動子View(Parallax scrolling children):子View可以選擇在目前的布局當時是否以“視差”的方式來跟随滾動。(PS:其實就是讓這個View的滾動的速度比其他正常滾動的View速度稍微慢一點)。将布局參數app:layout_collapseMode設為parallax-->
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="@mipmap/blue"
app:layout_collapseMode="parallax" />
<!--引入Toolbar-->
<!--将子View位置固定(Pinned position children):子View可以選擇是否在全局空間上固定位置,這對于Toolbar來說非常有用,因為當布局在移動時,可以将Toolbar固定位置而不受移動的影響。 将app:layout_collapseMode設為pin-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:logo="@mipmap/ic_launcher"
app:navigationIcon="@mipmap/icon_item_detail_back"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--NestedScrollView就是可滾動的view-->
<!--AppBarLayout與NestedScrollView關聯:layout_behavior="@string/appbar_scrolling_view_behavior"-->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_snack_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="show snack bar" />
<Button
android:id="@+id/btn_test_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="btn_test_behavior" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<!--FloatingActionButton-->
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="20dp"
android:background="@color/colorAccent"
android:backgroundTint="@color/colorPrimary"
android:clickable="true"
android:elevation="15dp"
android:src="@mipmap/dog"
app:pressedTranslationZ="10dp" /><!--pressedTranslationZ點選時陰影的大小-->
</android.support.design.widget.CoordinatorLayout>
代碼裡面有注釋說明。