Material Design 中 CoordinatorLayout 与 AppBarLayout 联动效果-JavaScript中文网-JavaScript教程资源分享门户

在 Material Design 中，CoordinatorLayout 和 AppBarLayout 是两个常用的布局控件。它们的联动效果可以让应用界面变得更加流畅和美观，同时提高用户体验。本文将详细讲解这两个控件的使用以及如何实现它们的联动效果。

CoordinatorLayout

CoordinatorLayout 是一个可以协调子视图（view）之间交互的布局控件，它可以让子视图之间产生联动效果，比如当用户滑动一个子视图时，其他子视图会做出相应的变化。CoordinatorLayout 的用法与 FrameLayout 很相似，但它提供了更加高级的联动效果。

在使用 CoordinatorLayout 时，需要注意以下几点：

CoordinatorLayout 必须是子视图的容器（即包含其他子视图）。
每个子视图都需要通过 app:layout_behavior 属性来指定它们的布局行为（即 CoordinatorLayout.Behavior 类）。
各个子视图之间的联动效果需要通过 Behavior 类的重写实现。

下面是一个简单的 CoordinatorLayout 示例代码：

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:text="子视图1"
        app:layout_behavior="android.support.design.widget.AppBarLayout.ScrollingViewBehavior" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="子视图2"
        app:layout_anchor="@id/view1"
        app:layout_anchorGravity="bottom" />

</android.support.design.widget.CoordinatorLayout>

其中，TextView 是一个可滚动的子视图，它通过 app:layout_behavior 属性指定了 ScrollingViewBehavior 类作为它的布局行为，这样就能让它与其他子视图产生联动效果。而 Button 则是一个不能滚动的子视图，它通过 app:layout_anchor 和 app:layout_anchorGravity 属性指定了一个锚点（即视图 1）和它与视图 1 的关系，这样就能让它跟随视图 1 同时移动。

AppBarLayout

AppBarLayout 是一个与 CoordinatorLayout 配合使用的高级布局控件，它通常用于创建一个应用栏（action bar）或者一个可收起或可展开的工具栏（toolbar）。AppBarLayout 可以与 Toolbar、TabLayout、CollapsingToolbarLayout 等控件结合使用，产生丰富的联动效果。

需要注意的是，AppBarLayout 必须放在 CoordinatorLayout 中，并且必须指定一个 Behavior。

下面是一个简单的 AppBarLayout 示例代码：

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.design.widget.AppBarLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:text="子视图1"
        app:layout_behavior="android.support.design.widget.AppBarLayout.ScrollingViewBehavior" />

</android.support.design.widget.CoordinatorLayout>

其中，AppBarLayout 包含了一个 Toolbar，这是一个经典的对联动效果的实现方式。AppBarLayout 和 Toolbar 之间具有自动的联动效果，当 AppBarLayout 的高度发生变化时，Toolbar 的高度会自动调整。而 TextView 则是一个滚动视图，它也指定了一个 ScrollingViewBehavior 类作为它的布局行为，在滚动过程中可以与其他视图产生联动效果。

联动效果实现

在实现联动效果时，我们需要重写 Behavior 类的若干方法。下面就以 AppBarLayout 和 Toolbar 为例，说明具体的实现过程。

public class ToolbarScrollBehavior extends CoordinatorLayout.Behavior<Toolbar> {

    public ToolbarScrollBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, Toolbar child, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, Toolbar child, View dependency) {
        int offset = -dependency.getTop();
        child.setTranslationY(offset);
        return true;
    }

}

在上面的代码中，我们重写了 layoutDependsOn 和 onDependentViewChanged 两个方法。layoutDependsOn 方法用于确定该 Behavior 是否依赖于某一个子视图，这里我们指定了该 Behavior 依赖于 AppBarLayout。onDependentViewChanged 方法用于在依赖视图发生变化时进行相应的操作，这里我们计算了 AppBarLayout 与 Toolbar 之间的偏移量 offset，并将 Toolbar 移动到相应位置。

最后，我们在布局文件中将 Toolbar 的 app:layout_behavior 属性指定为我们自定义的 Behavior，就能实现 AppBarLayout 和 Toolbar 之间的联动效果了。

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior=".ToolbarScrollBehavior" />

    </android.support.design.widget.AppBarLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:text="子视图1"
        app:layout_behavior="android.support.design.widget.AppBarLayout.ScrollingViewBehavior" />

</android.support.design.widget.CoordinatorLayout>

总结

本文详细介绍了 Material Design 中 CoordinatorLayout 和 AppBarLayout 的基本用法和联动效果实现方法，并通过示例代码给出了具体的实现步骤。使用 CoordinatorLayout 和 AppBarLayout 能够使应用界面更加流畅和美观，同时提高用户体验。对于前端开发者来说，掌握这两个控件的用法和实现原理，是提高 UI 设计能力和编写高质量代码的重要一环。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65920ee3eb4cecbf2d6f763a

Material Design 中 CoordinatorLayout 与 AppBarLayout 联动效果

CoordinatorLayout

AppBarLayout

联动效果实现

总结

纠错反馈