Jetpack Compose는 Android 애플리케이션의 UI를 선언적 방식으로 구축할 수 있게 해주는 최신 툴킷입니다. Compose를 사용하면 UI 요소들을 컴포저블 함수로 정의하고 관리할 수 있습니다. 이 글에서는 Compose에서 자주 사용되는 Text와 InputText 관련 위젯에 대해 설명하고, 각각의 사용법과 유용한 기능들을 예시와 함께 소개합니다.
1. Text 위젯
Text 위젯은 Compose에서 가장 기본적인 텍스트 출력을 위한 위젯입니다. Text 위젯을 사용하면 앱 내에서 텍스트를 쉽게 표시할 수 있습니다. Text 위젯은 다양한 텍스트 스타일, 색상, 크기 등을 적용할 수 있어 UI를 세밀하게 디자인하는 데 유용합니다.
사용 예시:
@Composable
fun SimpleText() {
Text(
text = "Hello, Jetpack Compose!",
fontSize = 20.sp, // 폰트 크기 설정
color = Color.Black, // 텍스트 색상 설정
fontWeight = FontWeight.Bold, // 텍스트 굵기 설정
modifier = Modifier.padding(16.dp) // 텍스트 주변 패딩 설정
)
}
설명: 위 코드에서는 Text 위젯을 사용하여 "Hello, Jetpack Compose!"라는 문구를 화면에 표시하고 있습니다. fontSize, color, fontWeight, modifier 등 다양한 속성을 설정하여 텍스트 스타일을 지정할 수 있습니다.
2. TextField (InputText) 위젯
TextField는 입력 가능한 텍스트를 처리하는 위젯으로, 사용자가 텍스트를 입력할 수 있게 합니다. TextField는 Compose에서 사용자와의 상호작용을 처리할 때 자주 사용되는 기본적인 입력 위젯입니다. TextField는 상태 관리를 통해 실시간으로 입력 값을 처리할 수 있습니다.
사용 예시:
@Composable
fun SimpleTextField() {
var text by remember { mutableStateOf("") } // 텍스트 상태 저장
TextField(
value = text, // TextField에 표시할 텍스트 값
onValueChange = { newText -> text = newText }, // 텍스트 변경 시 호출될 콜백 함수
label = { Text("Enter your name") }, // 텍스트 필드의 라벨
placeholder = { Text("Name") }, // 텍스트 필드의 플레이스홀더
modifier = Modifier.fillMaxWidth().padding(16.dp) // 텍스트 필드 크기 및 패딩 설정
)
}
설명: TextField는 사용자가 입력하는 값을 처리할 수 있게 해줍니다. value에는 입력된 텍스트를 저장하고, onValueChange를 통해 텍스트가 변경될 때마다 상태를 업데이트합니다. label과 placeholder를 설정하여 텍스트 필드에 라벨과 플레이스홀더를 추가할 수 있습니다.
3. TextField와 Text 연결하기
종종 Text와 TextField를 함께 사용하여 사용자가 입력한 내용을 실시간으로 표시할 수 있습니다. 아래 예시는 TextField에서 입력한 텍스트를 Text로 즉시 출력하는 예시입니다.
사용 예시:
@Composable
fun LiveTextPreview() {
var text by remember { mutableStateOf("") } // 텍스트 상태 저장
Column(modifier = Modifier.padding(16.dp)) {
TextField(
value = text,
onValueChange = { newText -> text = newText },
label = { Text("Enter text") }
)
Spacer(modifier = Modifier.height(16.dp))
Text("입력한 텍스트: $text", fontSize = 18.sp)
}
}
설명: 사용자가 TextField에 텍스트를 입력할 때마다 text 상태가 변경되고, 변경된 내용이 Text 위젯을 통해 화면에 실시간으로 표시됩니다. 이처럼 Text와 TextField를 함께 사용하면 동적인 UI를 쉽게 구현할 수 있습니다.
4. Text 스타일링
Text 위젯은 다양한 스타일링 옵션을 제공합니다. fontFamily, fontWeight, fontStyle, letterSpacing, lineHeight 등을 통해 텍스트의 모양을 세밀하게 조정할 수 있습니다.
사용 예시:
@Composable
fun StyledText() {
Text(
text = "Stylized Text in Jetpack Compose",
style = TextStyle(
fontSize = 22.sp, // 폰트 크기
fontWeight = FontWeight.Bold, // 폰트 두께
fontStyle = FontStyle.Italic, // 폰트 스타일
letterSpacing = 1.5.sp, // 문자 간격
lineHeight = 30.sp, // 줄 간격
color = Color.Blue // 텍스트 색상
),
modifier = Modifier.padding(16.dp)
)
}
설명: TextStyle을 사용하여 텍스트의 다양한 스타일을 설정할 수 있습니다. fontWeight, fontStyle, letterSpacing, lineHeight 등을 조정하여 텍스트의 가독성과 디자인을 향상시킬 수 있습니다.
6. 결론
Jetpack Compose에서의 Text와 TextField 위젯은 UI를 구성하는 기본적인 요소로, 텍스트를 출력하거나 사용자 입력을 받을 때 필수적으로 사용됩니다. Text 위젯을 활용하여 다양한 스타일로 텍스트를 표시하고, TextField 위젯을 사용하여 사용자 입력을 처리할 수 있습니다. 또한, Text와 TextField를 함께 사용하여 실시간으로 변하는 UI를 구성할 수 있습니다.