[Jetpack Compose] 2. 속성 지정

아래 영상을 보고 정리한 게시글입니다.

https://www.youtube.com/watch?v=xszyeIWFsGc&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n 

---

Column을 보게되면,

소괄호 안에 4가지의 parameter가 들어감

---

Content

내용물이 들어감

@Preview(showBackground = true)
@Composable
fun TestView() {
    Column {
        Text("Hello")
        Text("Android")
    }
}

---

Modifier

속성을 지정해 꾸밀 수 있게 해줌

---

배경색

background 안의 color로 배경색 지정

@Preview(showBackground = true)
@Composable
fun TestView() {
    Column (modifier = Modifier
        .background(color = Color.Cyan)) {
        Text("Hello")
        Text("Android")
    }
}

---

padding

padding 안에 크기를 지정해주면 됨

@Preview(showBackground = true)
@Composable
fun TestView() {
    Column (modifier = Modifier
        .background(color = Color.Cyan)
        .padding(16.dp)) {
        Text("Hello")
        Text("Android")
    }
}

---

크기 조절

화면에 꽉 채우겠다 ⇒ fillMaxSize()

@Preview(showBackground = true)
@Composable
fun TestView() {
    Column (modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Cyan)
        .padding(16.dp)) {
        Text("Hello")
        Text("Android")
    }
}

---

정렬

수평 정렬

horizontalAlignment

@Preview(showBackground = true)
@Composable
fun TestView() {
    Column (modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Cyan)
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally) {
        Text("Hello")
        Text("Android")
    }
}

---

수직 정렬

verticalArrangement

@Preview(showBackground = true)
@Composable
fun TestView() {
    Column (modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Cyan)
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.SpaceBetween) {
        Text("Hello")
        Text("Android")
    }
}