반응형
🎯 소개
Jetpack Compose에서 BasicTextField를 사용할 때, 포커스 상태를 감지하는 것은 UI 업데이트 및 사용자 경험 향상에 중요한 요소예요! 😊 본 글에서는 FocusRequester와 onFocusEvent, onFocusChanged Modifier를 활용하여 포커스 상태를 감지하는 방법을 자세히 설명하고, 다양한 예제를 통해 개념을 익힐 수 있도록 도와드릴게요! 🏆
1. 🎈 FocusRequester를 이용한 포커스 제어
📌 FocusRequester란?
FocusRequester는 특정 Composable에 프로그래밍적으로 포커스를 요청할 수 있는 도구예요. 🎯 이를 활용하면 BasicTextField가 화면에 나타날 때 자동으로 포커스를 받을 수도 있고, 버튼 클릭 등의 이벤트를 통해 포커스를 줄 수도 있어요! ✨
📝 예제: FocusRequester를 활용하여 BasicTextField에 포커스 주기
@Composable
fun FocusRequesterExample() {
val focusRequester = remember { FocusRequester() }
val focusManager = LocalFocusManager.current
Column(modifier = Modifier.padding(16.dp)) {
BasicTextField(
value = "",
onValueChange = {},
modifier = Modifier
.focusRequester(focusRequester)
.border(1.dp, Color.Gray)
.padding(8.dp)
)
Spacer(modifier = Modifier.height(10.dp))
Button(onClick = { focusRequester.requestFocus() }) {
Text("✨ 포커스 요청 ✨")
}
Spacer(modifier = Modifier.height(10.dp))
Button(onClick = { focusManager.clearFocus() }) {
Text("🚫 포커스 해제 🚫")
}
}
}
✅ 실행 결과
- "✨ 포커스 요청 ✨" 버튼을 클릭하면 BasicTextField에 포커스가 잡혀요! 😆
- "🚫 포커스 해제 🚫" 버튼을 클릭하면 포커스가 해제돼요! 🙌
2. 🔍 onFocusChanged Modifier를 이용한 포커스 상태 감지
onFocusChanged Modifier를 사용하면 BasicTextField의 포커스 상태가 변할 때마다 이를 감지할 수 있어요! 🧐
📝 예제: onFocusChanged를 이용하여 포커스 상태 확인
@Composable
fun OnFocusChangedExample() {
var isFocused by remember { mutableStateOf(false) }
var text by remember { mutableStateOf("") }
Column(modifier = Modifier.padding(16.dp)) {
BasicTextField(
value = text,
onValueChange = { text = it },
modifier = Modifier
.onFocusChanged { focusState ->
isFocused = focusState.isFocused
}
.border(1.dp, if (isFocused) Color.Blue else Color.Gray)
.padding(8.dp)
)
Spacer(modifier = Modifier.height(10.dp))
Text("👀 포커스 상태: ${if (isFocused) "포커스됨! 🎉" else "포커스 아님! 😴"}")
}
}
✅ 실행 결과
- BasicTextField에 포커스가 잡히면 테두리가 🔵 파란색으로 변경돼요!
- 포커스를 잃으면 테두리가 ⚪️ 회색으로 돌아가요!
- 텍스트 아래에 현재 포커스 상태가 "포커스됨! 🎉" 또는 "포커스 아님! 😴"으로 표시돼요!
3. 🎭 onFocusEvent Modifier를 이용한 포커스 상태 감지
onFocusEvent Modifier를 사용하면 더 세밀한 포커스 상태 변경을 감지할 수 있어요! 🧐
📝 예제: onFocusEvent를 활용한 포커스 상태 감지
@Composable
fun OnFocusEventExample() {
var isFocused by remember { mutableStateOf(false) }
var text by remember { mutableStateOf("") }
Column(modifier = Modifier.padding(16.dp)) {
BasicTextField(
value = text,
onValueChange = { text = it },
modifier = Modifier
.onFocusEvent { focusState ->
isFocused = focusState.isFocused
}
.border(2.dp, if (isFocused) Color.Green else Color.Red)
.padding(8.dp)
)
Spacer(modifier = Modifier.height(10.dp))
Text("🎯 현재 포커스 상태: ${if (isFocused) "활성화! 💚" else "비활성화! ❤️"}")
}
}
🎀 결론
Jetpack Compose에서 BasicTextField의 포커스 상태를 감지하는 방법으로 FocusRequester, onFocusChanged, onFocusEvent를 사용할 수 있어요! 🎯 각각의 방법은 특정 상황에서 더 적합할 수 있으니, 원하는 기능에 맞춰 선택해서 사용해 보세요! 😊
📝 요약
방법 | 주요 기능 |
🎯 FocusRequester | 특정 시점에 프로그래밍적으로 포커스를 요청하거나 해제! 🔄 |
🔍 onFocusChanged | 포커스 상태 변화 감지 및 UI 업데이트! 🎨 |
🎭 onFocusEvent | 세밀한 포커스 이벤트 감지! 🔎 |
이제 직접 실습하면서 포커스 관리 방법을 익혀보세요! 🚀💡
반응형