안드로이드에서 제공하는 Composable은 크게 나누어봤을 때,
- UI를 구성하는
최소 단위컴포넌트들과 (Text,Image,Button, ..) - 그들을 감싸고
레이아웃을 구성하는 컴포넌트로 구성된다고 생각할 수 있는듯하다. (TopAppBar,DropDownMenu,Box,LazyColumn,LazyVerticalGrid, ..)
최소 단위 컴포넌트들로는 일반적으로 떠올릴만한 UI 기본 요소들 대부분이 제공되는데, 우선 그것부터 간단하게 알아보고 레이아웃에 대해서 조금 더 자세히 알아보자.
패키지 구조
그 전에 연관된 패키지에 어떤 게 있는지 간략하게 정리해보자.
- androidx.compose.material
- Material Design 2
- androidx.compose.material3
- Material Design 3
둘을 같이 쓰는 건 추천되지 않으며, 기본적으로 완전히 대체가 가능하니 material3만 쓰면 된다고 한다.
주로 쓰는 대부분의 컴포넌트들이 material에 들어있다.
그 외로는 다음과 같은 layout 컴포넌트들이 있다 :
- androidx.compose.foundation.layout
Box,Column,Row/FlowColumn,FlowRow/ContextualFlowColumn,ContextualFlowRow/Spacer
- androidx.compose.foundation.lazy
LazyColumn,LazyRow
- androidx.compose.foundation.lazy.grid
LazyVerticalGrid,LazyHorizontalGrid
- androidx.compose.foundation.lazy.layout
LazyLayout
- androidx.compose.foundation.lazy.staggeredgrid
LazyHorizontalStaggeredGrid,LazyVerticalStaggeredGrid
- androidx.compose.foundation.pager
HorizontalPager,VerticalPager
이게 전부인지는 모르겠지만 일단 이정도가 있다는 걸 알면 되는듯하다.
1. UI 기본 요소 컴포넌트들
일반적으로 떠올릴만한 기본적인 컴포넌트들은 androidx.compose.material3에서 대부분 제공하고 있다.
목록 및 정확한 내용은 androidx.compose.material3의 Overview 페이지, 가이드는 Material components in Compose를 참고하자.
텍스트와 텍스트 입력
TextTextFieldOutlinedTextField
이미지와 아이콘
ImageIcon
버튼
ButtonElevatedButtonFilledTonalButtonOutlinedButtonTextButton
아이콘 버튼
IconButtonIconToggleButtonFilledIconButtonFilledIconToggleButtonFilledTonalIconButtonFilledTonalIconToggleButtonOutlinedIconButtonOutlinedIconToggleButton
라디오 버튼
RadioButton
체크박스
CheckBoxTriStateCheckbox:-가 추가된 3개의 상태
스위치
Switch
세그먼트 버튼 = 여러 개의 버튼 중 선택 느낌
SingleChoiceSegmentedButtonRowMultiChoiceSegmentedButtonRow
칩 = 유튜브 상단 필터 버튼 같은 작은 UI
AssistChip/ElevatedAssistChipFilterChip/ElevatedFilterChipInputChip/ElevatedSuggestionChipSuggestionChip: 일반적인 칩
배지 = SNS앱 알림수 표기 같은 UI
Badge
프로그레스 표시
LinearProgressIndicator: 직선바CircularProgressIndicator: 원형 로딩
날짜 피커 (DatePickerDialog로 종종 감싸짐)
DatePickerDateRangePicker: 날짜 범위를 선택
시간 피커
TimePicker: 다이얼TimeInput: 숫자만
슬라이더
Slider
Divider = 선
HorizontalDividerVerticalDivider
Spacer = 빈 공간 (androidx.foundation.layout에 있음)
Spacer
등등이 있고 더 많은 컴포넌트는 문서 참고
2. 기본 컴포넌트들을 감싸고 레이아웃을 구성하는 컴포넌트들
1) Material
Scaffold = 많은 경우에 기본적인 틀을 제공해줌
topBar: 상단바에 올 ComposablebottomBar: 하단바에 올 ComposablefloatingActionButton: 우하단에 올 Composable- 등등의 파라미터를 받는다. (이후 몇 개만 표시 또는 미표시)
TopAppBar, CenterAlignedTopAppBar, MediumTopAppBar, LargeTopAppBar = 상단바 컴포넌트
title: 표시될 텍스트navigationIcon: 왼쪽에 표기될 아이콘actions: 오른쪽에 표기될 아이콘
BottomAppBar = 하단바 컴포넌트
ModalBottomSheet = 공유하기 누를 때 등에서 나오는 모양의 시트
BottomSheetScaffold = 바텀시트에 올 Composable을 받고 그게 항상 보여지는 Scaffold
Dialog(androidx.compose.ui.window), AlertDialog = 팝업과 비슷한 느낌
title: 상단에 표시될 텍스트text: 가운데에 표시될 텍스트icon: 상단에 표시될 아이콘dismissButton,confirmButton: 취소 / 확인 버튼
DropDownMenu, DropdownMenuItem = 앱들 우상단 ... 버튼 누르면 나오는 모양의 메뉴를 구성
expanded: 메뉴가 보여질지 여부content: 메뉴의 content. 일반적으로DropdownMenuItem들을 가짐
ExposedDropdownMenuBox = Spinner = Combo boxes. 현재 선택된 아이템도 보여줌
expanded: 메뉴가 보여질지 여부content: 메뉴의 content. 일반적으로DropdownMenuItem들을 가짐
SnackbarHost(SnackbarHostState), SnackBar = 하단 짧은 알림 바를 구성
Card, ElevatedCard, OutlinedCard = 카드
elevation: 배경보다 높이 보이도록 그림자 추가
PullToRefreshBox = 새로고침 제스처를 지원하는 컨테이너
ModalNavigationDrawer, ModalDrawerSheet
PermanentNavigationDrawer, PermanentDrawerSheet
DismissibleNavigationDrawer, DismissibleDrawerSheet
NavigationDrawerItem = 보통 좌측 절반정도 차지하는, 슬라이드인 네비게이션을 구성
NavigationBar, NavigationBarItem = 주로 하단에 오는 네비게이션 바를 구성
NavigationRail, NavigationRailItem = 태블릿이나 데스크톱에서 주로 쓰이는 수직 네비게이션 구성
SearchBar = 검색 바와 검색 화면을 구성.
content: 검색 화면을 구성. 일반적으로TextField등을 사용
Tab, LeadingIconTab / TabRow, PrimaryTabRow, SecondaryTabRow, ScrollableTabRow = 선택 시 아래에 선이 생기는 탭들과 그 리스트를 구성
2) 레이아웃
기본적인 레이아웃 (androidx.compose.foundation.layout)
Box = 아이템들을 겹치게 쌓음
Column / Row = 각각 상하, 좌우로 아이템을 늘어놓음
Lazy 리스트와 그리드 (androidx.compose.foundation.lazy)
LazyColumn / LazyRow = 보여지는 아이템만 그려서 퍼포먼스 이점을 얻을 수 있음
LazyVerticalGrid / LazyHorizontalGrid = 아이템을 그리드로 늘어놓을 수 있게 해줌
LazyVerticalStaggeredGrid / LazyHorizontalStaggeredGrid = 핀터레스트처럼 계단식으로 높이/너비가 다르게 구성되는 그리드
커스텀 레이아웃 (androidx.compose.ui.layout, androidx.compose.foundation.lazy.layout)
Layout / LazyLayout = 커스텀 레이아웃을 구성
Flow, ContextualFlow 리스트 (androidx.compose.foundation.layout)
FlowColumn / FlowRow = CSS의 flex-wrap: wrap; 느낌
ContextualFlowColumn / ContextualFlowRow = FlowColumn, FlowRow의 확장인데, 약간 더 조건에 따라 묶어서 보여준다고 함
페이저 (androidx.compose.foundation.pager)
HorizontalPager / VerticalPager = 인스타그램처럼 아이템들 사이를 flip 하고, 페이지 번호 등도 그리게 해줌
더 많고 정확한 내용은 패키지 구조에서 정리했듯 문서 참고
