[Jetpack Compose] Column, Row, Text

Text

말 그대로 텍스트를 화면에 출력시켜준다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            InflearnProjectTheme {
                Surface(color = MaterialTheme.colors.background) {
                    Text("Hello")
                }
            }
        }
    }
}

이때 한줄이 아닌 여러줄을 출력시키고자 할 경우 Text를 여러번 호출시킬 수 있다. 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            InflearnProjectTheme {
                Surface(color = MaterialTheme.colors.background) {
                    Text("Hello")
                    Text("Android")
                }
            }
        }
    }
}

단, 이렇게 글자가 겹치게 된다. 이러한 상황을 방지하고자 사용하는 것이 Column과 Row이다. 

 

Column

글자들을 세로로 정렬해준다. 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            InflearnProjectTheme {
                Surface(color = MaterialTheme.colors.background) {
                    Column{
                        Text("Hello")
                        Text("Andoroid")
                    }
                }
            }
        }
    }
}

이렇게 세로로 정렬시켜 준다. 

 

Row

Column이 세로라면 당연히 가로도 있을 것이다. Row를 사용하면 가로로 정렬된다. 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            InflearnProjectTheme {
                Surface(color = MaterialTheme.colors.background) {
                    Row{
                        Text("Hello")
                        Text("Andoroid")
                    }
                }
            }
        }
    }
}

그런데 우리가 글을 쓰다보면 띄어쓰기를 사용한다. 당연히 Jetpack Compose에서도 해당 기능이 있다.

 

Spacer

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            InflearnProjectTheme {
                Surface(color = MaterialTheme.colors.background) {
                    Row{
                        Text("Hello")
                        Spacer(Modifier.width(16.dp))
                        Text("Andoroid")
                    }
                }
            }
        }
    }
}

Spacer를 사용하면 띄어쓰기 기능이 가능하다. 

Modifier는 길이 조정을 위해서 사용하고, dp는 단위이다. 16이라는 int값 뒤에 .dp 라고 사용해준다면 16dp값 만큼 띄어쓰기를 해준다.

 

 

위에서 Column이나 Row를 따라서 코드를 타이핑 해봤다면 뭔가 이상한것을 느꼈을거다.

Column을 타이핑하면 자동완성으로 Column(){}이 생성될 것이다.

소괄호 내부에는 다양한 내용을 작성할 수 있지만, 지금은 Modifier에 대한 설명만 하겠다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            InflearnProjectTheme {
                Surface(color = MaterialTheme.colors.background) {
                    Column(
                        modifier = Modifier
                            .fillMaxSize() // 화면 전체 적용
                            .background(color = Color.Blue) // 배경색 설정
                            .padding(16.dp), // 패딩 설정
                        horizontalAlignment = Alignment.CenterHorizontally, // 가운데 정렬
                        verticalArrangement = Arrangement.SpaceBetween // 텍스트 사이에 스페이스 넣기
                    ){
                        Text("Hello")
                        Text("Andoroid")
                    }
                }
            }
        }
    }
}

이렇게 다양하게 사용될 수 있다.