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"
向上滑动,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.
*/
直接看图:
与上图的区别就在于,向下滑动时的区别,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>
这里设置了最小高度。
可以看出,这种模式向下滑动时,先滑动到最小值,然后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)
*/
如图:
也就是说无论滚上还是滚下,都会保留最小高度。
第五种: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.
*/
即使向上滑到最小高度,松开手指,还是会全部缩上去,这就是snap 特殊的地方,多一个吸附效果。
这五种模式,哪种适合你,就用哪一个。
推荐阅读
-
学习使用Material Design控件(四)Android实现标题栏自动缩放、放大效果
-
荐 Android Material Design 系列之 SearchView + Toolbar 开发详解
-
Android Material Design 系列之 TextInputLayout 使用详解
-
Android Study Material Design 十三 之CoordinatorLayout交互动画
-
Android Study Material Design 九 之 Hello TabLayout
-
Android Study Material Design 十二 之 FloatingActionButton初识
-
Android Study Material Design 五 番外篇 之:深入分析SnackBar源码
-
Android Study Material Design 十七 之 转场动画
-
Android Study Material Design 八 之 玩转Palette调色板
-
android Material Design 学习之六:AppBarLayout