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>
代碼裏面有註釋說明。