CoordinatorLayoutとは何ですか?


96

新しいAndroidサポートデザインライブラリのデモアプリを見たところです。githubの Chris Banesが提供しています。アプリ全体で、頻繁にCoordinatorLayout使用されます。また、のようなサポート設計ライブラリクラスの多くのFloatingActionButtonSnackBarAppBarLayoutときに使用される内部などが異なる挙動をCoordinatorLayout

誰かが何かにいくつかのライトを当てるしてくださいすることができCoordinatorLayout、それが他と異なっているとどのようにViewGroupアンドロイドでの、または少なくとも学習に向けて正しいパスを提供しますCoordinatorLayout


5
android-developers.blogspot.com/2015/05/...また、直接リンク可能な形でのJavaDocの記述(現在利用可能ではないが混乱にもかかわらず、広範囲を持っていますが、からZIPをダウンロードすることができますdeveloper.android.com/preview /download.html)。
CommonsWare、2015年

1
実際に使用する利点は何CordinatorLayoutですか?他の人よりも優れていますか?
eRaisedToX 2017

回答:


43

これがあなたが探しているものです。

ドキュメントから

デザインライブラリCoordinatorLayoutでは、子ビュー間のタッチイベントに対する追加レベルの制御を提供するレイアウトを導入しています。これは、デザインライブラリの多くのコンポーネントが利用するものです。

https://android-developers.googleblog.com/2015/05/android-design-support-library.html

このリンクには、上記のすべてのビューのデモビデオが表示されます。

お役に立てれば :)


4
リンクが壊れています。
Yogesh Seralia 2018

40

CoordinatorLayoutとは何ですか?派手な名前に騙されないでください、それはステロイドのFrameLayoutにすぎません

a CoordinatorLayoutが何であるか/ 何をするかを最もよく理解するには、まず、それがCoordinateにとって何を意味するのかを理解/念頭に置く必要があります。

あなたがGoogleの言葉なら

座標

これはあなたが得るものです:

ここに画像の説明を入力してください

これらの定義は、CoordinatorLayoutがそれ自体で行うこと、およびCoordinatorLayout内のビューの動作を説明するのに役立つと思います。

CoordinatorLayout(ViewGroup)は、(̶a̶̶c̶o̶m̶p̶l̶e̶x̶̶a̶c̶t̶i̶v̶i̶t̶y̶̶o̶r̶̶a̶n̶̶o̶r̶g̶a̶n̶i̶z̶a̶t̶i̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶n̶o̶̶̶̶s

CoordinatorLayoutの助けを借りて、子ビューは調和して動作し、次のような素晴らしい動作を実装します

ドラッグ、スワイプ、フリング、またはその他のジェスチャー。

CoordinatorLayout内のビューは、これらの動作を指定して効果的に連携するために他のユーザーと交渉します

CoordinatorLayoutは、魅力的で調和のとれたレイアウトの作成に役立つマテリアルデザインの非常に優れた機能です。

子ビューをCoordinatorLayout内にラップするだけです。

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

 <android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        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"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_email" />

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

およびcontent_scrolling:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView     
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity"
 tools:showIn="@layout/activity_scolling">

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/text_margin"
    android:text="@string/large_text" />

 </android.support.v4.widget.NestedScrollView>

これにより、スクロールしてツールバーを折りたたみ、FloatingActionButtonを非表示にすることができるレイアウトが得られます。

開いた:

ここに画像の説明を入力してください

閉まっている:

ここに画像の説明を入力してください


2
相対レイアウトまたは制約レイアウトもビュー間に関係はありませんか?1つ上に移動すると、関連するビューが上に移動します。なぜコーディネーターが優れているのですか?
ヘビ

1
@Snake 1. CoordinatorLayoutは、ConstraintLayoutもRelativeLayoutも実行できない、別のビューの上にビューを配置するのに役立ちます。2.また、ビューの遷移をアニメーション化するのにも役立ちます。良い例は、Whatsappアプリの「連絡先の表示」アクティビティ/フラグメントの遷移です。
Felixの好意Chinemerem

13

注意すべき追加のポイント。OPが具体的に尋ねたので

また、FloatingActionButton、SnackBar、AppBarLayoutなどのサポートデザインライブラリクラスの多くは、CoordinatorLayout内で使用すると動作が異なります。

そして、これが原因だと思います。

CoordinatorLayoutは、超強力なFrameLayoutです。

FABボタン、SnackBarはFrameLayoutの概念に基づいて機能します。CoordinatorLayout自体にFrameLayoutの機能があるため、他のビューの動作が異なる場合があります!。


9

CoordinatorLayoutは、本質的にはその名前から明らかな多くの機能を備えたフレームレイアウトであり、その子の間の調整を自動化し、美しいビューを構築するのに役立ちます。その実装は、Google Playストアアプリで確認できます。ツールバーがどのように折りたたまれたり、色が変わったりするのか。

CoordinatorLayoutの最も優れた点は、直接または間接の子孫に与える動作です。スクロール中にすべてのUIが動き出すのを見たはずです。その可能性はその行動が魔法を働いている可能性が高いです。


7

Androidのドキュメントで何が便利かを簡単に説明するには、次のようにします

CoordinatorLayoutを使用して、ビューの関係動作を単純に制御します。

たとえば、ToolBarを折りたたんだり非表示にしたい場合などです。Googleは、AppBarLayoutとCollapsingToolbarLayoutを導入することで本当に簡単にしました。どちらもCoordinatorLayoutの下で最適に機能します。

もう1つの最もよく使われる状況は、FloatingActionButtonをCollapsingToolbarの下部に貼り付けて移動し、それらをcoordinatorLayoutの下に配置しapp:layout_anchor="@id/YourAppBarId"て、接着剤(!)に使用し、app:layout_anchorGravity="bottom|end"位置を確認するのに十分な場合です。魔法の仕事!

このレイアウトをコンテキストとして使用することにより、子ビューはCoordinatorLayoutコンテキストを介して互いに認識し合うため、より優れたコラボレーションとインテリジェントな動作を実現します。これは、FloatingActionボタンがスナックバーなどと重複しないことを意味します。

これらは、最も役立つ部分の簡単な要約にすぎません。そのため、アプリのアニメーション化により多くの時間を節約したい場合は、主題について少し詳しく説明することをお勧めします。

Googleスクロールビューアクティビティテンプレートを参照してください


1

注意すべき重要な点の1つは、CoordinatorLayoutはFloatingActionButtonまたはAppBarLayoutの動作を本質的に理解していないことです。これは、Coordinator.Behaviorの形式で追加のAPIを提供するだけで、子ビューがタッチイベントとジェスチャーをより適切に制御できるようにします。相互の依存関係を宣言し、onDependentViewChanged()を介してコールバックを受信します。

ビューは、CoordinatorLayout.DefaultBehavior(YourView.Behavior.class)アノテーションを使用してデフォルトの動作を宣言するか、app:layout_behavior = "com.example.app.YourView $ Behavior"属性を使用してレイアウトファイルに設定できます。このフレームワークにより、任意のビューをCoordinatorLayoutと統合できます。

今すぐご利用いただけます!デザインライブラリは現在利用可能です。SDKManagerでAndroidサポートリポジトリを更新してください。その後、単一の新しい依存関係を持つデザインライブラリの使用を開始できます。

コンパイル 'com.android.support:design:22.2.0'デザインライブラリはサポートv4およびAppCompatサポートライブラリに依存しているため、デザインライブラリの依存関係を追加すると、それらが自動的に含まれます。また、これらの新しいウィジェットがAndroid Studio Layout Editorのデザインビュー(CustomViewの下で検索)で使用できるようになり、これらの新しいコンポーネントの一部を簡単にプレビューできるようになりました。

デザインライブラリ、AppCompat、およびすべてのAndroidサポートライブラリは、ゼロからすべてを構築することなく、モダンで見栄えの良いAndroidアプリを構築するために必要なビルディングブロックを提供する上で重要なツールです。


0

CoordinatorLayoutスーパーパワーですFrameLayout

デフォルトでは、複数の子をに追加するとFrameLayout、それらは互いにオーバーラップします。A FrameLayoutは、単一の子ビューを保持するために最も頻繁に使用されます。の主な魅力は、アニメーションとその中のビューの遷移CoordinatorLayoutを調整できることです。XMLのみを使用して、たとえば、FABが着信スナックバーの邪魔にならない場所にレイアウトを記述したり、FAB(または実際には他のビュー)が別のウィジェットに接続されているように見えたり、ウィジェット。

これがメインのソースチュートリアルです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.