[Compose UI] Card

Card 예시 이미지(https://developer.android.com/images/reference/androidx/compose/material/cards.png)

 

Card는 단일 주제에 대한 컨텐츠를 담고 있는 Surface이다. 즉 Composable function이다.

 

Card의 파라미터

다양한 파라미터를 활용하여 Card를 확장 및 꾸밀 수 있다. 

• onClick - callback to be called when the card is clicked
• modifier - Modifier to be applied to the layout of the card.
• enabled - Controls the enabled state of the card. When false, this card will not be clickable
• shape - Defines the card's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.
  backgroundColor - The background color.
• contentColor - The preferred content color provided by this card to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this card.
• border - Optional border to draw on top of the card
• elevation - The z-coordinate at which to place this card. This controls the size of the shadow below the card.
• interactionSource - the MutableInteractionSource representing the stream of Interactions for this Card. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this card in different Interactions.

 

Card 함수 시그니처

@ExperimentalMaterialApi
@Composable
@NonRestartableComposable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    border: BorderStroke? = null,
    elevation: Dp = 1.dp,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
) {
    Surface(
        onClick = onClick,
        modifier = modifier,
        enabled = enabled,
        shape = shape,
        color = backgroundColor,
        contentColor = contentColor,
        border = border,
        elevation = elevation,
        interactionSource = interactionSource,
        content = content
    )

 

Card에 그림자 넣어 사실적으로 표현하기 (elevation)

Card() 의 elevation 항목은 고도를 추가하여 Card에 그림자 효과를 주어 Card와 배경 간의 대비를 적용해준다. elevation을 적용하기 전에는 배경에 스티커가 붙어있듯이 대비효과 없는 것을 볼 수 있다.

Card에 elevation 효과를 주면,

Card(
    modifier = modifier.padding(8.dp),
    elevation = 6.dp
) {
    ...
  }
}

아래와 같이 대비효과가 적용 된 것을 볼 수 있다.