LoginSignup
1
0

More than 1 year has passed since last update.

ConstraintLayoutでつまずきやすいViewが重複した時の解決策

Posted at

はじめに

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を作成することができるかと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0