barrierとは？
今回はAndroidのレイアウトの編集でバリア(barrier)の使い方について説明します。
例えばこんなレイアウトがあったとします。
タイトル1に対して、なんかの値1
タイトル2に対して、なんかの値2
があって、これらを全部DBや設定ファイル、あるいはHTTPで他から取ってきて表示するとします。
今上の画面はタイトル1がタイトル2より長いので、タイトル1に合わせて、その右側のなんかの値１、なんかの値2の位置を決めています。
しかし、状況によってはタイトル1とタイトル2の長さが逆転する場合があります。こんな風に・・・
タイトル1に合わせて、その右側のTextViewの位置を決めているので文字が被ってしまいます。
じゃ、タイトル2に合わせて、その右側のTextViewの位置を決めれば・・・いや、いや、状況によってタイトル1とタイトル2のどっちが長いか、都度変わります。こんな時どうするかと言うと、バリア(Barrier)を使います。
barrierを使うとどういうレイアウトになる？垂直バリアの例
レイアウトエディタのComponetTreeで見るとこうなります。
Barrier(Virtical)をドラック＆ドロップでComponetTreeに追加します。そのバリアの階層構造で下にタイトル1とタイトル2を付けます。
バリアの属性で、「barrierDrection」に「end」（右端の意味）を指定します。
右側のなんかの値１、なんかの値2の左の位置をそのバリアからの相対位置にします。(app:layout_constraintStart_toEndOf)
バリアの横軸はタイトル1かタイトル2のどちらかの長い方の位置になります。
その横のその右側のなんかの値１、なんかの値2はそのバリアの位置に対する相対位置になります。
上の例はタイトル1のほうが長い場合ですが、逆にタイトル2の方が長い場合は、こうなります。
もう、文字がかぶることがありませんね。
LinerLayoutでお互いを囲うという手もありますが、こちらのほうが簡単です。
出来上がりのlayout xmlはこのようになります。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<TextView
android:id="@+id/title1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:text="タイトル１"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/title2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="40dp"
android:text="タイトル２2222222"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/title1" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="title1,title2"
tools:layout_editor_absoluteX="411dp" />
<TextView
android:id="@+id/value1"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:text="なんかの値・・・"
app:layout_constraintStart_toEndOf="@+id/barrier1"
app:layout_constraintTop_toTopOf="@+id/title1" />
<TextView
android:id="@+id/value2"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:text="なんかの値・・・"
app:layout_constraintStart_toEndOf="@+id/barrier1"
app:layout_constraintTop_toTopOf="@+id/title2" />
</androidx.constraintlayout.widget.ConstraintLayout>
これは横方向ですが、縦方向についても同じことが言えます。縦の場合は
Barrier(Horizontal)を使います。
水平方向のバリアの例、RecyclerViewとの組み合わせ
同じ理屈で、水平方向のバリア(Barrier(Horizontal))を説明してもあまり面白くありません。例えばこういう画面を想定します。
ReCyclerViewがどかんと真ん中にあって、その上にEditTextが3つ並んでいます。スマホは画面が狭いので、ReCyclerViewは極力画面全体を使いたいです。でも、そのReCyclerViewに対してデータを入力する時は、その時だけ、EditTextの入力部分を表示してほしい。余計なときは隠れていて欲しい。こんな場合もバリアが使えます。
ComponetTreeですが、このようになります。
水平バリアの下にEditTextの3つを追加します。ここで、GroupもComponetTreeに追加して、Groupの下にもEditTextの3つを追加します。
水平バリアの「BarrierDirection」は「bottom」を指定します。
RecyClerViewの上側の位置は水平バリアからの相対位置を指定します。(app:layout_constraintTop_toBottomOf)
この状態で、Groupの「Visibility」を「gone」にすると・・・
EditTextの3つが非表示になりレイアウトが詰まります。RecyclerViewの上側は水平バリアからの相対位置なので、それに引っ張られてRecyclerViewの上側が伸びます。こんな風に、ほぼ全画面表示になります。
出来上がりのlayout xmlはこのようになります。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView10,textView11,textView12"
tools:layout_editor_absoluteY="731dp" />
<TextView
android:id="@+id/textView10"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="16dp"
android:text="なんかの入力１"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView11"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="なんかの入力3"
app:layout_constraintStart_toStartOf="@+id/textView12"
app:layout_constraintTop_toBottomOf="@+id/textView12" />
<TextView
android:id="@+id/textView12"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="なんかの入力2"
app:layout_constraintStart_toStartOf="@+id/textView10"
app:layout_constraintTop_toBottomOf="@+id/textView10" />
<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="textView12,textView11,textView10" />
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/barrier1" />
</androidx.constraintlayout.widget.ConstraintLayout>
垂直バリアの「BarrierDirection」が「start」の場合、
水平バリアの「BarrierDirection」が「top」の場合も同じ理屈です。
最後に
水平バリアの使いかたは、
AndroidでRecyclerViewの縦方向の自動拡大、縮小も参考にしてください。