Jetpack Compose로 텍스트와 아이콘 정렬 완벽 해결!
by DD
2년 전
조회수 2
Jetpack Compose 환경에서 텍스트와 아이콘을 함께 사용하는 UI 구현 시 정렬 문제 발생
TextLayoutResult를 활용하여 텍스트 줄 수에 따라 아이콘 정렬 방식을 동적으로 제어
폴더블 디바이스 환경에서 텍스트가 두 줄 이상일 경우에도 UI 일관성 유지
TextLayoutResult를 활용한 동적 정렬
TextLayoutResult는 텍스트의 레이아웃 정보를 제공하며, 텍스트 줄 수, 높이 등을 파악할 수 있다. 따라서 텍스트가 두 줄 이상일 경우, 첫 번째 줄에 아이콘을 정렬하는 로직을 구현할 수 있다. 폴더블 디바이스와 같이 화면 크기가 가변적인 환경에서 UI 유연성을 확보한다.
Row와 Modifier.align()의 동작 원리
Compose의 Row는 `verticalAlignment` 속성을 통해 자식 요소의 수직 정렬을 제어한다. Modifier.align()을 사용하면 특정 정렬 선을 기준으로 아이콘의 위치를 조정할 수 있다. TextLayoutResult를 활용하여 동적으로 생성된 정렬 선을 아이콘에 적용함으로써 UI 디자인 요구사항을 충족한다.
실전 적용 가이드: 코드 재사용성 확보
위에서 구현한 정렬 로직을 커스텀 Modifier로 캡슐화하여 코드 재사용성을 높일 수 있다. 따라서 UI 컴포넌트를 쉽게 재사용하고, 코드 중복을 방지할 수 있다. 다양한 화면 크기와 텍스트 길이에 대응하는 유연한 UI를 구축하여 개발 생산성을 향상시킨다.
