2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > android隐藏toolbar Android CoordinatorLayout的使用——实现Toolbar的隐藏和折叠

android隐藏toolbar Android CoordinatorLayout的使用——实现Toolbar的隐藏和折叠

时间:2021-09-21 10:23:01

相关推荐

android隐藏toolbar Android CoordinatorLayout的使用——实现Toolbar的隐藏和折叠

简单介绍下CoordinatorLayout

CoordinatorLayout

public class CoordinatorLayout

extends ViewGroup implements NestedScrollingParent2

java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.support.design.widget.CoordinatorLayoutjava

CoordinatorLayout 是一个“super-powered FrameLayout”,主要用于两个方面

1. 做为最顶层的控件

2. 做为一个父控件于一个或者多个子控件进行交互android

CoordinatorLayout使用新的思路经过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout经过设置子View的 Behaviors来调度子View。系统(Support V7)提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior 等。git

这篇文章主要讲述ToolBar 的隐藏和折叠

一.配合AppBarLayout 控件,实现隐藏

AppBarLayout

public class AppBarLayout

extends LinearLayout

java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.widget.LinearLayout

↳ android.support.design.widget.AppBarLayoutgithub

AppBarLayout 继承LinearLayout,子控件默认时竖直方向显示。它支持滑动手势,它的子控件能够经过在代码中调用setScrollFlags(int)或者在XML里app:layout_scrollFlags来设置它的滑动手势,可是前提是根布局是CoordinatorLayout。 web

下面介绍下scrollFlags 的5种参数:

scroll: 全部想滚动出屏幕的view都须要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。例如,TabLayout 没有设置这个值,将会停留在屏幕顶部

enterAlways: 每次向下的滚动都会致使该view变为可见,启用快速“返回模式”

snap:当下拉不到必定高度时,Toolbar回弹回去,若是上滑不到必定高度,Toolbar不会收缩。可是上滑时会全隐藏Toolbar

enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度

exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端,向下滑时要等item是第一个时才能滑出Toolbar。

OK,下面看一下 app:layout_scrollFlags="scroll|enterAlways" 这样设置的效果

布局文件以下:app

xmlns:app="/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

app:layout_scrollFlags="scroll|enterAlways" />

android:id="@+id/recyclerview"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

这里还要注意一个地方 :RecyclerView 的layout_behavior 属性,其实@string/appbar_scrolling_view_behavior 对应着的AppBarLayout.ScrollingViewBehavior,正是这个Behavior 实现了组件及之间的滑动交互,控制着Toolbar 的隐藏,因此这个参数是绝对不能忽略的。svg

AppBarLayout的子控件不单单能够设置为Toolbar,也能够包含其余的View,好比说包裹一个 TabLayout。

代码及效果以下:布局

xmlns:app="/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

app:layout_scrollFlags="scroll|enterAlways" />

android:id="@+id/tablayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabMode="fixed">

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

2、配合CollapsingToolbarLayout,实现ToolBar的折叠

CollapsingToolbarLayout

public class CollapsingToolbarLayout

extends FrameLayout

java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.widget.FrameLayout

↳android.support.design.widget.CollapsingToolbarLayout动画

CollapsingToolbarLayout:顾名思义就是可折叠的toolbar布局,继承FrameLayout。CollapsingToolbarLayout 设置 layout_scrpllFlag 属性,能够控制包含在CollapsingToolbarLayout 中的控件。spa

下面介绍下CollapsingToolBarLayout 的属性

app:title=”” ToolBar 的标题,当ToolBar 和 CollapsingToolBarLayout 同时设置了title后,以CollapsingToolBarLayout 的为准。

app:contentScrim=”?attr/colorPrimary” 当CollapsingToolBarLayout 被折叠后在最顶部显示的颜色。

app:expandedTitleGravity=”left|bottom” 当CollapsingToolBarLayout 彻底展开后,title 所在的位置,默认的显示在左下角 left+bottom

app:collapsedTitleGravity=”left” 当CollapsingToolBarLayout 被折叠后title在顶部显示的位置,默认的显示在左边 。

app:layout_collapseMode=”pin” 注意:这是子视图的属性 表示子视图的折叠模式,有两个参数 1.”pin” 固定模式,在折叠的时候固定在顶端 2. “parallax” 视差模式,在折叠的过程当中会有个视差折叠的效果。

好了,咱们来看下使用CollapsingToolBarLayout 的效果

布局文件以下:

xmlns:app="/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:id="@+id/collapsingtoolbar"

android:layout_width="match_parent"

android:layout_height="250dp"

app:collapsedTitleGravity="left"

app:contentScrim="?attr/colorPrimary"

app:expandedTitleGravity="left|bottom"

app:layout_scrollFlags="scroll|exitUntilCollapsed">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="?attr/colorPrimary"

android:scaleType="fitXY"

android:src="@mipmap/timg" />

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

app:layout_collapseMode="pin" />

android:id="@+id/tablayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabIndicatorColor="@color/select_color_000000"

app:tabMode="fixed"

app:tabSelectedTextColor="@color/select_color_000000"

app:tabTextColor="@color/color_999999">

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

以上就实现了Toolbar 的折叠和隐藏,实际上CoordinatorLayout 最经典的设计 BeHavior 并无详细讲到,我会在下一篇博客中更新 如何自定义的使用BeHavior。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。