在我们对NavigationView
侧滑,TextInputLayout
输入框,Snackbar
弹出提示框,FloatingActionBar
圆形button,TabLayout
顶部导航栏及CoordinatorLayout
有了一定的了解后,我们最后将对AppBarLayout
,CollapsingToolbarLayout
进行最后的分析,我们先看两张效果图,(因为暂时没找到好的方法来录制gif,先借用网上的图)
AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,默认的AppBarLayout是垂直方向的,它的作用是把AppBarLayout所包裹的内容都作为AppBar, 支持手势滑动操作,可以管理其中的控件在内容滚动时的行为,如图所示:
实现这样效果的代码布局如下:
注意:这里我们将Toolbar和TabLayout共同组成AppbarLayout的内容,并且AppbarLayout必须作为ToolBar的父布局
我们知道,AppBarLayout是支持我们的手势滑动操作的,不过需要跟CoordinatorLayout一起搭配使用,我们先看两张效果图,然后再进行分析:
左侧是我们初始化的代码,从上至下分别为Toolbar
,TabLayout
,ViewPager
,底部为一个FloatingActionBar
,我们现在来看一下xml文件布局的代码:
我们现在来分析一下整个布局中CoordinatorLayout的作用:
因为CoordinatorLayout是一个超级的FrameLayout,所以我们只要设置android:layout_gravity="bottom|end"
这个属性即可将FloatingActionBar放置在底部靠右的位置;
如果我们想要在手指向上滑动的时候Toolbar隐藏,就需要给Toolbar设置一个属性,app:layout_scrollFlags="scroll|enterAlways"
,来确定滚动出屏幕时候的动作,我们现在来解释一些这些参数:
CollapsingToolbarLayout
中才有用,所以这些flag的使用场景,一般都是固定的;
当然,为了使Toolbar可以滚动,还需要一个条件,就是CoordinatorLayout布局下需要包裹一个可以滑动的布局,比如 RecyclerView或者NestedScrollView(ListView及ScrollView不支持),CoordinatorLayout包含的子布局中带有滚动属性的View需要设置app:layout_behavior
属性。示例中Viewpager设置了此属性:app:layout_behavior="@string/appbar_scrolling_view_behavior"
,这样一来AppBarLayout就能响应RecyclerView中的滚动事件,CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了;
总结:如果想让Toolbar划出屏幕,需要做到以下4点
CoordinatorLayout作为顶层的父布局 需要给Toolbar也就是想要划出屏幕的view设置flag值,app:layout_scrollFlags=”scroll|enterAlways”
需要给可滑动的组件设置一个layout_behavior
的属性,示例中为viewpager,app:layout_behavior="@string/appbar_scrolling_view_behavior"
可滑动的组件目前经测试支持RecyclerView,NestedScrollView,示例中viewpager中包含的就是一个RecyclerView
我们知道如果在某些详情页面,我们只是在AppbarLayout中使用了可隐藏/展示的Toolbar的话, 只能固定到屏幕顶端并且不能做出好的动画效果,而且无法控制不同元素如何响应collapsing(折叠)的细节,所以为了达到此目的,CollapsingToolbarLayout就应运而生.
CollapsingToolbarLayout一般都是需要包括一个Toolbar,这样就可以实现一个可折叠的Toolbar,一般都是作为AppbarLayout的子view使用,CollapsingToolbarLayout的子视图类似于LinearLayout垂直方向排放。
CollapsingToobarLayout的属性及用法:
Collapsing title:ToolBar的标题,CollapsingToolbarLayout和Toolbar在一起使用的时候,title会在展开的时候自动变得比较大,而在折叠的时候让字体变小过渡到默认值。注意,你必须在CollapsingToolbarLayout上调用setTitle(),而不是在Toolbar上进行设置。 Content scrim:ToolBar被折叠到顶部固定时候的背景,你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用app:contentScrim=”?attr/colorPrimary”
来改变背景。 Status bar scrim:状态栏的背景,调用方法setStatusBarScrim(Drawable)。 Parallax scrolling children:CollapsingToolbarLayout滑动时,子视图的视觉因子,可以通过属性app:layout_collapseParallaxMultiplier=”0.7”
来改变。值的范围[0.0,1.0],值越大视差越大。 CollapseMode :子视图的折叠模式,需要在子视图设置;app:layout_collapseMode=”parallax”
来改变。 layout_anchor : 这个是CoordinatorLayout提供的属性,与layout_anchorGravity 一起使用,可以用来放置与其他视图关联在一起的悬浮视图(如 FloatingActionButton)或者头像
我们先来看看实现的效果图:
我们现在看看布局文件的写法:
注意:
我们使用了下面的参数设置了FloatingActionButton的位置,两个属性共同作用使得浮动按钮可以随着手势能折叠消失和展现。
app:layout_anchor=”@id/appbar”
app:layout_anchorGravity=”bottom|right|end”
AppBarLayout 的高度layout_height固定,不能 “wrap_content”,如果不固定的话动画效果不友好
CollapsingToolbarLayout的子视图设置layout_collapseMode
属性 关联悬浮视图设置app:layout_anchor,app:layout_anchorGravity
属性
源码地址: GitHub
OK,到这里我们已经将Materil Design的常用控件介绍完毕,下次我们将对自定义的Behavior进行解析,我们将会实现更加酷炫好看的效果,愿大家都有美好的一天…