ConstraaintLayoutのBarrier

2011-10-17 11:41第5945回ConstraintLayoutを読んで、ウェブサイトを転載しますhttp://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/1017/8601.html
ConstraaintLayoutのBarrierは1.1バージョンで導入された非常に実用的な機能ですが、公式サイトでは何も紹介されておらず、名前だけを挙げています.https://androidstudio.googleblog.com/2017/05/constraintlayout-110-beta-1-release.html .
訂正:公式サイトではBarrierというクラスについてもいくつか紹介しています.https://developer.android.com/reference/android/support/constraint/Barrier.html
Guidelineと同様にVirtual Helper objectsに属し、実行時のインタフェースでは見えませんが、Guidelineよりずっと実用的です.
constraintlayoutのウェブサイト(非公式)は、その紹介を非常に明確にしています.https://constraintlayout.github.io/basics/barriers.html 
以下は翻訳です.
レイアウトを作成すると、ローカライズによってレイアウトが変化する場合があります.簡単な例を示します.

3つのTextViewsがあります.左のtextView 1とtextView 2、右のtextView 3です.textView 3コンストレイントはtextView 1の右側にあり、効果も私たちの予想に合っています.
しかし、多言語をサポートする必要があると複雑になります.ドイツ語を追加すると問題が発生します.英語ではtextView 1の文字はtextView 2より長いですが、ドイツ語ではtextView 2の文字はtextView 1より長いからです.

ここでの問題は、textView 3がtextView 1に対して相対的であるため、textView 2がtextView 3に直接挿入されることである.デザインビューではもっとはっきり見えます(白い背景のあれ).
直接的な解決策はTableLayoutを使用するか、textView 1&textView 2を垂直に包むか、android:layout_width=「wrap_content」のLinearLayoutにあります.そしてtextView 3をこのLinearLayoutの後ろに拘束します.しかし、私たちはもっと良い方法があります.Barriers.
Barrierは、Guidelineと同様にオブジェクトをコンストレイントする仮想ビューです.BarrierとGuidelineの違いは、複数のviewの大きさによって決まることです.この例では、textView 1とtextView 2のどちらが長いか分からないので、この2つのviewの幅に基づいてBarrierを作成することができます.textView 3をBarrierの後ろに拘束することができます.
エディタでBarriersを作成する
まずコンテキストメニューのcreate a vertical barrierを選択し、垂直なbarrierを作成します.
注:Android Studio 2.3このメニューはないようですが、Android Studio 3.0はありますが、helpメニューグループの下位メニューでは、次のプレゼンテーションと少し違います.
構築ツリー(component tree)にBarrier(左側の下部に近いパネル)が見えます.
ドラッグして位置を変更できます(オプション):

次に、Barrier方向(direction)を設定する必要があります.ここでは、BarrierにtextView 1とtextView 2のサイズに基づいて誰の後ろにあるかを決定させたいので、directionをendに設定する必要があります.

最後のステップは、Barrierがどのviewに対しているかを伝えることです.私がコンストレイントを使わないのは、コンストレイントが一般的に1対1を指すためですが、ここでは複数のviewです.Barrierに参照するviewのIDを指定する必要があります.component treeでviewをBarrierにドラッグすることで、次のことができます.
定義が完了すると、これらの参照はBarrierのchildrenとして列挙されます.また、青いパネルでBarrierが新しい位置(垂直な破線)にジャンプしているのも見えます.
Barrierは定義済みで、textView 3に対する制約をtextView 1からBarrierに変更するしかありません.
終わったらtextView 3はtextView 2の後ろに着きました.
全体の効果を見るために、言語を切り替えることができます.Barrierは自動的に広いtextViewの後ろに位置し、間接的にtextView 3も正しい位置に位置していることがわかります.
XMLでのBarriersの作成
XMLコードも簡単です.

  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">

 

  

    android:id="@+id/textView1"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_marginStart="16dp"

    android:layout_marginTop="16dp"

    android:text="@string/warehouse"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" />

 

  

    android:id="@+id/textView2"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_marginStart="16dp"

    android:layout_marginTop="8dp"

    android:text="@string/hospital"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toBottomOf="@+id/textView1" />

 

  

    android:id="@+id/barrier7"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    app:barrierDirection="end"

    app:constraint_referenced_ids="textView2,textView1" />

 

  

    android:id="@+id/textView3"

    android:layout_width="0dp"

    android:layout_height="wrap_content"

    android:layout_marginStart="8dp"

    android:text="@string/lorem_ipsum"

    app:layout_constraintStart_toEndOf="@+id/barrier7"

    app:layout_constraintTop_toTopOf="parent" />

 

Barrierの特別な場所はBarrier元素自身にある.app:barrierDirectionプロパティはBarrierの方向を決定します.ここでは参照viewの後ろに置きます.参照されるviewはレイアウト内のviewのidリストであり、カンマで区切られている.