当前位置：theitroad>Android CoordinatorLayout

Android CoordinatorLayout

时间：2020-02-23 14:28:50 　来源:igfitidea点击:

在本教程中，我们将讨论和自定义android应用中的CoordinatorLayout。

Android CoordinatorLayout

Android CoordinatorLayout是功能强大的FrameLayout。
它提供的功能比看起来要多得多。
它具有对其子视图的附加控制级别。
它相互协调子视图的动画和过渡。

让我们创建一个新的Android Studio项目，然后选择默认情况下具有" CoordinatorLayout"的基本活动模板。
该布局包含一个浮动动作按钮。
单击它会显示一个SnackBar，如下所示。

您是否注意到浮动动作按钮动画化了，以便为SnackBar腾出空间，并在SnackBar消失时又回来了？

这不是魔术。
这就是浮动动作按钮在CoordinatorLayout中的行为方式。

注意：CoordinatorLayout还可以展开工具列以显示更多内容或者在滚动时折叠它，这在滚动WhatsApp用户的个人资料屏幕时很常见。
不用担心，我们将在以后的教程中对此进行研究。

现在将在我们脑海中浮现一个问题– CoordinatorLayout如何知道如何处理子视图？答案在于下一部分。

CoordinatorLayout行为

已为CoordinatorLayout中的FAB指定了默认的Behavior，当另一个视图与其交互时，该行为会使其相应地进行动画处理。

进行Ctrl/CMD +单击布局/活动中的FloatingActionButton，您将看到已在类上定义了带注释的行为。
它看起来应该像这样：

@CoordinatorLayout.DefaultBehavior(FloatingActionButton.Behavior.class)

FloatingActionButton.Behavior是FAB上使用的默认行为类。
我们可以通过扩展类CoordinatorLayout.Behavior来定义自己的行为。

T是我们要定义其行为的类。
在上述情况下，它是CoordinatorLayout.Behavior。

  • 行为仅适用于CoordinatorLayout的直接子级。

  • CoordinatorLayout必须是活动的根目录布局

现在，让我们在屏幕底部添加一个Button小部件。
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.theitroad.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中的AppCompatButton替换FloatingActionButton侦听器，如下所示。

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：将在其上执行行为的视图。

  • 依赖关系：将触发子行为的视图

在上述情况下，AppCompatButton是子项，而SnackBar是依赖项。

注意：对于FloatingActionButton的默认行为，依赖性不仅是SnackBar。
还有其他View元素也会触发FloatingActionButton上的行为。

首先，创建自己的自定义"行为"类，该类将在AppCompatButton上移。
我们将其命名为CustomMoveUpBehavior.java。

public class CustomMoveUpBehavior extends CoordinatorLayout.Behavior {

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

}

在上面的类中应重写的两个必要方法是layoutDependsOn和onDependentViewChanged。
让我们在程序中添加覆盖它们。

package com.theitroad.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)上移。

将行为附加到android CoordinatorLayout

要附加CustomMoveUpBehavior.java，我们将创建一个Custom AppCompatButton并添加注释，如下所示。

package com.theitroad.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.theitroad.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中的相应按钮onClickListener。

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)计算出SnackBar应该出现在屏幕多远处，以便FAB开始更改。
在进行相关更改之前，让我们浏览我们的项目结构。

Android CoordinatorLayout示例项目结构

Android CoordinatorLayout示例代码

现在，无需扩展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.theitroad.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.theitroad.coordinatorlayoutbehaviours.CustomRotateBehavior"
      android:src="@android:drawable/arrow_down_float" 

  <!--<com.theitroad.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.theitroad.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, "Hey FAB. Please Rotate 180 degrees when I'm up.", Snackbar.LENGTH_LONG)
                      .setAction("Action", null).show();
          }
      });
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
      //Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.menu_main, menu);
      return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
      //Handle action bar item clicks here. The action bar will
      //automatically handle clicks on the Home/Up button, so long
      //as you specify a parent activity in AndroidManifest.xml.
      int id = item.getItemId();

      //noinspection SimplifiableIfStatement
      if (id == R.id.action_settings) {
          return true;
      }

      return super.onOptionsItemSelected(item);
  }
}

相关推荐

Android ARCore –与相机的距离

Android ARCore –与相机的距离

Android AsyncTask示例教程

Android AsyncTask示例教程

使用Kotlin的Android AsyncTask

使用Kotlin的Android AsyncTask

Android AsyncTasks并行执行

Android AsyncTasks并行执行