Compose를 사용하면서 사용법을 간단하게 정리하려고 한다.
XML 기반의 레이아웃에서 EditText를 Compose에서 사용하기 위해서는 TextField를 사용해야 한다.
아무런 설정을 하지 않고 사용할 경우, 아래와 같이 사용할 수 있으며 실제 모양은 다음과 같이 나타난다.
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = {
text = it
}
)
underLine을 제거하기 위해서는 colors 속성을 설정함으로써 해결할 수 있다. 이때, custom color를 적용하기 위해 TextFieldDefaults.textFieldColors를 사용할 수 있다.
TextFieldDefaults.textFieldColors는 굉장히 다양한 속성들을 포함하고 있으며 이러한 속성들을 통해서 color를 변경하는게 유연하다. 위의 사진에서 underLine을 indicator라고 표현한다. 이걸 제거해보자.
focusedIndicatorColor = Color.Trasnparent- TextField에 focus가 되었을 때의 indicatorColor를 설정할 수 있으며 투명으로 설정한다.
unfocusedIndicatorColor = Color.Trasnparent- TextField에 focus가 되지 않았을 때의 indicatorColor를 설정할 수 있으며 투명으로 설정한다.
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = {
text = it
},
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
textColor = Black
),
shape = RoundedCornerShape(8.dp),
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
)
Ref
Android Developer