はじめに
ConstraintLayoutでつまずく中でも頻出するのがViewの重複問題、押出し問題かと思います。
そこで、今回自分が役立った二つの要素を紹介したいと思います
layout_constrainedWidth
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!Hello World!HelloHello World!Hello World!HelloHello World!Hello World!Hello"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toSraerOf="@+id/view"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="@+id/view"
android:layout_width="50dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@+id/text_view"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
こちらは、wrap_contentを設定した際に隣り合ってるViewを押し出してしまう状態のものに設定することで隣り合ってるViewの制約を破らない様に設定することができます。
そうすることで、重なってしまったり、押し出したりしてしまうことがなくなります。
layout_constraintHorizontal_bias
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
次にこちらです。
こちらはbiasを0から1の間で少数で指定することにより制約を設けてる間での位置を決めることができます。
0に近ければ左により1に近ければみぎによっていきます。
最後に
上の2つは組み合わせることが多く、併用することにより綺麗なUIを作成することができるかと思います。