1. 程式人生 > >FC 12.5.2 關於AppBarLayout

FC 12.5.2 關於AppBarLayout

在這裡推薦一篇文章:Android 詳細分析AppBarLayout的五種ScrollFlags

上一篇文章將精美的水果圖片展示出來了,但是有出來了一個新的問題:Toolbar被Recycleview擋住了,怎麼解決呢?

原因分析:CoordinatorLayout控制元件是一個加強版的FrameLayout,FrameLayout中所有的控制元件在不進行明確定位的情況下都會預設擺在佈局的左上角,從而產生了遮擋現象。

一般情況下,解決方案可能就是讓Recycleview向下偏移一個Toolbar高度,從而保證不被遮擋。但是我們使用的是CoordinatorLayout!自然有更高明的辦法。

使用AppBarLayout

這裡我們使用Design Support中的另一個工具AppBarLayout,他是一個垂直方向的LinearLayout,內部做了很多滾動時間的封裝。

只需兩步解決Toolbar覆蓋問題:

  • 第一步,將Toolbar巢狀到AppBarLayout中
  • 第二步,給RecycleView指定一個佈局(app:layout_behavior)
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_Layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.AppBarLayout>

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

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            app:elevation="8dp" />
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>

執行,效果如圖(我略微上滑了一下,用於區分這張圖與接下來的一張圖)

我們已經使用AppBarLayout解決了RecyclerView遮擋Toolbar的問題,但是AppBarLayout實現更多的Material Design 效果

僅需在Toolbar裡添屬性:app:layout_scrollFlags="scroll|enterAlways|snap"

(這裡再提一下,這篇文章講解了Android 詳細分析AppBarLayout的五種ScrollFlags,講的很好)

  • scroll表示當RecycleView向上滾動的時候,Toolbar會跟著向上滑動並實現隱藏;
  • enterAlways表示當RecycleView向下滑動並重新顯示。
  • snp表示Toolbar還沒有完全隱藏或顯示的時候,根據當前滾動的距離自動選擇顯示還是隱藏。

效果如圖

(隨著我們上滑RecycleView,Toolbar消失了,向下滑動RecycleView,Toolbar又會重新出現。)