欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

android Material Design 学习之六:AppBarLayout

程序员文章站 2022-05-30 22:16:59
...
/**
 * AppBarLayout is a vertical {@link LinearLayout} which implements many of the features of
 * material designs app bar concept, namely scrolling gestures.

AppBarLayout 就是实现了MD风格的滚动手势的LinearLayout。

AppBarLayout 的基本使用

RecyclerView 与ToolBar 联动

布局:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start"
    >

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <include layout="@layout/tool_bar_layout"/>
    </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.v7.widget.RecyclerView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:src="@mipmap/fab_add"
            app:backgroundTint="@color/fab_ripple"
            android:layout_gravity="bottom|right|end" />

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

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

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

这里AppBarLayout 包裹着ToolBar,为RecyclerView 指定behavior:

   app:layout_behavior="@string/appbar_scrolling_view_behavior"

为ToolBar 指定scrollFlags:

  app:layout_scrollFlags="scroll"

android Material Design 学习之六:AppBarLayout

向上滑动,ToolBar 消失,向下滑动,ToolBar 出现。

AppBarLayout 的五种scrollFlags

                SCROLL_FLAG_SCROLL,
                SCROLL_FLAG_EXIT_UNTIL_COLLAPSED,
                SCROLL_FLAG_ENTER_ALWAYS,
                SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED,
                SCROLL_FLAG_SNAP


第一种:scroll

 app:layout_scrollFlags="scroll"

官方说明:

    /**
         * The view will be scroll in direct relation to scroll events. This flag needs to be
         * set for any of the other flags to take effect. If any sibling views
         * before this one do not have this flag, then this value has no effect.
         */

该子View 会随着滚动事件滚出或者滚进屏幕,而且其他Flags 之前必须添加这个Flag,否则不起作用。

第二种:enterAlways

 app:layout_scrollFlags="scroll|enterAlways"
/**
         * When entering (scrolling on screen) the view will scroll on any downwards
         * scroll event, regardless of whether the scrolling view is also scrolling. This
         * is commonly referred to as the 'quick return' pattern.
         */

直接看图:

android Material Design 学习之六:AppBarLayout

与上图的区别就在于,向下滑动时的区别,scroll 是先滑动RecyclerView ,再滑动Toolbar ,而 enter_Always 是优先滑动ToolBar 再滑动RecyclerView 。


第三种:enterAlwaysCollapsed

 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
 /**
         * An additional flag for 'enterAlways' which modifies the returning view to
         * only initially scroll back to it's collapsed height. Once the scrolling view has
         * reached the end of it's scroll range, the remainder of this view will be scrolled
         * into view. The collapsed height is defined by the view's minimum height.
         *
         * @see ViewCompat#getMinimumHeight(View)
         * @see View#setMinimumHeight(int)
         */

这种模式稍复杂,带着折叠效果。修改ToolBar 布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:minHeight="50dp"
    app:title="@string/app_name"
    app:theme="@style/OverFlowMenuTheme"
    app:popupTheme="@style/AppTheme"
    android:background="@color/colorPrimary"
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
   ></android.support.v7.widget.Toolbar>

这里设置了最小高度。

android Material Design 学习之六:AppBarLayout


可以看出,这种模式向下滑动时,先滑动到最小值,然后RecyclerView 开始滑动,到达边界时,ToolBar在向下滑动。

第四种:exitUntilCollapsed

app:layout_scrollFlags="scroll|exitUntilCollapsed"
 /**
         * When exiting (scrolling off screen) the view will be scrolled until it is
         * 'collapsed'. The collapsed height is defined by the view's minimum height.
         *
         * @see ViewCompat#getMinimumHeight(View)
         * @see View#setMinimumHeight(int)
         */

如图:

android Material Design 学习之六:AppBarLayout


也就是说无论滚上还是滚下,都会保留最小高度。

第五种:snap

   app:layout_scrollFlags="scroll|snap"

 /**
         * Upon a scroll ending, if the view is only partially visible then it will be snapped
         * and scrolled to it's closest edge. For example, if the view only has it's bottom 25%
         * displayed, it will be scrolled off screen completely. Conversely, if it's bottom 75%
         * is visible then it will be scrolled fully into view.
         */

android Material Design 学习之六:AppBarLayout

即使向上滑到最小高度,松开手指,还是会全部缩上去,这就是snap 特殊的地方,多一个吸附效果。


这五种模式,哪种适合你,就用哪一个。