[Android] 텍스트 길이에 따른 아이콘 고정

안녕하세요. 블랙진입니다.

 

우리는 종종 다음과 같은 요구사항을 받을 때가 있습니다. 텍스트가 늘어남에 따라 오른쪽에 붙어있는 아이콘이 화면을 넘어가지 않고 고정되기를 말이죠. 하지만 현실에서는 어떨까요?

 

 

겪어본 개발자는 알 겁니다. 텍스트가 늘어나면서 아이콘이 화면을 벗어나 버립니다. 우리가 원하는 위치에서 아이콘은 고정되고 텍스트만 계속 늘어나면 얼마나 좋을까요? LinearLayout, RelativeLayout 으로 해봐도 안되고 ConstrainLayout은 왠지 될듯 말듯 하면서도 안됩니다.

 

삽질을 하다보면 눈물이 납니다

 

하지만! ConstrainLayout 을 사용해서 우리는 해결할 수 있습니다!

 

 

텍스트가 늘어남에 따라 아이콘이 마지막에 편안하게 안착하는 모습을 확인할 수 있습니다. Yeah~! 🎉🎉 그럼 어떻게 구현하는지 함께 확인해 보겠습니다.

 

구현 코드

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:background="@drawable/bg_stroke"
        android:padding="10dp">

        <EditText
            android:id="@+id/tv_sample"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:textColor="@color/black"
            app:layout_constrainedWidth="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/iv_sample"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/iv_sample"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="10dp"
            android:background="#FF018786"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/tv_sample"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

 

구현은 정말 별거 없습니다. EditText(혹은 유동적으로 변경할 View)의 width를 wrap_content로 해주고 ConstrainLayout의 app:layout_constrainedWidth의 값을 true로 해주면 됩니다. 

 

layout_constrainedWidth

출처 : Google Doc

 

위 attribute는 버전 1.1 에 추가된 기능입니다. 문서 내용 일부를 보면 다음과 같습니다.

While in general this is enough (and faster), in some situations, you might want to use WRAP_CONTENT, yet keep enforcing constraints to limit the resulting dimension.

일반적으로 충분하고 빠르지만, 경우에 따라서는 WRAP_CONTENT를 사용하면서도 사이즈를 제한하는 제약을 걸 수 있습니다.

 

즉, 우리는 위 attribute 사용해서 유동적으로 변하는 View의 사이즈에 제한을 걸 수 있습니다.

 

<참고자료>

Stanley Kou의 개인작업실