栗子——TabLayout+ViewPager滑动吸顶悬停

如何使用CoordinatorLayout来协调TabLayout实现滑动吸顶的悬停效果

栗子配图.png

---

栗子惯例，先上GIF

栗子.gif

---

使用到的控件

使用前需要在Gradle加入Support Design Library：
compile 'com.android.support:design:25.0.1'

CoordinatorLayout

CoordinatorLayout通过协调子布局的形式，产生联动效果。通过设置子View的Behaviors来协调子View。

AppBarLayout

AppBarLayout中的一个属性android:fitsSystemWindows="true"，是为了调整系统窗口布局以适应布局。
AppBarLayout里面的View，是通过app:layout_scrollFlags属性来控制，其中有4种Flag的类型：

• Scroll：向下滚动时,被指定了这个属性的View会被滚出屏幕范围直到完全不可见的位置。
• enterAlways：向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置。
• enterAlwaysCollapsed： 当视图已经设置minHeight属性又使用此标志时，视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
• exitUntilCollapsed： 滚动退出屏幕，最后折叠在顶端。

CollapsingToolbarLayout

用来协调AppBarLayout来实现滚动隐藏ToolBar的效果。

Toolbar

Toolbar在v7包中，设置layout_collapseMode协调CollapsingToolbarLayout达到滑动视图的视觉差效果：

• pin：固定模式，在折叠的时候最后固定在顶端。
• parallax：视差模式，在折叠的时候会有个视差折叠的效果。

---

main.xml

---

注意事项

在xml中为AppBarLayout设置属性android:fitsSystemWindows="true"

在xml中为CollapsingToolbarLayout设置属性app:layout_scrollFlags="scroll | exitUntilCollapsed

在xml中为Toolbar设置属性app:layout_collapseMode="pin"

在xml中为ViewPager设置属性app:layout_behavior="@string/appbar_scrolling_view_behavior"

在使用的ViewPager时候需要用RecyclerView做为列表

总结

这是Android提供的一种炫酷组合控件~顶部的图片可以换成任意的View，比如Banner图等。

---

源码地址

https://github.com/FJ917/FJNestedHoverTabDemo
有用的话，请给个star支持下，谢谢~

---

未经本人允许禁止转载，违者必究

---

：www.jianshu.com/u/3d2770e6e489

欢迎加入QQ交流群657206000点我加入
QQ交流群：657206000