Jetpack Compose

Jetpack Compose 기초 알아보기

Jetpack Compose는 UI 개발을 간소화하기 위해 설계된 최신 툴킷입니다. 반응형 프로그래밍 모델을 Kotlin 프로그래밍 언어의 간결함 및 사용 편의성과 결합합니다.

@Composale 어노테이션 선언을 통해, 해당 함수가 하나의 컴포넌트(UI 구성요소)처럼 사용됩니다.

(제가 이해하기로는 React의 SPA처럼 작동하는 것 같습니다. 해당 함수를 import 해서 다른 함수에서 가져다쓰고, HTML 형식이 아닌 xml 형식일 뿐입니다.)

@Composable
fun StartPage(navController: NavHostController, loginViewModel: LoginViewModel, onSignInClick: () -> Unit) {
    val profileUrl by loginViewModel.profileUrl.collectAsState()

    if (profileUrl != null) {
        navController.navigate("main") {
            popUpTo("start") { inclusive = true }
        }
    }

    Box {
        StartImage(modifier = Modifier.fillMaxSize())

        GoogleLoginButton(
            onClick = onSignInClick,
            modifier = Modifier
                .align(Alignment.Center)
                .offset(y = LocalConfiguration.current.screenHeightDp.dp * 0.25f)
        )
    }
}

Box, Button 등과 같은 Jetpack Compose에 들어있는 요소들을 이용하여 UI를 렌더링할 수 있습니다. 위의 코드에서 쓰인 StartImage와 GoogleLoginButton은 다른 함수로 빼서 정의해줄 수 있습니다.(커스텀)

@Preview(showBackground = true, uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES)
@Composable
fun ScarePreview() {
    ScareTheme {
        StartPage(navController = rememberNavController())
    }
}

@Preview를 붙이면 직접 앱 에뮬레이터를 실행하지 않아도 해당 화면을 확인할 수 있습니다. 해당 Preview 화면에서는 그 화면 안에서의 이벤트와 UI 동작을 볼 수 있고, routing이나 실제 동작을 확인하기 위해서는 앱 에뮬레이터를 이용하여 확인할 수 있습니다.

uiMode에서 UI_MODE_NIGHT_YES를 해주면 다크모드 확인, 그게 아니라면 라이트모드(기본)으로 확인됩니다.

Theme.kt 안에 설정 요소들

모바일의 라이트모드, 다크모드에 맞춰서 UI의 색상을 입힐 수 있습니다. 여기에서 정의된 AppTheme를 가장 메인 동작인 MainActivity에서 묶어주어 동일한 테마를 낼 수 있도록 합니다.

/* 모드 예시 */
private val DarkColorScheme = darkColorScheme(
    background = DarkNavy,
    tertiary = NeonYellow,
    onSurface = White,
)

private val LightColorScheme = lightColorScheme(
    background = White,
    tertiary = Green,
    onSurface = DarkNavy,
)

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
}

• primary 앱의 주요 브랜드 색상입니다. 앱 바, 버튼, 기타 주요 UI 요소에 사용됩니다.
  
• secondary primary 색상을 보완하는 색상입니다. 탭, 슬라이더, 진행률 표시줄과 같은 보조 UI 요소에 사용됩니다.
  
• tertiary primary 및 secondary 색상과 대비되는 색상입니다. 강조 표시, 링크, 아이콘과 같은 요소에 사용됩니다.
  
• background 앱의 배경 색상입니다.
  
• surface 카드, 시트, 메뉴와 같은 표면의 색상입니다.
  
• onPrimary primary 색상 위에 표시되는 텍스트 및 아이콘의 색상입니다.
  
• onSecondary secondary 색상 위에 표시되는 텍스트 및 아이콘의 색상입니다.
  
• onTertiary tertiary 색상 위에 표시되는 텍스트 및 아이콘의 색상입니다.
  
• onBackground background 색상 위에 표시되는 텍스트 및 아이콘의 색상입니다.
  
• onSurface surface 색상 위에 표시되는 텍스트 및 아이콘의 색상입니다
  

Color.kt

1. 16진수의 Hex 값으로 지정하는 방법

val White = Color(oxFFFFFFFF)

Figma에서는 #FFFFFF 이렇게 여섯 자리만 주고, Android에서는 8자리를 요구하고 있었습니다. 그래서 방법을 찾아보니 rgba로 지정하여 사용할 수 있었습니다.

2. rgba 값으로 지정하는 방법

val White = Color(255,255,255)
val NeonYellow = Color(229, 253, 80)
val DarkNavy = Color(39, 35, 58)

//투명도 적용
val DarkNavy50 = Color(39, 35, 58, 0.5)

rgb 값을 쓰고, 뒤에 alpha(투명도)값을 입력해주면 됩니다. Color 객체에서 alpha 값을 설정할 때는 0.0에서 1.0 사이의 Float 값을 쓰면 됩니다.

Color.kt에 정의된 색깔 변수를 다른 곳에 import 할 때는 Color.White 가 아닌 White로 변수만 적어주셔야 합니다. Color로 접근하여 변수를 꺼내면, 기본 Color에 정의되어 있는 색깔들로 구성됩니다.