栗子——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 version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="@style/ToolbarTheme"
android:fitsSystemWindows="true">
<!--app:layout_scrollFlags="scroll|enterAlways"-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:navigationIcon="@mipmap/back"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerInside"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:orientation="vertical">
<ImageView
android:background="@mipmap/image"
android:layout_width="match_parent"
android:layout_height="200dp" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#ffffff"
app:theme="@style/ToolbarTheme"
android:gravity="center_vertical"
android:background="#00ffffff"
app:navigationIcon="@mipmap/back"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/selector_list_item"
app:tabIndicatorColor="#666666"
app:tabSelectedTextColor="#4D4D4D"
app:tabTextColor="#A7A7A7" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
注意事项
在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支持下，谢谢~
未经本人允许禁止转载，违者必究
| 欢迎加入QQ交流群657206000点我加入 |
|---|
QQ交流群：657206000
|
