web-dev-qa-db-ja.com

ConstraintLayout vs Coordinator layout？

実装するもの：Androidで適切なマテリアルデザインを作成するにはConstraintLayoutまたはCoordinatorLayoutですか？

androidmaterial-designandroid-constraintlayoutcoordinator-layout
45
Swapnil

CoordinatorLayoutは、 Behaviors を管理するアクティビティのトップレベルレイアウトとなることを目的としています。相互作用とアニメーション。

ConstraintLayoutの主な目標は、複数の子を持つフラットレイアウトを作成する便利な方法を提供することです（より強力なRelativeLayout）。

したがって、CoordinatorLayoutは、アクティビティのコンポーネントの複雑な動作（特にアニメーション）を管理し、コンポーネントの適切な配置（特にリストアイテム）のConstraintLayoutを管理します。

59
Dmitry Sitnikov

CoordinatorLayout

CoordinatorLayoutは超強力なFrameLayoutです。

CoordinatorLayoutは、主に2つのユースケースを対象としています。

  • トップレベルのアプリケーション装飾またはchromeレイアウトとして
  • 1つ以上の子ビューとの特定の相互作用のコンテナーとして

デフォルトでは、FrameLayoutに複数の子を追加すると、それらは互いに重なります。単一の子ビューを保持するには、FrameLayoutを最も頻繁に使用する必要があります。 CoordinatorLayoutの主な魅力は、その中のビューのアニメーションと遷移を調整できることです。 CoordinatorLayoutの子ビューに Behaviors を指定することにより、単一の親内でさまざまな相互作用を提供でき、それらのビューは互いに相互作用することもできます。ビュークラスは、CoordinatorLayout.DefaultBehaviorアノテーションを使用してCoordinatorLayoutの子として使用される場合のデフォルトの動作を指定できます。

ビヘイビアを使用して、スライド式の引き出しやパネルから、スワイプで消すことができる要素や、​​移動およびアニメーションするときに他の要素にくっつくボタンに至るまで、さまざまなインタラクションと追加のレイアウト変更を実装できます。

ConstraintLayout

ConstraintLayoutを使用すると、フラットビュー階層（ネストされたビューグループなし）で大規模で複雑なレイアウトを作成できます。 RelativeLayoutと似ていますが、すべてのビューは兄弟ビューと親レイアウトの間の関係に従ってレイアウトされますが、RelativeLayoutよりも柔軟性があり、使いやすいです。 Android St​​udioのレイアウトエディターを使用します。

現在、使用できるさまざまなタイプの制約があります。

  • 相対位置決め
  • マージン
  • センタリング位置決め
  • 円形位置決め
  • 可視性の動作
  • 寸法拘束
  • チェーン
  • 仮想ヘルパーオブジェクト
  • オプティマイザ

Androidの適切なマテリアルデザインのためにConstraintLayoutまたはCoordinatorLayoutを実装するもの

効率的なUIおよびマテリアルアニメーションを構築するには、ConstraintLayoutとCoordinatorLayoutの両方を使用する必要がある場合があります。

参考のために、CoordinatorLayoutとConstraintLayoutの両方を使用する一般的な例を以下に示します。

  • Coordinatorlayoutをトップレベルのアプリケーション装飾として使用します。通常、AppBarLayout、FloatingActionButton、および画面の本体（NestedScrollViewなど）のレイアウトに使用されます。 NestedScrollView内では、ConstraintLayoutを使用して、レイアウトの残りの部分をフラットな階層として記述します。

    <androidx.coordinatorlayout.widget.CoordinatorLayout
 xmlns:Android="http://schemas.Android.com/apk/res/Android"
 xmlns:app="http://schemas.Android.com/apk/res-auto"
 Android:layout_width="match_parent"
 Android:layout_height="match_parent">

      <androidx.core.widget.NestedScrollView
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

          <!-- Your scrolling content -->
          <androidx.constraintlayout.widget.ConstraintLayout
              ...>

              <!-- body of constraint layout -->

              <Button Android:id="@+id/button" ...
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent/>


          </androidx.constraintlayout.widget.ConstraintLayout>
     </androidx.core.widget.NestedScrollView>

     <com.google.Android.material.appbar.AppBarLayout
         Android:layout_height="wrap_content"
         Android:layout_width="match_parent">
      <androidx.appcompat.widget.Toolbar
             ...
             app:layout_scrollFlags="scroll|enterAlways"/>
      <com.google.Android.material.tabs.TabLayout
             ...
             app:layout_scrollFlags="scroll|enterAlways"/>
      </com.google.Android.material.appbar.AppBarLayout>
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

ボーナスポイント

アニメーションを構築するためのConstraintLayoutのサブクラスである強力な MotionLayout を使用できます。 詳細な例についてはこれを確認できます MotionLayoutを使用したカスタムアニメーションの場合。

36
Darish

（ほとんど）常にCoordinatorLayoutを使用しているように見えますが、内部でConstraintLayoutを使用している場合もあります。次のリソースを参照してください

  • https://codelabs.developers.google.com/codelabs/material-design-style/index.html# のコードラボでは、CoordinatorLayoutのみを使用しています

  • サンプルAndroid-sunflowerアプリ（「Android開発のベストプラクティスを示す」）は、トップレベルアクティビティには使用せず、 fragment_plant_detail.xml 内で両方を使用し、ConstraintLayoutCoordinatorLayout内にある：

    <layout ...>
<data .../>
<Android.support.design.widget.CoordinatorLayout ...>
    <Android.support.design.widget.AppBarLayout ...>
        <Android.support.design.widget.CollapsingToolbarLayout ...>
            <ImageView... />
            <Android.support.v7.widget.Toolbar... />
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>
    <Android.support.v4.widget.NestedScrollView ...>
        <Android.support.constraint.ConstraintLayout ...>
            <TextView.../>
            <TextView... />
        </Android.support.constraint.ConstraintLayout>
    </Android.support.v4.widget.NestedScrollView>
    <Android.support.design.widget.FloatingActionButton ... />
</Android.support.design.widget.CoordinatorLayout>
</layout>
12
serv-inc