在 Material Design 设计中，AppbarLayout 和 CoordinatorLayout 是非常重要的组件，它们可以帮助我们实现复杂的滚动效果。本文将介绍如何使用这两个组件来实现自定义的滚动效果，并附上实例代码。
AppbarLayout 和 CoordinatorLayout 简介
在 Material Design 设计中，AppbarLayout 是一个可以展示标题、图标、按钮等控件的容器，通常用来实现页面的顶部导航栏。而 CoordinatorLayout 是一个可以监听所有子 View 的滚动事件，并根据事件的发生来控制子 View 的运动和位置的容器。
通过在 CoordinatorLayout 中嵌套 AppbarLayout，我们可以实现一些复杂的滑动效果，比如当用户向下滑动页面时，导航栏会逐渐变小并悬浮在页面顶部，当用户向上滑动页面时，导航栏又会回到原始大小并回到页面顶部。
实现自定义的滚动效果
在实现自定义滚动效果之前，我们需要先了解一下 AppbarLayout 和 CoordinatorLayout 中一些常用属性的含义。
app:layout_scrollFlags
设置子 View 在滚动过程中会发生哪些行为。常见的取值有：
scroll：启用子 View 的滑动事件，子 View 会随着滚动而滚动；enterAlways：子 View 会在滑动时进入即可，不用等到下拉到顶部；enterAlwaysCollapsed：与enterAlways类似，但是子 View 进入时会变得更小；exitUntilCollapsed：子 View 会在滑动到顶部之前一直保持现状，直到滑动到顶部时才开始消失。
layout_collapseMode
设置子 View 在收缩过程中的行为。常见的取值有：
pin：子 View 在收缩时会被钉在顶部；parallax：子 View 在收缩时会发生视差效果。
知道了这些属性之后，我们就可以开始实现自定义的滚动效果了。
效果一：向下滑动时导航栏逐渐变小并悬浮
我们需要先给 AppbarLayout 添加一个 scroll 标志，并且将 Toolbar 和 TabLayout 的 layout_collapseMode 设置为 pin，这样就可以让它们在收缩时被钉在顶部。
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"/>
</android.support.design.widget.AppBarLayout>然后，我们需要监听 CoordinatorLayout 的滑动事件，并在滑动过程中修改 Toolbar 和 TabLayout 的大小和位置。
final AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
params.setBehavior(new AppBarLayout.Behavior() {
@Override
public boolean onLayoutChild(CoordinatorLayout parent, AppBarLayout abl, int layoutDirection) {
boolean handled = super.onLayoutChild(parent, abl, layoutDirection);
float offset = -appBarLayout.getY() / appBarLayout.getTotalScrollRange();
toolbar.setScaleX(Math.max(1 - offset, 0));
toolbar.setScaleY(Math.max(1 - offset, 0));
toolbar.setTranslationY(-toolbar.getHeight() * offset);
tabLayout.setScaleX(Math.max(1 - offset, 0));
tabLayout.setScaleY(Math.max(1 - offset, 0));
tabLayout.setTranslationY(-tabLayout.getHeight() * offset);
return handled;
}
});在这段代码中，我们通过计算 AppBarLayout 相对于其总滚动范围的偏移量来修改 Toolbar 和 TabLayout 的大小和位置。
效果二：向上滑动时导航栏回到原始大小并回到页面顶部
实现向上滑动时导航栏回到原始大小并回到页面顶部的效果很简单，只需要将 Toolbar 和 TabLayout 的 layout_scrollFlags 设置为 enterAlways，然后在监听 CoordinatorLayout 的滑动事件，并在滑动到顶部时将 AppbarLayout 的状态重置即可。
final AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
params.setBehavior(new AppBarLayout.Behavior() {
@Override
public boolean onLayoutChild(CoordinatorLayout parent, AppBarLayout abl, int layoutDirection) {
boolean handled = super.onLayoutChild(parent, abl, layoutDirection);
float offset = -appBarLayout.getY() / appBarLayout.getTotalScrollRange();
toolbar.setScaleX(Math.max(1 - offset, 0));
toolbar.setScaleY(Math.max(1 - offset, 0));
toolbar.setTranslationY(-toolbar.getHeight() * offset);
tabLayout.setScaleX(Math.max(1 - offset, 0));
tabLayout.setScaleY(Math.max(1 - offset, 0));
tabLayout.setTranslationY(-tabLayout.getHeight() * offset);
if (offset == 0) {
appBarLayout.setExpanded(true);
}
return handled;
}
});总结
在 Material Design 设计中，AppbarLayout 和 CoordinatorLayout 是非常强大的滚动容器，可以帮助我们实现各种复杂的滚动效果。本文介绍了如何使用这两个组件来实现自定义的滚动效果，并附上了实例代码。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659366b4eb4cecbf2d8199b8