web-dev-qa-db-ja.com

CoordinatorLayoutとは何ですか？

新しいAndroidサポートデザインライブラリのデモアプリをご覧ください。 github でChris Banesによって提供されます。アプリでは、CoordinatorLayoutが頻繁に使用されます。また、FloatingActionButton、SnackBar、AppBarLayoutなどのサポートデザインライブラリクラスの多くは、CoordinatorLayout内で使用した場合の動作が異なります。

誰かがCoordinatorLayoutとは何か、それがAndroidの他のViewGroupsとどのように違うのか、または少なくともCoordinatorLayoutを学習するための正しい道筋を教えてください。

androidandroid-support-libraryandroid-coordinatorlayoutandroid-design-library
86
jimmy0251

ここであなたが探しています。

ドキュメントから

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

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

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

お役に立てれば ：）

34
Qadir Hussain

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

CoordinatorLayoutが何をするのかを最もよく理解するには、まず、Coordinateの意味を理解する必要があります。

あなたがGoogleの言葉なら

座標

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

enter image description here

これらの定義は、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̶on̶on̶a

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

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

CoordinatorLayout内のビューは、これらの Behaviors を指定して効果的に連携するために、他のユーザーとネゴシエートします

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を非表示にすることができます。

開く：

enter image description here

閉鎖：

enter image description here

30
ojonugwa ochalifu

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

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

そして、それはこのためだと思います。

CoordinatorLayoutは超強力なFrameLayoutです。

FAB Button、SnackBarはFrameLayoutの概念で動作します。CoordinatorLayout自体にFrameLayoutの機能があるため、他のビューの動作が異なる場合があります。

12
capt.swag

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

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

7
Uzair

Android Documentation の便利な機能の簡単なスナップショットを提供するには：

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

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

他の最もよく使用される状況は、FloatingActionButtonをCollapsingToolbarの下部に貼り付けて移動させ、coordinatorLayoutの下に配置し、glue（！）とapp:layout_anchor="@id/YourAppBarId"にapp:layout_anchorGravity="bottom|end"を使用することで十分です。魔法の作品をご覧ください！

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

これらは最も有用な部分の簡単な要約であるため、アプリのアニメーション化により多くの時間を節約したい場合は、主題を少し深く掘り下げる価値があります。

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

5
AmiNadimi

注意すべき重要な点の1つは、CoordinatorLayoutにはFloatingActionButtonまたはAppBarLayoutの作業に関する生来の理解がないことです。これは、Coordinator.Behaviorの形式で追加のAPIを提供するだけです。相互間の依存関係を宣言し、onDependentViewChanged（）を介してコールバックを受け取ります。

ビューは、CoordinatorLayout.DefaultBehavior（YourView.Behavior.class）注釈を使用してデフォルトの動作を宣言するか、app：layout_behavior = "com.example.app.YourView $ Behavior"属性を使用してレイアウトファイルに設定できます。このフレームワークにより、どのビューでもCoordinatorLayoutと統合できます。

今すぐ利用可能！設計ライブラリが利用可能になりましたので、SDKマネージャーでAndroidサポートリポジトリを更新してください。その後、1つの新しい依存関係でデザインライブラリの使用を開始できます。

'com.Android.support:design:22.2.0'をコンパイルします。DesignライブラリはSupport v4およびAppCompat Support Librariesに依存するため、Designライブラリの依存関係を追加すると自動的に含まれます。また、これらの新しいウィジェットがAndroid St​​udio Layout Editorのデザインビュー（CustomViewの下にあります）で使用できるように注意し、これらの新しいコンポーネントのいくつかを簡単にプレビューできるようにしました。

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

0
Qaim Raza