web-dev-qa-db-ja.com

ConstraintLayoutとRelativeLayoutの違い

私はConstraintLayoutRelativeLayoutの違いについて混乱しています。誰かがそれらの正確な違いを教えてもらえますか?

182
b2mob

ConstraintLayoutの意図は、ネストを避けるために各ビューにいくつかの規則を適用することによってあなたのレイアウトのビュー階層を最適化し平坦化することです。

他のビューの左に左を設定するなど、ルールはRelativeLayoutを思い出させます。

app:layout_constraintBottom_toBottomOf="@+id/view1"

RelativeLayoutとは異なり、ConstraintLayoutはハンドルに対して0%と100%の水平方向と垂直方向のオフセットでビューを配置するために使用されるbias値を提供します(丸印)これらのパーセンテージ(および分数)は、さまざまな画面密度およびサイズにわたってビューをシームレスに配置します。

app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->

ベースラインハンドル (丸いハンドルの下の角が丸い長いパイプ)は、ビューの内容を別のビュー参照と揃えるために使用されます。

四角形のハンドル (ビューの各隅にある)は、ビューをdpsでサイズ変更するために使用されます。

enter image description here

これは全く意見に基づいたもので、私のConstraintLayoutの印象

119

@davidpbr ConstraintLayout performanceで報告されています

私は2つの似た7つの子レイアウトを作りました。それぞれ1つは親のConstraintLayoutRelativeLayoutです。 Android Studioのメソッド追跡ツールに基づいて、ConstraintLayoutはonMeasureでより多くの時間を費やし、onFinishInflateで追加の作業を実行しているようです。

使用されているライブラリ(support-v4appcompat-v7…):

com.Android.support.constraint:constraint-layout:1.0.0-alpha1

デバイス/ Androidのバージョンが再現:サムスンギャラクシーS6(SM - G920A。申し訳ありません、いいえNexus atm)。アンドロイド5.0.2

クイックメソッドトレースの比較

1

Githubリポジトリのサンプル: https://github.com/OnlyInAmerica/ConstraintLayoutPerf

38
Dhaval Jivani

Relative LayoutおよびConstraint Layoutの同等のプロパティ

Relative Layout and Constraint Layout equivalent properties

(1)相対レイアウト:

Android:layout_centerInParent="true"    

(1)拘束レイアウトは等価:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"

(2)相対レイアウト:

Android:layout_centerHorizontal="true"

(2)拘束レイアウトは等価:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"

(3)相対レイアウト:

Android:layout_centerVertical="true"    

(3)拘束レイアウトは等価:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

(4)相対レイアウト:

Android:layout_alignParentLeft="true"   

(4)制約レイアウト相当:

app:layout_constraintLeft_toLeftOf="parent"

(5)相対レイアウト:

Android:layout_alignParentStart="true"

(5)制約レイアウト相当:

app:layout_constraintStart_toStartOf="parent"

(6)相対レイアウト:

Android:layout_alignParentRight="true"

(6)制約レイアウト相当:

app:layout_constraintRight_toRightOf="parent"

(7)相対レイアウト:

Android:layout_alignParentEnd="true"    

(7)制約レイアウト相当:

app:layout_constraintEnd_toEndOf="parent"

(8)相対レイアウト:

Android:layout_alignParentTop="true"

(8)制約レイアウト相当:

app:layout_constraintTop_toTopOf="parent"

(9)相対レイアウト:

Android:layout_alignParentBottom="true" 

(9)制約レイアウト相当:

app:layout_constraintBottom_toBottomOf="parent"

(10)相対レイアウト:

Android:layout_alignStart="@id/view"

(10)拘束レイアウトは等価:

app:layout_constraintStart_toStartOf="@id/view"

(11)相対レイアウト:

Android:layout_alignLeft="@id/view" 

(11)拘束レイアウトは等価:

app:layout_constraintLeft_toLeftOf="@id/view"

(12)相対レイアウト:

Android:layout_alignEnd="@id/view"  

(12)拘束レイアウトは等価:

app:layout_constraintEnd_toEndOf="@id/view"

(13)相対レイアウト:

Android:layout_alignRight="@id/view"

(13)拘束レイアウトは等価:

app:layout_constraintRight_toRightOf="@id/view"

(14)相対レイアウト:

Android:layout_alignTop="@id/view"  

(14)拘束レイアウトは等価:

app:layout_constraintTop_toTopOf="@id/view"

(15)相対レイアウト:

Android:layout_alignBaseline="@id/view" 

(15)拘束レイアウトは等価:

app:layout_constraintBaseline_toBaselineOf="@id/view"

(16)相対レイアウト:

Android:layout_alignBottom="@id/view"

(16)制約レイアウト相当:

app:layout_constraintBottom_toBottomOf="@id/view"

(17)相対レイアウト:

Android:layout_toStartOf="@id/view"

(17)拘束レイアウトは等価:

app:layout_constraintEnd_toStartOf="@id/view"

(18)相対レイアウト:

Android:layout_toLeftOf="@id/view"  

(18)制約レイアウト相当:

app:layout_constraintRight_toLeftOf="@id/view"

(19)相対レイアウト:

Android:layout_toEndOf="@id/view"

(19)拘束レイアウトは等価:

app:layout_constraintStart_toEndOf="@id/view"

(20)相対レイアウト:

Android:layout_toRightOf="@id/view"

(20)拘束レイアウトは等価:

app:layout_constraintLeft_toRightOf="@id/view"

(21)相対レイアウト:

Android:layout_above="@id/view" 

(21)拘束レイアウトは等価:

app:layout_constraintBottom_toTopOf="@id/view"

(22)相対レイアウト:

Android:layout_below="@id/view" 

(22)拘束レイアウトは等価:

app:layout_constraintTop_toBottomOf="@id/view"

33
Naimatullah

違い/利点は次のとおりです。

  1. 拘束レイアウトは、相対レイアウトと線形レイアウトの両方の機能を兼ね備えています。(相対レイアウトのように)ビューの相対位置を設定し、動的UIの重みを設定します(これは線形レイアウトでのみ可能でした)。

  2. 非常に強力な用途は、チェーンを形成することによって要素をグループ化することです。このようにして、ビューのグループを形成するためだけに、別の階層のレイヤーを追加することなく、全体として望ましい方法で配置できるビューのグループを形成できます。

  3. ウェイトに加えて、水平方向と垂直方向のバイアスを適用することができます。これは、中心からの変位の割合に他なりません。 (0.5の偏りは中央に揃えられることを意味します。それ以下またはそれ以上の値はそれぞれの方向への対応する移動を意味します)。

  4. もう1つの非常に重要な機能は、それがGONEビューを処理する機能を尊重し、提供することで、Javaコードを介して一部のビューがGONEに設定されている場合にレイアウトが壊れないようにします。もっとここで見つけることができます: https://developer.Android.com/reference/Android/support/constraint/ConstraintLayout.html#VisibilityBehavior

  5. ブループリントとビジュアルエディタツールを使用して自動制約を適用することで、ページを簡単にデザインできます。

これらすべての機能により、ビュー階層が平坦化され、パフォーマンスが向上し、さまざまな画面サイズや密度に簡単に対応できるレスポンシブで動的なUIの作成にも役立ちます。

ここですぐに学ぶための最良の場所です: https://codelabs.developers.google.com/codelabs/constraint-layout/#0

22
Vishu Gupta

大きな違いは、ビューがなくなってもConstraintLayoutが制約を尊重することです。そのため、チェーンがあり、途中でビューを消したい場合は、レイアウトが崩れることはありません。

12
Herrbert74

Android View Drawingプロセスは3つのフェーズで構成されています。 ViewGroupを拡張すると、対応するメソッドを見つけることができます。

  1. 測定する
  2. レイアウト
  3. ドロー

Systrace tool を使うと、measure/layoutを計算できます。

RelativeLayoutを使用するレイアウトバリアントのSystrace:

enter image description here

ConstraintLayoutを使用するレイアウトバリアントのSystrace:

enter image description here

パフォーマンスの違い( OnFrameMetricsAvailableListener を使用すると、アプリのUIレンダリングに関するフレームごとのタイミング情報を収集できます)

ConstraintLayoutは、measure/layoutフェーズにおいてRelativeLayoutよりも約40%パフォーマンスが良くなります。

enter image description here

そして最後になりましたがConstraintLayoutは責任あるUIを構築するための現代的な方法です、それは絶えず開発しています、そして各リリースは生活をより楽にするクールな機能をもたらします。最新は Constraint Layout 1.1 です

もっと読んでください ここここここ

11
yoAlex5

本当の質問は、制約レイアウト以外のレイアウトを使用する理由はありますか?答えはノーかもしれません。

初心者のプログラマーなどを狙っていると主張する人には、他のレイアウトよりも劣っているという理由があるはずです。

制約レイアウトはあらゆる点で優れています(APKサイズで150k程度のコストがかかります)。それらはより速く、より簡単に、より柔軟に、より変化に反応し、アイテムがなくなったときに問題を解決し、根本的に異なるスクリーンタイプによりよく順応し、そして長いネストループを使用しません。すべてのために木構造を引き抜いた。あなたは何に対しても、どこでも、どこにでも置くことができます。

2016年の中頃、ビジュアルレイアウトエディタでは十分ではなかったのに少しややこしかったのですが、レイアウトがある場合は、制約レイアウトを使用することを真剣に検討する必要があるかもしれません。それがRelativeLayout、あるいは単純なLinearLayoutと同じことをするとき。 FrameLayoutsは明らかにまだ目的を持っています。しかし、現時点では他に何かを構築することはできません。彼らがこれで始めれば彼らは他に何も追加しなかったでしょう。

5
Tatarize

@ dhaval-jivaniの回答に加えて。

Project github プロジェクトを最新版の制約レイアウトv.1.1.0-beta3に更新しました

OnCreateメソッドの時間と、onCreateの開始から最後のpreformDrawメソッドの実行が終了するまでの時間(CPUモニタに表示される)を測定して比較しました。すべてのテストは、Android 6.0.1を搭載したSamsung S5 miniで実行されました。

フレッシュスタート(アプリケーション起動後の最初の画面オープン)

相対レイアウト

OnCreate:123ミリ秒

最後のpreformDraw時間 - OnCreate時間:311.3ms

制約レイアウト

OnCreate:120.3ms

最後のpreformDraw時間 - OnCreate時間:310ミリ秒

それに加えて、私はこの articleここではコード からパフォーマンステストをチェックしました。次にレイアウトを相対レイアウトで変更します。そして、Android 4.3を搭載したSamsung S3のような古いAndroidデバイスでは、違いはさらに大きくなります。

結論として、私は article からのコメントに同意します。

古いビューをRelativeLayoutまたはLinearLayoutから切り替えるようにリファクタリングする価値はありますか?

いつものように:それは依存しますか???

現在のレイアウト階層にパフォーマンス上の問題がある場合、またはレイアウトを大幅に変更したい場合を除いて、私は何もリファクタリングしません。最近は測定していませんが、前回のリリースでパフォーマンスの問題が見つかったことはありません。だから私はあなたがそれを使用しても安全であるべきだと思います。しかし、 - すでに述べたように、移行のために移行するだけでは不十分です。それを必要とし、それから利益を得る場合にのみそうしてください。ただし、新しいレイアウトの場合は、ほぼ常にConstraintLayoutを使用します。以前のものと比べてはるかに優れています。

5
Andrey T

公式には、ConstraintLayoutはるかに速い

AndroidのNリリースでは、ConstraintLayoutクラスはRelativeLayoutと同様の機能を提供しますが、かなり低いコストでです。

3
serv-inc

私ができる結論は

1)私たちは xmlの部分に触れることなくUIデザインをすることができます 正直に言って GoogleはiOSアプリケーションでUIがどのようにデザインされるかをコピーしました iOSでのUI開発には慣れていますが、 相対レイアウトではxmlデザインに触れずに制約を設定するのは困難です

2)次に、他のレイアウトとは異なり、 フラットビュー階層 を持っています。 相対レイアウトよりもパフォーマンスが優れています 他の答えから見たかもしれません。

3)それは相対的なレイアウトが持っているものとは別に、 円形の相対的なポジショニング という相対的なレイアウトではできない特定の角度で特定の半径でこのビューに対して別のビューを配置できる場所もあります。

もう一度言いますが、制約レイアウトを使用してUIを設計することは、iOSでUIを設計することと同じです。今後iOSで作業する場合は、制約レイアウトを使用したほうが簡単になります。

3
murali krish

私が気づいた唯一の違いは、ドラッグアンドドロップで相対的なレイアウトで設定されたものは他の要素に対する相対的な大きさを自動的に推論していることです。ただし、制約レイアウトでは、デザインビューで要素をドラッグアンドドロップしても、アプリを実行すると状況が変わることがあります。これは、手動で制約を設定するか、コンポーネントツリーで要素を右クリックし、制約レイアウトサブメニューを選択してから「制約を推測する」をクリックすることで簡単に解決できます。お役に立てれば

0
Wilson