[android] ConstraintLayout chainStyle 활용하기 (packed)

UI를 만들다보면 아래와 같이 TextView의 넓이에 따라 뷰의 위치가 변경되는 요구사항이 많이 발생된다.

TextView에 문자열이 적을 때	TextView의 문자열이 뷰의 최대치를 초과했을 때

 

이전에는 글자에 넓이를 계산해 뷰의 사이즈를 코드상에서 조절하는 작업을 했던기억이 있다

 

ConstraintLayout의 chainStyle를 사용하면 쉽게 문제를 해결할 수 있다.

정렬이 필요한 뷰들을 chain으로 묶고 TextView에 아래 옵션을 적용한다.

app:layout_constraintHorizontal_chainStyle="packed" // 스타일설정
app:layout_constraintHorizontal_bias="0" // 좌측정렬
app:layout_constraintWidth_default="wrap" // 문장의 길이가 줄어들때 뷰의 길이도 같이 줄인다

 

#소스코드

<?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"
    android:layout_width="200dp"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:text="333"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/view1"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view1"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="#333333"
        app:layout_constraintStart_toEndOf="@+id/text"
        app:layout_constraintEnd_toStartOf="@+id/view2"
        app:layout_constraintTop_toTopOf="@+id/text" />

    <View
        android:id="@+id/view2"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="#999999"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toTopOf="@+id/text" />

</androidx.constraintlayout.widget.ConstraintLayout>