Android学习笔记之CoordinatorLayout与AppBarLayout

在上一篇文章《可交互提示学习笔记》中可能会遇到这种问题：弹出的Snackbar遮挡了手机底部的内容，这种情况我们可以通过CoordinatorLayout使内容随Snackbar的弹出而上移，以确保不会被Snackbar遮挡到

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <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.FloatingActionButton
        android:id="@+id/float_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/done"
        android:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout可以理解为是一个加强版的FrameLayout，在使用方面也和FrameLayout相似，只是它可以监听其所有子控件的各种事件，然后自动做出最合理的响应。但是Snackbar并不是CoordinatorLayout的子控件，那么它是如何监听到的呢？这是因为我把Snackbar的弹出写在FloatingActionButton按钮的点击事件中，并在其make()方法中传入的第一个参数View即为FloatingAcitonButton本身，而FloatingActionButton是CoordinatorLayout的子控件，因此可以监听到。

但使用CoordinatorLayout之后又会引入新的问题。因为是加强版FrameLayout的关系，如果其子控件不明确定位的话，默认都会摆放在布局的左上角，产生控件被遮挡的现象。比如，在上述布局中加入一个RecyclerView之后，RecyclerView会遮挡住Toolbar

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <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.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/float_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/done"
        android:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>

要解决这种问题，我们就需要用到AppBarLayout。AppBarLayout实际上是一个垂直方向的LinearLayout，它不仅可以解决控件遮挡的问题，还应用了MaterialDesign的设计理念，从而监听到滚动事件，并使子控件做出相应行为。例如在这里，我们想让Toolbar监听RecyclerView的滚动事件的话，只需要三步即可。第一步将Toolbar嵌套到AppBarLayout中，第二步给RecyclerView指定一个布局行为，第三步给Toolbar设置响应方式。

<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"
            app:layout_scrollFlags="scroll|enterAlways|snap"/>
    </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.FloatingActionButton
        android:id="@+id/float_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/done"
        android:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>

可以看到在RecyclerView中使用app:layout_behavior属性指定了一个布局行为。并且在Toolbar中使用app:layout_scrollFlags属性指定其响应方式。其中

scroll表示当RecyclerView向上滚动时，Toolbar会跟着一起向上滚动并隐藏
enterAlways表示当RecyclerView向下滚动时，Toolbar会跟着一起向下滚动并显示
snap表示当Toolbar还没有完全隐藏或显示时，会根据当前距离自动选择是隐藏还是显示

Android学习笔记之CoordinatorLayout与AppBarLayout

猜你喜欢