[Android/UI-UX] 유동적인 TextView의 사이즈를 제한하고, 정렬까지(with ConstraintLayout)

UI 구성을 하면서 때때로 유동적으로 늘어나는 View 때문에 골머리를 앓을 때가 많다.

 

극단적으로 짧은데서 극단적으로 길어질 수 있는 텍스트를 담는 TextView,

 

그리고 이 좌측에 붙어야 하는 ImageView까지.. 하드코딩으로 가기 쉬운 요구사항 들이다.

 

 

다행스럽게도 안드로이드에는 ConstraintLayout이 있었으니, 이를 이용해 아래 세가지의 요구사항을 모두 충족시킬 수 있었다.

 

• TextView는 화면의 우측에 붙는다.
• TextView는 화면의 중앙 영역까지만 늘어난다
• TextView의 좌측에는 아이콘이 들어간 ImageView가 있어야 한다.

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


                    <androidx.constraintlayout.widget.Guideline
                        android:id="@+id/center_guideline"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:orientation="vertical"
                        app:layout_constraintGuide_percent="0.50" />
                        
                    <ImageView
                        android:id="@+id/sample_icon""
                        android:layout_width="14dp"
                        android:layout_height="14dp"
                        android:layout_marginTop="4dp"
                        android:layout_marginEnd="4dp"
                        app:layout_constraintRight_toLeftOf="@id/tv_test"
                        app:layout_constraintTop_toTopOf="@id/tv_test" />
                        
                    <TextView
                        android:id="@+id/tv_test"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="end"
                        android:text="@{viewModel.sampleText}"
                        app:layout_constrainedWidth="true"
                        app:layout_constraintHorizontal_bias="1"
                        app:layout_constraintLeft_toLeftOf="@id/center_guideline"
                        app:layout_constraintRight_toRightOf="parent"/>
                        
                        
                </androidx.constraintlayout.widget.ConstraintLayout>

 

첫번째로 Guideline을 정의해서 화면의 중앙을 정의했고, 여기에 TextView의 왼쪽 제약을 걸었다.

 

두번째로, TextView의 width를 wrap_content로 정의하고 layout_constrantHorizontal_bias를 1로 두었다.

 

세번째로 layout_constrainedWidth를 true로 두어 텍스트 뷰 내의 컨텐츠가 의도한 크기보다 늘어나지 않도록 제한하였다.

 

끝!

 

< 참조 >

 

ConstraintLayout - wrap_content + toRightOf layout issue