Compose 학습 - 1 (TextView & Slider)

Chapter  3

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeStudyTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    DemoScreen()
                }
            }
        }
    }
}

 

 

• ComposeStudyTheme는 Activity에서 사용할 색상, 글꼴, 모양을 정의하고 앱 사용자 인터페이스의 전체 테마를 커스머마이즈할 수 있는 중심 영역
• Surface : 배경을 어떻게 채울지 결정

TextView

 

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

• @Composable annotation을 이용해 컴포저블로 표시된다. 

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

• @Preview : 미리보기를 지원

Chapter 4

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

@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 Android", fontSize = 12f)

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

        DemoSlider(
            sliderPositions = sliderPosition,
            onPositionChange = handlePositionChange
        )
        
        Text(
            style = MaterialTheme.typography.headlineLarge,
            text = sliderPosition.toInt().toString() + "sp"
        )
    }
}

 

• Compose 런타임 시스템은 데이터 변경을 감지하고 사용자 인터페이스를 재구성한다. 그렇게 된다면 sliderPosition이 20으로 계속 초기화 되기 때문에 by remember을 통해 값을 기억하게 해준다.

 

결과 스크린샷 :