[Android Compose/안드로이드 컴포즈] Use Material Design (Compose 배우기 -3)

Use Material Design

• Compose는 머터리얼 디자인을 원칙으로 지원하도록 빌드되었다.
• 머터리얼 디자인의 모든 요소를 즉시 사용 가능하다.
• Compose로 생성된 프로젝트는 MaterialTheme를 맞춤 설정할 수 프로젝트의 기본 테마를 생성한다. (ui.theme 패키지에서 찾을 수 있음) 따라서 생성된 머터리얼 테마를 래핑 하여 함수에 적용할 수 있다. 

@Composable
fun ExampleActivityTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

[생성된 테마(ui.theme)]

 

위처럼 생성된 머터리얼 테마를 머터리얼 디자인의 세가지 핵심 요소(Color, Typography, shape)를 중심으로 사용방법에 대해 정리해보면 

 

1. Color

• 원하는 색상으로 팔레트를 생성하고 해당 값을 래핑해 테마를 적용할 수 있다.

//다크 모드 팔레트 
private val DarkColorPalette = darkColors(
    primary = Primary500,
    primaryVariant = PrimaryVariant500,
    secondary = Secondary500,
)

//라이트 모드 팔레트 
private val LightColorPalette = lightColors(
    primary = Primary200,
    primaryVariant = PrimaryVariant200,
    secondary = Secondary200

    /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    */
)

[팔레트(ui.theme)]

• 선언 할 수 있는 색상의 종류는 아래와 같다. 

package androidx.compose.material

fun darkColors(
    primary: Color = Color(0xFFBB86FC),
    primaryVariant: Color = Color(0xFF3700B3),
    secondary: Color = Color(0xFF03DAC6),
    secondaryVariant: Color = secondary,
    background: Color = Color(0xFF121212),
    surface: Color = Color(0xFF121212),
    error: Color = Color(0xFFCF6679),
    onPrimary: Color = Color.Black,
    onSecondary: Color = Color.Black,
    onBackground: Color = Color.White,
    onSurface: Color = Color.White,
    onError: Color = Color.Black
): Colors = Colors(
    primary,
    primaryVariant,
    secondary,
    secondaryVariant,
    background,
    surface,
    error,
    onPrimary,
    onSecondary,
    onBackground,
    onSurface,
    onError,
    false
)

fun lightColors(
    primary: Color = Color(0xFF6200EE),
    primaryVariant: Color = Color(0xFF3700B3),
    secondary: Color = Color(0xFF03DAC6),
    secondaryVariant: Color = Color(0xFF018786),
    background: Color = Color.White,
    surface: Color = Color.White,
    error: Color = Color(0xFFB00020),
    onPrimary: Color = Color.White,
    onSecondary: Color = Color.Black,
    onBackground: Color = Color.Black,
    onSurface: Color = Color.Black,
    onError: Color = Color.White
): Colors = Colors(
    primary,
    primaryVariant,
    secondary,
    secondaryVariant,
    background,
    surface,
    error,
    onPrimary,
    onSecondary,
    onBackground,
    onSurface,
    onError,
    true
)

사용 방법 

• 위에 선언한 팔레트에 정의한 색상을 컴포저블의 color에 사용하면 된다.
  • ex) MaterialTheme.colors.primary, MaterialTheme.colors.secondary
• 라이트 모드, 다크 모드에 따라 각각 색상값이 매핑된다

@Composable
fun Button(button: String, onClick: () -> Unit) {
    OutlinedButton(
        onClick = onClick,
        border = BorderStroke(1.dp, Gray20),
        shape = RoundedCornerShape(30)
    ) {
        Text(
            text = button, color = MaterialTheme.colors.primary, fontSize = 14.sp
        )
    }
}

 

2. Typography

• Text 컴포저블에 추가하여 사용할 수 있으며 Typography를 오버 라이딩해 직접 스타일을 설정할 수 있다. 

val Typography = Typography(
    body1 = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
    /* Other default text styles to override
    button = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.W500,
        fontSize = 14.sp
    ),
    caption = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp
    )
    */
)

[Typography(ui.theme)]

• 종류는 아래와 같다

package androidx.compose.material

class Typography internal constructor(
    val h1: TextStyle,
    val h2: TextStyle,
    val h3: TextStyle,
    val h4: TextStyle,
    val h5: TextStyle,
    val h6: TextStyle,
    val subtitle1: TextStyle,
    val subtitle2: TextStyle,
    val body1: TextStyle,
    val body2: TextStyle,
    val button: TextStyle,
    val caption: TextStyle,
    val overline: TextStyle
)

사용 방법 

@Composable
fun TitleCard(title: String) {
    Text(text = title, style = MaterialTheme.typography.h3)
}

@Composable
fun SubTitleCard(subTitle: String) {
    Text(text = subTitle, style = MaterialTheme.typography.subtitle1)
}

 

3. Shape 

• small, medium, large 로 각각 RoundedCornerShape을 설정할 수 있다. 

val Shapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(8.dp),
    large = RoundedCornerShape(12.dp)
)

[Shapes(ui.theme)]

사용 방법

• 컴포저블의 shape에 사용하면 된다.

@Composable
fun Button(button: String, onClick: () -> Unit) {
    OutlinedButton(
        onClick = onClick,
        border = BorderStroke(1.dp, Gray20),
        shape = MaterialTheme.shapes.small
    ) {
        Text(
            text = button, color = MaterialTheme.colors.primary, fontSize = 14.sp
        )
    }
}