원하는 레이아웃

레이아웃에 특별한 변화는 없지만 Constraint Layout에서 만든 까다로운 일이다.

간단한 ConstraintLayout 구현

한마디로 상술한 포석을 솔직하게 만들면 다음과 같다.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#FFDDDD">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:text="販売価格"
        android:textSize="25dp"
        />

    <TextView
        android:id="@+id/price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/title"
        android:layout_marginLeft="10dp"
        android:lines="1"
        app:autoSizeTextType="uniform"
        android:text="2,800"
        android:textSize="40dp"
        />

    <TextView
        android:id="@+id/yen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/price"
        app:layout_constraintBaseline_toBaselineOf="@+id/price"
        android:gravity="bottom"
        android:text="円"
        android:textSize="20dp"
        />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="購入する"
        android:textSize="25dp"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

문제점

그러나 이 구조에 문제가 있어 가격이 커지면 버튼과 가격이 중첩된다.
※ 버튼 반투명화를 쉽게 이해하기 위해

해결 방법

가격의layout_constrainedWidth를 true

로 정하다

엔화 오른쪽 왼쪽 구매

가격의 오른쪽을 엔화의 왼쪽에 놓다

    <TextView
        android:id="@+id/price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/title"
        app:layout_constraintRight_toLeftOf="@+id/yen"
        android:layout_marginLeft="10dp"
        android:lines="1"
        app:autoSizeTextType="uniform"
        android:text="2,811"
        app:layout_constrainedWidth="true"
        android:textSize="40dp"
        />

    <TextView
        android:id="@+id/yen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/price"
        app:layout_constraintRight_toLeftOf="@+id/button"
        app:layout_constraintBaseline_toBaselineOf="@+id/price"
        android:gravity="bottom"
        android:text="円"
        android:textSize="20dp"
        />

layout_constrainedWidth를 true로 설정하여 wrap_콘텐츠의 내용이 크더라도 Constraint를 초과하지 않도록 폭을 제한할 수 있습니다.
또한 layout_constrainedWidth 유효성을 위해서는 좌우 양쪽에 Constraint를 설치해야 한다.

이렇게 하면 가격이 초과 지출되지 않을 것이다.

위치 조정

그러나 위의 방법에는 문제가 있다. 가격이 짧으면 가격과 엔화가 좌경화되지 않는다.

이것을 조정하기 위해서는 다음과 같은 대응이 필요하다.

지정layout_constraintHorizontal_chainStyle="packed" 가격과 엔화를 연결

지정layout_constraintHorizontal_bias="0" 왼쪽 가까이

layout_constraintHorizontal_chainStyle Constraint로 연결된 View를 양방향으로 접합할지 분산할지 지정할 수 있습니다.packed로 설정하면 가격과 엔화가 붙지만 기준에서는 중앙이 붙기 때문에 위치를 왼쪽layout_constraintHorizontal_bias으로 설정하기 위해 0으로 설정한다.
다음은 최종 레이아웃 파일입니다.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#FFDDDD">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:text="販売価格"
        android:textSize="25dp"
        />

    <TextView
        android:id="@+id/price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/title"
        app:layout_constraintRight_toLeftOf="@+id/yen"
        android:layout_marginLeft="10dp"
        android:lines="1"
        app:autoSizeTextType="uniform"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        android:text="300"
        app:layout_constrainedWidth="true"
        android:textSize="40dp"
        />

    <TextView
        android:id="@+id/yen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/price"
        app:layout_constraintRight_toLeftOf="@+id/button"
        app:layout_constraintBaseline_toBaselineOf="@+id/price"
        android:gravity="bottom"
        android:text="円"
        android:textSize="20dp"
        />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="購入する"
        android:textSize="25dp"
        />

</androidx.constraintlayout.widget.ConstraintLayout>