Jetpack Compose UI
Jetpack Compose 나만의 TextField 만들기
BasicTextField 활용
컴포즈는 기본 디자인 시스템이 Material 으로 돼있습니다. 따라서 미리 정의된 TextField 를 사용하면 Material 디자인 스펙에 맞춰지므로 커스터마이징에 제한이 생깁니다.
TextField 는 기본 높이와 배경 색이 설정돼 있어서 관련 Modifier 를 적용해 주지 않아도 긴 높이와 회색 배경이 보이는 걸 확인할 수 있습니다. 하지만 TextField 와 달리 BasicTextField 는 설정한 Modifier 의외의 옵션은 보이지 않습니다(텍스트가 표시되기 위한 최소한의 높이 제외).
BasicTextField 는 Material 에 영향을 받지 않는 foundation 아티팩트에 위치합니다. 즉, BasicTextField 를 활용하면 Material 디자인 스펙의 제약 없이 자유롭게 커스터마이징 할 수 있습니다.
BasicTextField 는 decorationBox 라는 새로운 인자가 존재합니다. 이 인자를 통해 TextField 를 자유롭게 꾸밀 수 있으며, 이로 꾸며진 형태가 TextField 가 됩니다.
BasicTextField 는 2가지 요소로 나뉩니다.
- 클릭 시 키보드를 열고, 입력받은 텍스트로
onValueChange를 호출하는 요소 value를 화면에 표시하는 요소
첫 번째 요소는 BasicTextField 자체가 담당하고, 두 번째 요소를 decorationBox 가 담당합니다. 이를 증명하기 위해 decorationBox 인자를 {} 으로 설정해 보겠습니다.
BasicTextField 에는 text 가 표시되지 않고 직접 text 를 표시해 주는 Text 에만 text 가 표시됨을 확인할 수 있습니다.
이를 응용해서 아래 화면에 사용되는 TextField 를 임시로 구현해 보겠습니다.
아래는 제가 참여중인 사이드 프로젝트인 덕키의 한 화면 입니다! 2월에 MVP 출시 예정이니 많은 관심 부탁드려요 🫶
입력받은 텍스트를 Box 안에 보여주는 식으로 decorationBox 를 구성해 보았습니다. 하지만, 이 방식은 사용자 지정 decorationBox 이기에 키보드 커서가 보이지 않습니다. 키보드 커서를 표시하기 위해선 decorationBox 에 기본 인자로 주어지는 innerTextField 를 활용해야 합니다. 이를 활용해서 아래 화면속 TextField 를 임시로 구현해 보겠습니다.
이런 식으로 간단히 구현할 수 있습니다.
끝!
decorationBox 를 활용하면 거의 모든 TextField 디자인을 구현할 수 있습니다. 끝까지 읽어주셔서 감사합니다.
안드로이드 개발자분들을 위한 카카오톡 오픈 채팅방을 운영하고 있습니다. 오늘 인원 정리가 진행될 예정입니다. 그동안 자리가 없어서 못 들어오셨던 분들은 이제 들어오실 수 있습니다.
