CoodinatorLayout 实现 banner沉浸式+滚动视差+悬浮搜索框+标题置顶复杂联动效果


1.开门见上,先上效果图

                 

                                        代码传送门


2.CoodinatorLayout及相关控件简介

      CoordinatorLayout遵循Material Design风格,包含在 support Library中,结合AppBarLayout, CollapsingToolbarLayout,NestScrollView等 可 产生各种炫酷的折叠悬浮效果。作为一个容器可与一个或多个子View进行交互。

      AppBarLayout继承自LinearLayout,布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念,它可以让你定制当某个可滚动View的滚动手势发生变化时,其内部的子View实现何种动作。

       CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠的App Bar效果。它需要放在AppBarLayout布局里面,并且作为AppBarLayout的直接子View。CollapsingToolbarLayout主要属性:

       (1) layout_scrollFlags

  • scroll - 想滚动就必须设置这个。

  • enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)。

  • exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。

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

  • contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

  • expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

        (2) layout_collapseMode (折叠模式) - 有两个值:

  • pin -  设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。

  • parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

        (3) layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1。

        Toolbar主要是用来替换ActionBar的,换句话说,ActionBar能做的,Toolbar都能做。如果你对ActionBar的使用比较熟悉,你会发现Toolbar使用起来非常简单。ok,既然是替换,当然用Toolbar的时候就得先去把ActionBar给隐藏掉。隐藏掉ActionBar方法有多种,我是直接在application的主题里面设置成<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar”>

        NestedScrollView是support-v4包提供的控件,继承至FrameLayout, 并实现了NestedScrollingParent,NestedScrollingChild, ScrollingView接口。它的作用类似于android.widget.ScrollView,不同点在于NestedScrollView支持嵌套滑动,常用于内部嵌套RecyclerView一起使用。


3.布局文件实现

先看看布局视图的结构ÿ

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值