Split Buttons in Material3 Expressive - Full Guide
- Material 3 Expressive의 새로운 UI 컴포넌트인 '스플릿 버튼'은 기본 동작 버튼과 관련 작업 드롭다운 메뉴를 여는 화살표 버튼으로 구성됩니다. 🪚
- 버튼 클릭 시, 형태가 원형으로 변형되고 드롭다운 화살표가 회전하는 등 Material 3 Expressive의 특징적인 애니메이션이 내장되어 있습니다. 💫
- Jetpack Compose에서
SplitButtonLayout을 사용하여 leadingButton (기본 동작)과 trailingButton (드롭다운)을 정의하여 구현합니다. 🏗️
SplitButtonDefaults 객체는 스플릿 버튼의 기본 컴포저블, 아이콘 크기, 간격 등 기본값을 제공하여 일관된 디자인을 유지하도록 돕습니다. 📐
leadingButton 내 아이콘의 크기와 텍스트 간 간격은 수동으로 설정해야 하며, 아이콘은 벡터 에셋으로 추가해야 합니다. 🖼️
trailingButton은 checked 상태에 따라 모양이 변하고 드롭다운 메뉴를 표시하며, 아이콘 회전 애니메이션은 animateFloatAsState와 graphicsLayer를 사용하여 수동으로 구현됩니다. 🔄
- 드롭다운 메뉴는
DropdownMenu 컴포저블을 사용하여 표시하며, expanded 상태와 onDismissRequest 람다를 통해 제어됩니다. 📜
- 현재(알파 버전 기준) 스플릿 버튼의 다양한 크기를 Compose에서 쉽게 설정하는 방법은 아직 제공되지 않습니다. 🚧
- 이 컴포넌트는
material3 1.5.0-alpha 의존성을 필요로 하며, 대부분의 Expressive 애니메이션은 컴포넌트에 내장되어 있어 개발자가 직접 정의할 필요가 없습니다. ✨