安卓CoordinatorLayout完全指南：实现Material Design高级界面效果

2 年 ago

科, 雅

6 minutes

这是文章《安卓协调布局》的第1部分（共3部分）。

到目前为止，我们在许多教程中都使用了Android的CoordinatorLayout。然而我们还没有深入探讨它的细节。在本教程中，我们将讨论和自定义Android应用中的CoordinatorLayout。

安卓的协调布局

android coordinatorlayout default behaviour

协调器布局行为

在CoordinatorLayout中，FAB（FloatingActionButton）已经指定了一个默认的行为，当其他视图与之交互时，它会相应地进行动画。在布局/活动中通过Ctrl / CMD +单击FloatingActionButton，你会看到一个行为已经在类中定义，并有一个注解。它应该是这样的：

@CoordinatorLayout.DefaultBehavior(FloatingActionButton.Behavior.class)

FloatingActionButton.Behavior是FAB上默认使用的行为类。我们可以通过扩展CoordinatorLayout.Behavior类来定义自己的行为。其中T是我们希望定义行为的类。在上述情况中，它是CoordinatorLayout.Behavior类。

行为（Behaviors）只在CoordinatorLayout的直接子视图上生效。
CoordinatorLayout必须作为活动的根布局

现在让我们在屏幕底部添加一个按钮小部件。activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.Olivia.coordinatorlayoutbehaviours.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

    <!--<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />-->

    <android.support.v7.widget.AppCompatButton
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:text="CLICK ME"
        android:id="@+id/button"
        android:layout_margin="@dimen/fab_margin"
        android:layout_width="match_parent"/>

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

我们已经从上面的布局中注释掉了FAB。现在将MainActivity.java中的FloatingActionButton监听器替换为AppCompatButton，如下所示。

AppCompatButton fab = (AppCompatButton) findViewById(R.id.button);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Hey Button. Define a Custom Behaviour. Else I'll take your space", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

这就是应用程序的样子。有什么猜测吗？为了定义自定义的行为，我们需要了解两个重要的元素。

child（子视图）：行为将执行的视图。
dependency（依赖视图）：将触发子视图上行为的视图

在上面的案例中，AppCompatButton是子元素，SnackBar是依赖关系。注意：对于FloatingActionButton的默认行为，依赖关系不仅仅是SnackBar。还有其他的视图元素也可以触发FloatingActionButton的行为。让我们首先创建一个自定义的Behavior类来移动AppCompatButton。让我们将其命名为CustomMoveUpBehavior.java。

public class CustomMoveUpBehavior extends CoordinatorLayout.Behavior {

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

}

在上述类中，需要重写的两个必要方法是layoutDependsOn和onDependentViewChanged。让我们在我们的类中添加对它们的重写。

package com.Olivia.coordinatorlayoutbehaviours;

import android.os.Build;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.view.View;

public class CustomMoveUpBehavior extends CoordinatorLayout.Behavior {

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof Snackbar.SnackbarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }

}

layoutDependsOn函数检查将触发行为的依赖项是否是SnackBar的实例。onDependentViewChanged函数根据基本的数学计算来移动子视图(AppCompatbutton)向上移动。

将行为附加到安卓的CoordinatorLayout

这是文章《安卓协调布局》的第2部分（共3部分）。

为了附加CustomMoveUpBehavior.java，我们将创建一个自定义的AppCompatButton，并按照以下示例添加注释。

package com.Olivia.coordinatorlayoutbehaviours;

import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.v7.widget.AppCompatButton;
import android.util.AttributeSet;

@CoordinatorLayout.DefaultBehavior(CustomMoveUpBehavior.class)
public class CustomButton extends AppCompatButton {
    public CustomButton(Context context) {
        super(context);
    }

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

    public CustomButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

在activity_main.xml和MainActivity.java中做以下更改，将AppCompatButton的xml标签替换为以下标签。

<com.Olivia.coordinatorlayoutbehaviours.CustomButton
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:text="CLICK ME"
        android:id="@+id/button"
        android:layout_margin="@dimen/fab_margin"
        android:layout_width="match_parent"/>

在MainActivity.java中替换对应的按钮点击监听器。

CustomButton fab = (CustomButton) findViewById(R.id.button);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Hey Button. Define a Custom Behaviour. Else I'll take your space", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

这个应用程序现在运行时应该是这样的：酷吧？现在让我们尝试为FAB（浮动操作按钮）实现一种自定义行为。当显示SnackBar（消息提示条）时，我们将触发它旋转并向上移动。我们已经实现了一个名为CustomRotateBehavior.java的自定义行为类。下面是它的代码。

public class CustomRotateBehavior extends CoordinatorLayout.Behavior {

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

@Override
    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
        return dependency instanceof Snackbar.SnackbarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
        float translationY = getFabTranslationYForSnackbar(parent, child);
        float percentComplete = -translationY / dependency.getHeight();
        child.setRotation(180 * percentComplete);
        child.setTranslationY(translationY);
        return false;
    }

    private float getFabTranslationYForSnackbar(CoordinatorLayout parent,
                                                FloatingActionButton fab) {
        float minOffset = 0;
        final List dependencies = parent.getDependencies(fab);
        for (int i = 0, z = dependencies.size(); i < z; i++) {
            final View view = dependencies.get(i);
            if (view instanceof Snackbar.SnackbarLayout && parent.doViewsOverlap(fab, view)) {
                minOffset = Math.min(minOffset,
                        ViewCompat.getTranslationY(view) - view.getHeight());
            }
        }

        return minOffset;
    }

}

getFabTranslationYForSnackbar(parent, child) 方法计算 FAB（浮动操作按钮）开始变化时 SnackBar（消息提示条）应该向上移动多远。在进行相关更改之前，让我们浏览一下项目结构。

Android CoordinatorLayout 示例项目结构

Android CoordinatorLayout 示例代码

这是文章《安卓协调布局》的第3部分（共3部分）。

现在，我们不再需要扩展FloatingActionButton，而是只需在FloatingActionButton视图中定义app:layout_behavior属性，并将其指向我们的自定义子类。下面是我们当前的activity_main.xml文件内容：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.Olivia.coordinatorlayoutbehaviours.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:layout_behavior="com.Olivia.coordinatorlayoutbehaviours.CustomRotateBehavior"
        android:src="@android:drawable/arrow_down_float" />

    <!--<com.Olivia.coordinatorlayoutbehaviours.CustomButton
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:text="CLICK ME"
        android:id="@+id/button"
        android:layout_margin="@dimen/fab_margin"
        android:layout_width="match_parent"/>-->

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

当前的MainActivity.java文件内容如下：

package com.Olivia.coordinatorlayoutbehaviours;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatButton;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        /*CustomButton fab = (CustomButton) findViewById(R.id.button);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "You've added the CustomMoveUpBehavior. Now I'll let you move", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });*/

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "嘿，浮动操作按钮。当我向上滑动时请旋转180度。", Snackbar.LENGTH_LONG)
                        .setAction("操作", null).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 加载菜单；如果存在操作栏，则将项目添加到操作栏
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // 在此处处理操作栏项目点击
        // 操作栏将自动处理Home/Up按钮的点击
        // 只要在AndroidManifest.xml中指定了父活动
        int id = item.getItemId();

        // 可简化If语句
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

让我们最后一次运行我们的应用程序，观察新的行为效果。至此，Android CoordinatorLayout的示例就介绍完了。我们从了解FAB（浮动操作按钮）小部件的默认行为开始，最终用我们自定义的旋转行为覆盖了它。别忘了，按钮上也可以应用行为。这是一个完整的学习过程。您可以通过下面的链接下载Android CoordinatorLayoutBehaviours项目。

下载Android CoordinatorLayout示例项目

参考资料：官方文档

#CoordinatorLayout #Material Design #安卓开发 #安卓界面 #布局优化