Compose TextField Custom - BasicTextField

BasicTextField 

이전에 기본적인 구현 방법인 TextField와 OutlinedTextField를 구현하는 방법을 알아봤었다.

TextField는 사용자에게 선택지가 정해지지 않은 입력을 받기 위해 사용할 수 있는 컴포넌트이다.

그림1. OutlinedTextField

그만큼 자주 사용되어 미리 정의된 기본적인 TextField 스타일이 아닌 커스텀이 필요한 경우가 있다.

그런 경우에 BasicTextField를 사용하여 구현할 수 있다.

BasicTextField 구현

TextField와 OutlinedTextField를 구현해 봤다면 BasicTextField 또한 쉽게 구현할 수 있다.

왜냐하면 TextField와 OutlinedTextField도 결국에는 BasicTextField 사용하여 구현되기 때문인데

결국 BasicTextField에서 몇 개의 스타일을 고정하여 정의한 것이라 할 수 있다.

이런 점들을 보면 BasicTextField를 직접 사용하여 구현한다면 더욱 다양한 스타일로 TextField의 디자인이 가능해진다.

단, 이는 반대로 말하면 기존의 정의되어 있는 것이 없기 때문에 일일이 다 스타일을 지정해주어야만 한다는 의미이다.

그렇기 때문에 보통은 TextField를 활용하는 것이 좋다.

그림2. TextField Custom

BasicTextField(
        value = text, onValueChange = setOnTextChange,
        modifier = Modifier
            .background(Color.LightGray, shape = RoundedCornerShape(20))
            .size(width = 250.dp, height = 50.dp)
            .border(width = 1.dp, color = Color.Gray, shape = RoundedCornerShape(20)),
        textStyle = TextStyle(color = Color.Black, fontSize = 20.sp),
        cursorBrush =  Brush.verticalGradient(colors = listOf(Color(0xFF2193b0), Color(0xFF6dd5ed))),
//        cursorBrush = SolidColor(Color.Green),
        decorationBox = { innerTextField ->
            Row(verticalAlignment = Alignment.CenterVertically) {
                Spacer(modifier = Modifier.width(10.dp))
                Icon(
                    imageVector = Icons.Filled.Search,
                    contentDescription = "Search",
                    tint = Color.Yellow
                )
                Spacer(modifier = Modifier.width(10.dp))
                Box {
                    if (text.isEmpty()) {
                        Text(text = "Enter Text", fontSize = 20.sp, color = Color.Gray)
                    }
                    innerTextField()
                }
            }
        }
    )

• Modifier 
• background : 배경색 수정 
• border : 테두리 수정
• cursorBrush
• 커서의 색 지정 가능
• SolidColor로 1개의 색으로 지정하거나
• Brush.verticalGradient로 여러 색을 섞어 나타낼 수도 있음
• decorationBox
• TextField 내부 배치
• 전달받은 innerTextField 사용하여 TextField 원하는 위치의 배치
• 내부의 Box를 추가하여 Placeholder 구현 가능

참고

전체 코드 | Github