继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

标题栏滑出屏幕效果实现

潇湘沐
关注TA
已关注
手记 104
粉丝 12
获赞 38

一、需求分析

不知道大家有没有遇到一种情况,由于手机屏幕比较少,一个页面里面有标题栏又有广告条,那么下面的RecycleView就没多少空间了。为了解决这一个问题,我们可以在用户向上滑动RecycleView的时候,把标题栏以及一些广告条等东西向上滑出屏幕。

实现方式一:

监听RecycleView的滑动事件,当RecycleView有向上滑动的趋势的时候,根据滑动的像素值给标题栏以及一些广告条设置负值的padding(垂直方向),这样就可以达到我们的目的。同理,当RecycleView有向下滑动的趋势的时候,重新把标题栏以及一些广告条显示回来。

实现方式二:

但是这种方式比较麻烦,Google为了解决这个问题,在5.0新特性控件中已经为我们提供了一些布局容器,他们分别是CoordinatorLayout。AppBarLayout。

二、原理分析

首先,这两个布局容器都在design包下面,大家引入进来就可以使用了。

CoordinatorLayout和AppBarLayout必须配合使用。CoordinatorLayout作为布局的根元素,AppBarLayout必须为CoordinatorLayout的第一个直接子元素。

AppBarLayout里面可以放置一些你想要作为“AppBar”的一且控件,比如你想把标题栏,广告条滑出去的话,就必须把他们放入AppBarLayout里面,并且添加自定义属性:

app:layout_scrollFlags="scroll|enterAlways"

设置的layout_scrollFlags有如下几种选项:

scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。

enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。

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

exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
下滚动有可以出现。

为了使得Toolbar可以滑动,我们必须还得有个条件,就是CoordinatorLayout布局下包裹一个可以滑动的布局,比如 RecyclerView等布局 (经过测试,WebView,ListView,ScrollView不支持)具有滑动效果的组件。并且给这些组件设置如下属性来告诉CoordinatorLayout,该组件是带有滑动行为的组件,然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了。

app:layout_behavior="@string/appbar_scrolling_view_behavior"

注意的是,如果你的RecycleView外面还包含有其他布局的话,在根节点添加这个属性即可。如果不添加的话,布局会压在AppBarLayout上面。

原文链接:http://www.apkbus.com/blog-904275-65738.html

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP