[Android] Compose 컴포넌트 - Material Design

Button

Button은 Surface 영역과 Row 영억으로 나눌 수 있습니다.

Surface 영역은 버튼의 배경색과 스타일, 유저와의 상호작용을 담당합니다.

Row 영역은 버튼 내부에 보여줄 컴포저블에 대한 설정을 담당합니다.

Common buttons – Material Design 3

버튼  |  Jetpack Compose  |  Android Developers

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding
): Unit

Surface 영역

• onClick : 버튼이 눌렸을 때의 이벤트 설정
• modifier : 버튼에 적용할 modifier 설정
• enabled : 버튼이 클릭 가능한지 설정
• shape : 버튼의 모양 설정
• colors : 버튼에 사용할 색상 설정
• elevation : 버튼의 elevation(z축으로 올라와 보이는 효과) 설정
• border : 버튼의 테두리 설정
• interactionSource : 사용자의 상호작용에 대한 설정
  • remember API를 이용하여 사용자의 interaction이 변경되었을 때, UI를 다시 그림

Row 영역

• content : 버튼 내부의 content 설정
• contentPadding : 버튼에 대한 내부 content의 padding 설정

 

CheckBox

CheckBox를 사용하면 사용자가 목록에서 하나 이상의 항목을 선택할 수 있습니다.

CheckBox에서도 TextField처럼 remember API를 사용하여 선택한 상태를 저장하고 관리해야 합니다.

• val mutableState = remember { mutableStateOf(...) }
• var value by remember { mutableStateOf(...) }
• val (value, setValue) = remember { mutableStateOf(...) }

Checkbox – Material Design 3

체크박스  |  Jetpack Compose  |  Android Developers

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): Unit

• checked : 체크박스가 선택되었는지에 대한 여부
• onCheckedChange() : 사용자가 체크박스를 클릭할 때 호출되는 함수 (null인 경우 상호작용 불가)
• modfier : 체크박스에 적용할 modifier 설정
• enabled : 체크박스가 클릭 가능한지 설정
• colors : 체크박스의 색상 정의
  • checkedColor : 선택된 경우 테두리 및 체크박스에 적용되는 색상
  • uncheckedColor : 선택되지 않은 경우 테두리에 적용되는 색상
  • checkmarkColor : 체크 마커에 사용되는 색상
  • disabledColor : 비활성화 및 선택되지 않은 경우 테두리 및 체크박스에 적용되는 색상
• interactionSource : 사용자의 상호작용에 대한 설정
  
  • remember API를 이용하여 사용자의 interaction이 변경되었을 때, UI를 다시 그림

 

Card

Card는 UI의 Material Design 컨테이너 역할을 합니다.

각종 Compose 컴포넌트를 사용하여 카드 레이아웃을 생성할 수 있습니다.

Cards – Material Design 3

카드  |  Jetpack Compose  |  Android Developers

@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    elevation: CardElevation = CardDefaults.cardElevation(),
    border: BorderStroke? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

• modifier : 카드에 적용할 modifier 설정
• shape : 카드의 모양 설정
• colors : 카드에 사용할 색상 설정
• elevation : 카드의 elevation(z축으로 올라와 보이는 효과) 설정
• border : 카드의 테두리 설정
• content : 카드 내부의 content 설정

 

Dialog

Dialog는 기본 앱 콘텐츠 위의 레이어에서 팝업 메시지를 표시하거나 사용자 입력을 요청할 때 사용합니다.

보통 AlertDialog를 사용하여 다이얼로그를 구현합니다.

이를 사용하지 않는다면, Dialog와 각종 Compose 컴포넌트를 같이 사용하여 직접 다이얼로그를 구성할 수 있습니다.

Dialogs – Material Design 3

대화상자  |  Jetpack Compose  |  Android Developers

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    dismissButton: (@Composable () -> Unit)? = null,
    modifier: Modifier = Modifier,
    icon: (@Composable () -> Unit)? = null,
    title: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    shape: Shape = AlertDialogDefaults.shape,
    containerColor: Color = AlertDialogDefaults.containerColor,
    iconContentColor: Color = AlertDialogDefaults.iconContentColor,
    titleContentColor: Color = AlertDialogDefaults.titleContentColor,
    textContentColor: Color = AlertDialogDefaults.textContentColor,
    tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
    properties: DialogProperties = DialogProperties()
): Unit

• onDismissRequest : 다이얼로그 외부를 클릭했거나 뒤로 가기 버튼을 클릭하는 등 다이얼로그를 닫을 때 실행할 동작 설정
• confirmButton : 확인 버튼을 클릭했을 경우 실행할 동작 설정
• dismissButton : 취소 버튼을 클릭했을 경우 실행할 동작 설정
• modifier : 버튼에 적용할 modifier 설정
• icon : 다이얼로그 상단에 표시할 아이콘 설정
• title : 다이얼로그에 표시할 제목 설정
• text : 다이얼로그에 표시할 본문 설정

 

AlertDialog 사용 예시

@Composable
fun DialogExample() {
    var openDialog by remember { mutableStateOf(false) }
    var counter by remember { mutableStateOf(0) }

    ...

    if (openDialog) {
        AlertDialog(
            onDismissRequest = {
                openDialog = false
            }, 
            confirmButton = {
                Button(onClick = {
                    counter++
                    openDialog = false
                }) {
                    Text("더하기")
                }
            }, 
            dismissButton = {
                Button(onClick = {
                    openDialog = false
                }) {
                    Text("취소")
                }
            }, 
            title = {
                Text(text = "더하기")
            }, 
            text = {
                Text(text = "더하기 버튼을 누르면 카운터가 증가합니다.")
            }
        )
    }
}

 

AppBar

AppBar는 사용자에게 주요 기능 및 Navigation 항목에 대한 액세스 권한을 제공하는 컨테이너입니다.

앱 바에는 상단 앱 바와 하단 앱 바가 있습니다.

• TopAppBar : 주요 기능에 대한 액세스를 제공합니다. 일반적으로 제목, 핵심 작업 항목, 특정 탐색 항목을 호스팅합니다.
• BottomAppBar : 일반적으로 Navigation 항목을 포함합니다. 포함된 플로팅 작업 버튼 등을 통해 다른 주요 작업에 액세스할 수도 있습니다.

Top app bar – Material Design 3

Bottom app bar – Material Design 3

앱 바  |  Jetpack Compose  |  Android Developers

@ExperimentalMaterial3Api
@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
): Unit

• title : 상단 앱 바에 표시할 제목 설정
• modifier : 상단 앱 바에 적용할 modifier 설정
• navigationIcon : Navigation의 기본 아이콘 (앱 바의 왼쪽에 표시됨)
• actions : 주요 기능에 액세스할 수 있는 아이콘 (앱 바의 오른쪽에 표시됨)
• windowInsets : 시스템 윈도우 인셋(패딩 영역과 같은)을 어떻게 처리할지 설정
• colors : 상단 앱 바에 사용할 색상 설정
• scrollBehavior : 상단 앱 바가 내부 content 스크롤에 응답하는 방식 결정
  • enterAlwaysScrollBehavior : 사용자가 내부 content를 스크롤해 내리면 상단 앱 바가 접히고, 스크롤해 올리면 다시 나타납니다. 
  • exitUntilCollapsedScrollBehavior : enterAlwaysScrollBehavior와 비슷하지만, 사용자가 내부 content의 끝에 도달하면 다시 상단 앱 바가 나타납니다. 
  • pinnedScrollBehavior : 상단 앱 바는 그대로 유지되며 스크롤에 반응하지 않습니다.

@ExperimentalMaterial3Api
@Composable
fun BottomAppBar(
    actions: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    floatingActionButton: (@Composable () -> Unit)? = null,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
    scrollBehavior: BottomAppBarScrollBehavior? = null
): Unit

• actions : 하단 앱 바의 아이콘을 눌렀을 때 실행할 동작 설정
• floatingActionButton : 하단 앱 바 끝에 있는 플로팅 액션 버튼 설정
• contentPadding : 하단 앱 바의 content에 적용되는 패딩 설정
• scrollBehavior : 하단 앱 바가 내부 content 스크롤에 응답하는 방식 결정
  • exitAlwaysScrollBehavior : 사용자가 내부 content를 스크롤해 올리면 하단 앱 바가 접히고, 스크롤해 내리면 다시 나타납니다.

 

Snackbar

Snackbar는 화면 하단에 표시되는 알림 역할을 합니다.

일반적으로 Scaffold에서 제공하는 SnackbarHost를 통해 Snackbar를 사용합니다.

SnackbarHost는 SnackbarHostState, modifier, SnackbarData를 파라미터로 받습니다.

여기서 SnackbarHostState의 showSnackbar() 함수를 통해 Snackbar를 show 해주고, SnackbarData에 지정한 값에 따라 Snackbar를 delay 해주고 dismiss 해줍니다.

Snackbars – Material Design 3

스낵바(snackbar)  |  Jetpack Compose  |  Android Developers

@Composable
fun Snackbar(
    snackbarData: SnackbarData,
    modifier: Modifier = Modifier,
    actionOnNewLine: Boolean = false,
    shape: Shape = MaterialTheme.shapes.small,
    backgroundColor: Color = SnackbarDefaults.backgroundColor,
    contentColor: Color = MaterialTheme.colors.surface,
    actionColor: Color = SnackbarDefaults.primaryActionColor,
    elevation: Dp = 6.dp
): Unit

@Composable
fun SnackbarHost(
    hostState: SnackbarHostState,
    modifier: Modifier = Modifier,
    snackbar: @Composable (SnackbarData) -> Unit = { Snackbar(it) }
): Unit

 

Snackbar 사용 예시

@Composable
fun SnackbarExample() {
    // showSnackbar()는 suspend function이기 때문에 CoroutineScope 사용
    val coroutineScope = rememberCoroutineScope()

    // Snackbar는 SnackbarHost에게 SnackbarHostState를 넘겨줌 
    val snackbarHostState = remember { SnackbarHostState() }

    Scaffold(
        snackbarHost = {
            SnackbarHost(hostState = snackbarHostState)
        }
    ) {
        Button(
            modifier = Modifier.padding(it),
            onClick = {
                coroutineScope.launch {
                    snackbarHostState.showSnackbar(
                        message = "Hello Snackbar!",
                        actionLabel = "닫기",
                        duration = SnackbarDuration.Short
                    )
                }
            }
        ) {
            Text("Snackbar Button")
        }
    }
}