[Jetpack Compose] 1. Column, Row, Text, Spacer

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

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

---

Theme

테마를 바꾸고 싶다면

ui.theme 안의 파일들을 건드리면 된다

---

Composable, Preview

Composable 함수는 대문자로 시작

 

@Preview

→ 미리보기 할 수 있음

→ 물론, 여러개 만들 수 있음

---

Text

textView를 띄우고 싶을 때 사용

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

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

---

2개를 띄우면 겹침

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

이를 피하기 위해 Column 또는 Row를 사용함

---

Column

수직으로 배열할 때 사용

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

---

Row

수평으로 배열할 때 사용

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

---

Spacer

간격을 두고 싶을 때 사용

(아래 코드는 16dp 만큼 간격을 띄움)

@Preview(showBackground = true)
@Composable
fun TestView() {
    Row {
        Text("Hello")
        Spacer(Modifier.width(16.dp))
        Text("Android")
    }
}