컴포즈 공부 1일차 (코드 형식 및 연습)

기존의 xml을 이용하여 레이아웃을 구성하던 방식과 달리 xml을 사용하지 않기 때문에 프로젝트 내에 없다. 대신 레이아웃을 구성하는 코드는 @Composable 애너테이션이 붙은 “컴포저블 함수”로 구현한다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposePracticeTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background,
                ) {
                    DemoText("Android", 12f)
                }
            }
        }
    }
}

위와 같은 형식으로 구현할 수 있다.

위의 코드에서 ComposePracticeTheme는 액티비티의 사용자 인터페이스를 제공하는데 이는 ui.theme의 Theme에 정의 되어있으며 사용자 인터페이스의 전체적인 커스터마이즈를 제공한다.

Surface는 다른 컴포저블의 배경을 제공한다. 위의 코드의 Surface 함수는 화면 전체에 적용하고, 배경 색을 MaterialTheme에 정의되어 있는 기본 색으로 정의한다는 의미이다.

그리고 본문에서 DemoText("Android", 12f) 이라는 컴포저블 함수를 선언 하는데 이는 액티비티 밖에 다음과 같이 정의 되어 있다.

@Composable
fun DemoText(message: String, fontSize: Float) {
    Text(
        text = message,
        fontSize = fontSize.sp,
        fontWeight = FontWeight.Bold,
    )
}

@Composable 애너테이션을 붙여서 컴포즈 함수로 만들고 Text 컴포저블을 호출하여 인자로 전달 받은 값을 화면에 보여준다.

컴포저블 함수에 @Preview 애너테이션을 붙이면 실행해보지 않고 구현한 뷰를 미리 보고 테스트 해볼 수 있다.

@Preview
@Composable
fun DemoTextPreView() {
    DemoText(message = "Welcome to Android", fontSize = 12f)
}

@Preview 애너테이션을 이와 같이 정의하면 같이 정의하면 앱 내에서의 화면을 볼 수 있다.

@Preview(showSystemUi = true)

DemoSlider 컴포저블 추가하기

DemoSlider 컴포저블은 슬라이드를 현재 슬라이드의 위치와 슬라이드의 위치가 바뀌었을 때 호출할 이벤트 리스너나 람다를 인자로 받을 수 있다.

@Composable
fun DemoSlider(sliderPosition: Float, onPositionChange: (Float) -> Unit) {
    Slider(
        modifier = Modifier.padding(10.dp),
        valueRange = 20f..40f,
        value = sliderPosition,
        onValueChange = { onPositionChange(it) }
    )
}

onValueChange 인자에 onPositionChange 람다를 넣어서 슬라이드의 위치가 변경되면 전달 받은 람다를 호출할 수 있도록 정의할 수 있다.

이를 호출하여 슬라이드의 위치에 따라 텍스트의 크기를 다르게 할 수 있는 컴포저블을 구현할 수 있다.

@Composable
fun DemoScreen() {
    var sliderPosition by remember { mutableStateOf(20f) }

    val handlePositionChange = { position: Float ->
        sliderPosition = position
    }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        DemoText(message = "Welcome to Compose", fontSize = sliderPosition)

        Spacer(modifier = Modifier.height(150.dp))

        DemoSlider(sliderPosition = sliderPosition, onPositionChange = handlePositionChange)

        Text(text = sliderPosition.toInt().toString() + "sp")
    }
}

sliderPosition 변수에 슬라이드의 위치를 remember 키워드를 사용하여 MutableStateOf 객체로 저장한다.

handlePositionChange 변수에는 슬라이드의 위치가 바뀌었을 때 silderPosition 변수에 변경된 슬라이드 위치 값을 넣어 줄 람다를 정의한다.

다음 Column 컴포저블을 통해 다른 컴포저블들을 정의하여 화면에 보여준다. Column 컴포저블은 본문에 정의된 컴포저블들을 정렬하고 화면에 얼만큼 보여줄 지 정의하는 역할을 한다. 위의 코드에서는 앱 화면 전체의 정중앙에 보여주도록 정의 되어있다.