[안드로이드] Jetpack Compose 찍먹 해보기 - 2편: 텍스트 출력
지난 시간에는 Compose 프로젝트를 만들어보고 간단한 코드를 살펴보았는데요, 이번에는 직접 코드를 수정하여 텍스트를 출력해봅니다.
Columns & Rows
일단 아래 코드처럼 Hello와 World를 출력해봅시다.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Text("Hello")
Text("World")
}
}
}
에뮬레이터를 실행하여 결과를 보면 다음과 같이 두 글자가 겹쳐져 있는 것을 보실 수 있습니다.
이 합쳐진 문자열들을 세로, 혹은 가로로 분리하기 위해서는 Row
, Column
을 사용해야 합니다. 아래 코드와 같이 말이죠.
// 코드 생략..
super.onCreate(savedInstanceState)
setContent {
Row{
Text("Hello")
Text("World")
}
}
결과를 실행해보면 두 문자열이 가로로 배치된 것을 보실 수 있습니다.
만약 Row
대신 Column
을 사용한다면 세로로 배치 되겠죠?
텍스트 중앙 배치
텍스트를 화면 중앙에 놓고자 할때는 horizontalAlignment
를 사용하시면 됩니다. 아래 코드를 입력하시고 결과 화면을 띄워봅시다.
super.onCreate(savedInstanceState)
setContent {
Column(horizontalAlignment = Alignment.CenterHorizontally){
Text("Hello")
Text("World")
}
}
엥? 달리진게 없는데요 이 사기꾼
언뜻 보기에는 달라진 것이 없는 것 처럼 보입니다.
그러나 문자열 하나 하나를 자세히 보면 텍스트 상자안에서만 가운데 정렬이 된 것을 볼 수 있습니다.
위 사진과 같이 텍스트 박스의 사이즈가 wrap content 되어 한정된 공간 안에서만 가운데 정렬이 된 것을 보실 수 있습니다.
그러면 텍스트가 전체화면의 가운데에 오게 하려면 어떻게 해야 할까요??
간단합니다. 텍스트 박스의 사이즈를 키워주면 되겠죠?
이렇게 텍스트 상자의 사이즈를 키워줄 때는 modifier
를 사용합니다.
다음 코드와 같이 fillMaxSize
를 이용해주면 텍스트 박스의 크기는 화면을 꽉 채우게 됩니다.
setContent {
Column(
Modifier.fillMaxSize(), // xml에서의 match_parent와 같은 의미입니다.
horizontalAlignment = Alignment.CenterHorizontally){
Text("Hello")
Text("World")
}
}
결과를 확인해 보면 전체화면에서 텍스트들이 가로 중앙에 배치된 것을 보실 수 있습니다.
그외에도 Modifier의 속성을 살펴보면, padding을 활용한 여백지정, 배경 색 지정 등을 하실 수 있는 것을 확인하실 수 있습니다.
다음 코드와 같이 입력하고, 결과를 출력해봅시다.
setContent {
Column(
Modifier.fillMaxSize()
.background(Color.Green),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally){
Text("Hello")
Text("World")
}
}
텍스트가 화면의 정 중앙에 온 것을 확인할 수 있습니다.
여기서 참고해야할 것은 Column으로 지정하실때 수직 가운데 정렬은 Arrangement
를 이용하고 수평 가운데 정렬은 Alignment
를 이용했습니다.
그러나 Row로 지정하실 때에는 반대로 수평 가운데 정렬에는 Arrangement
를 사용하시고, 수직 가운데 정렬에는 Alignment
를 사용하여야 합니다.
Author And Source
이 문제에 관하여([안드로이드] Jetpack Compose 찍먹 해보기 - 2편: 텍스트 출력), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@blucky8649/안드로이드-Jetpack-Compose-찍먹-해보기-2편-텍스트-출력저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)