アンドロイドのCoordinatorLayout

1年 ago
桜, 春樹
6 minutes

これまでに、私たちはたくさんのチュートリアルでAndroidのCoordinatorLayoutを使用してきました。しかし、その詳細には触れていませんでした。このチュートリアルでは、AndroidアプリでのCoordinatorLayoutの概要とカスタマイズについて説明します。

AndroidのCoordinatorLayoutを日本語で言い換えると、以下のようになります：アンドロイドでのコーディネーターレイアウト。

android coordinatorlayout default behaviour

コーディネーターレイアウトの動作

CoordinatorLayout内のFABには、他のビューがこれと対話する際に適切にアニメーションするためのデフォルトのBehaviorが指定されています。レイアウト/アクティビティ内のFloatingActionButtonでCtrl/CMD+クリックを行うと、クラスに注釈が定義されたBehaviorが表示されます。以下のように見えるはずです。

@CoordinatorLayout.DefaultBehavior(FloatingActionButton.Behavior.class)

FloatingActionButton.BehaviorはFABで使用されるデフォルトのBehaviorクラスです。私達はCoordinatorLayout.Behaviorクラスを拡張して、独自のBehaviorsを定義することができます。ここで、Tは私たちが定義したいBehaviorのクラスです。上記の場合、それはCoordinatorLayout.Behaviorです。

  • The Behaviors only work on the direct child of the CoordinatorLayout.
  • It’s necessary for the CoordinatorLayout to be the root layout of the activity

では、画面の下部に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.scdev.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();
            }
        });

このアプリケーションの見た目はこれです。何か予想はありますか？カスタム動作を定義するためには、重要な2つの要素を把握する必要があります。

  • child : It’s the view on which the behavior would be performed.
  • dependency : It’s the view which will trigger the behavior on the child

上記の場合、AppCompatButtonは子であり、SnackBarは依存関係です。注意：FloatingActionButtonのデフォルトの動作において、依存関係はSnackBarだけではありません。FloatingActionButtonに対して動作をトリガーする他のView要素もあります。まず、AppCompatButtonを上に移動するカスタムBehaviorクラスを作成しましょう。CustomMoveUpBehavior.javaという名前にしましょう。

public class CustomMoveUpBehavior extends CoordinatorLayout.Behavior {

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

}

上記のクラスでオーバーライドする必要のある2つのメソッドはlayoutDependsOnとonDependentViewChangedです。私たちのクラスにそれらをオーバーライドしましょう。

package com.scdev.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を添付するために、以下に示すようにカスタムAppCompatButtonを作成し、注釈を追加します。

package com.scdev.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.scdev.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内の各ボタンのonClickリスナーを置き換えてください。

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（親、子）は、FABが変化を開始するためにSnackBarが画面のどれだけ上に表示されるべきかを計算します。関連する変更を行う前に、プロジェクトの構造を見てみましょう。

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.scdev.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.scdev.coordinatorlayoutbehaviours.CustomRotateBehavior"
        android:src="@android:drawable/arrow_down_float" />

    <!--<com.scdev.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.scdev.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 CoordinatorLayoutの例は終了です。最初はFABウィジェットのデフォルトの動作をブラウズし、最終的には独自の回転動作でオーバーライドしました。ボタンの動作も見逃せません。長い道のりでした。以下のリンクからAndroid CoordinatorLayoutBehavioursプロジェクトをダウンロードできます。

Android CoordinatorLayoutのサンプルプロジェクトをダウンロードする。

参照：公式ドキュメント

コメントを残す 0

Your email address will not be published. Required fields are marked *