[Android] Compose (basic)

Jetpack Compose

• UI 개발을 간소화하고 간편하게 할 수 있도록 도와주는 툴킷.
• 기존의 UI는 명령형 방식이었지만, Compose는 선언형 방식. UI가 어떻게 보일지에 대한 구현에서 무엇을 보여주면 되는지에 대한 구현으로 변경.
• 뷰의 상태만 선언하여 구현 부분은 프레임워크에게 맡기는 방식. (알아서 만들어 줌)
• 데이터가 변경되면 프레임 워크가 알아서 해당 함수들을 재호출(리컴포지션)하여 View를 업데이트. 적은 코드, 유지보수, 재사용 및 확장성 용이.
• 기존에는 xml에 직접 그리고 Activity에서 findViewById, ViewBinding, DataBinding을 통해 컴포넌트에 접근 했지만, Compose는 Kotlin을 통해 직접 UI를 다룰 수 있음

 

xml 대신 setContent 내부에 정의를 하여 뷰를 구현함 

class RallyActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // composable
        }
    }
}

Kotlin을 통해서 모든 UI 작업을 할 수 있음

// dark 모드 테마 정의
private val DarkColorScheme = darkColorScheme(
    surface = Blue,
    onSurface = Navy,
    primary = Navy,
    onPrimary = Chartreuse
)

// light 모드 테마 정의
private val LightColorScheme = lightColorScheme(
    surface = Blue,
    onSurface = White,
    primary = LightBlue,
    onPrimary = Navy
)


// deprecated
// 기본 테마 정의
@Suppress("DEPRECATION")
@Composable
fun BasicsCodelabTheme(
    // 테마가 다크테마인지?
    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
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            (view.context as Activity).window.statusBarColor = colorScheme.primary.toArgb()
            ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme
        }
    }

    // 테마 지정
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

// TextView 생성
Text(text = "hello,")

Material Design을 가진 컴포넌트도 자동 생성

https://m3.material.io/components/buttons/implementation/android 참고

// compose는 다양한 버튼 사양을 지원하는데
// 여기서는 Text를 ElevatedButton으로 래핑하는 Elevated Button을 사용
ElevatedButton(
      onClick = {
           expanded = !expanded
       }
     ) {
           Text(
              text = if (expanded) stringResource(R.string.show_less) else stringResource(
                        R.string.show_more
                     )
               )
       }

@Composable 어노테이션을 붙여야함

compose ui를 사용하려면 Composable 어노테이션을 선언해야함

@Composable은 클래스단위에는 붙일 수 없고, 함수 단위에 붙일 수 있음
@Composable을 붙어야 Text 같이 선언형 UI를 구현할 수 있음

재호출(리컴포지션)

데이터가 변경되면 프레임 워크가 알아서 해당 함수들을 재호출(리컴포지션)하여 View를 업데이트. 적은 코드, 유지보수, 재사용 및 확장성 용이.

 

Recomposition(리컴포지션) & remember

Compose 앱은 구성 가능한 함수(컴포저블)를 호출하여 데이터를 UI로 변환한다.
데이터가 변경되면 Compose는 새 데이터로 이러한 함수를 다시 실행하여 업데이트된 UI를 만든다.
이 과정을 리컴포지션이라고 한다.

Compose는 데이터가 변경된 요소만 다시 구성하고, 영향을 받지않은 요소는 건너뛴다.

@Composable에 내부 상태를 추가하려면 mutableStateOf를 통해 관리한다.
이 함수를 사용하면 Compose가 State를 읽는 함수를 재구성한다.

State 및 MutableState는 어떤 값을 보유하고 그 값이 변경될 때마다 UI 업데이트(리컴포지션)를 트리거하는 인터페이스이다.

하지만 @Composable 내의 변수에 mutableStateOf만 할당해서는 할 수 없다.
변경가능한 새 상태로 상태를 재설정하여 컴포저블을 다시 호출할떄는 언제든 리컴포지션이 일어날 수 있기 떄문에
여러 리컴포지션간에 상태를 유지하려면 remember를 사용하여 변경 가능한 상태를 기억해야한다.

var state by remember { mutableStateOf(false) }