Android(kotlin) - JetPack Compose - TextField

TextField

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Person

import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.dong.ui.theme.MyComposeStudyTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeStudyTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    textFieldContainer()
                }
            }
        }
    }
}
/*
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,(입력란 위에 표시되는 레이블)
    placeholder: @Composable (() -> Unit)? = null, (입력란에 힌트로 표시되는 텍스트)
    leadingIcon: @Composable (() -> Unit)? = null,  (왼쪽에 아이콘 지정)
    trailingIcon: @Composable (() -> Unit)? = null,  (오른쪽에 아이콘 지정)
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions(),
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = TextFieldDefaults.TextFieldShape,
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
 */

@Composable
fun textFieldContainer(){

    // 글자의 상태를 저장
    var userInput by remember {
        mutableStateOf(TextFieldValue())
    }

    var phoneNumberInput by remember {
        mutableStateOf(TextFieldValue())
    }

    var passwordInput by remember {
        mutableStateOf(TextFieldValue())
    }

    // 비밀번호 입력 textField에 우측 버튼을 누르면 입력한 내용이 보이고 안보이게 하기 위해
    var shouldShowPassword by remember {
        mutableStateOf(false)
    }

    // shouldShowPassword의 값에 따라 이미지를 지정
    val passwordResource : (Boolean) -> Int = {
        if(it) { // true
            R.drawable.baseline_visibility_24
        }else{
            R.drawable.baseline_visibility_off_24
        }
    }

    Column(
        Modifier
            .padding(16.dp)
            .fillMaxWidth()
        , verticalArrangement = Arrangement.SpaceEvenly
    ){
        // singleLine 지정ㅇㅇㅇㅇㅇ
        TextField(
            modifier = Modifier.fillMaxWidth(),
            value = userInput,
            singleLine = true, // 한 줄만 작성할 수 있도록
            onValueChange = { userInput = it }, // 유저가 입력한 값(it)을 remember에 저장
            label = { Text("singleLine") },
            placeholder = { Text("텍스트를 작성해주세요.")}
        )

        // maxLine 지정 
        TextField(
            modifier = Modifier.fillMaxWidth(),
            value = userInput,
            maxLines = 3,  // 최대 line수 지정
            onValueChange = { userInput = it },
            label = { Text("maxLine") },
            placeholder = { Text("텍스트를 작성해주세요.")}
        )

        // outLinedTextField
        // keyboard 옵션 지정 - number
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = phoneNumberInput,
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType =  KeyboardType.Phone), // 키보드 타입 지정
            onValueChange = { phoneNumberInput = it },
            label = { Text("OutlinedTextField(Number)") },
            placeholder = { Text("010-****-****")}
        )

        // outLinedTextField
        // keyboard 옵션 지정 - email
        // leadingIcon 적용 (TextField 왼쪽 아이콘)
        // trailingIcon 적용 (TextField 오른쪽 아이콘)
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = phoneNumberInput,
            singleLine = true,
            leadingIcon = { Icon(  // 왼쪽 Icon 지정
                imageVector = Icons.Default.Email
                , contentDescription = null
            )},
            trailingIcon = { Icon( // 오른쪽에 Icon 지정
                imageVector = Icons.Default.CheckCircle
                , contentDescription = null
            )},
            keyboardOptions = KeyboardOptions(keyboardType =  KeyboardType.Email), // 키보드 타입 지정
            onValueChange = { phoneNumberInput = it },
            label = { Text("OutlinedTextFiel(email))") },
            placeholder = { Text(" @ .com")}
        )

        // Button 추가
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth()
            ,value = phoneNumberInput
            ,singleLine = true
            ,leadingIcon = { Icon(  // 왼쪽 Icon 지정
                imageVector = Icons.Default.Email
                , contentDescription = null
            )}
            ,trailingIcon = {
                IconButton(onClick = {

                }) {
                    Icon( // 오른쪽에 Icon 지정
                        imageVector = Icons.Default.CheckCircle
                        , contentDescription = null
                    )
                }
            }
            ,keyboardOptions = KeyboardOptions(keyboardType =  KeyboardType.Email) // 키보드 타입 지정
            ,onValueChange = { phoneNumberInput = it }
            ,label = { Text("buttonIcon") }
            ,placeholder = { Text(" @ .com")}
        )

        // password
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth()
            ,value = passwordInput
            ,singleLine = true
            ,leadingIcon = { Icon(  // 왼쪽 Icon 지정
                imageVector = Icons.Default.Person
                , contentDescription = null
            )}
            ,trailingIcon = {
                IconButton(onClick = {
                    // 버튼이 눌려지면 비밀번호가 보이도록
                    shouldShowPassword = !shouldShowPassword
                }) {
                    Icon(painter = painterResource(
                        id = passwordResource(shouldShowPassword))
                        , contentDescription = null
                    )
                }
            }
            // 비밀번호가
            , visualTransformation = if(shouldShowPassword) VisualTransformation.None
                                     else PasswordVisualTransformation()
            ,keyboardOptions = KeyboardOptions(keyboardType =  KeyboardType.Password) // 키보드 타입 지정
            ,onValueChange = { passwordInput = it }
            ,label = { Text("password") }
            ,placeholder = { Text("password")}
        )

    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyComposeStudyTheme {
        textFieldContainer()
    }
}

• singleLine과 maxLine에 같은 입력을 넣었을 때 singleLine속성은 한 줄로 유지 되는 것을 확인할 수 있습니다. 반면 maxLine=3을 지정해 두었기에 최대 3줄 까지만 줄이 생성됩니다.

• 우측 눈 모양 버튼을 누르면 입력한 비밀번호가 보이는 것을 확인할 수 있습니다.
• VisualTransformation: shouldShowPassword가 true이면 VisualTransformation.None으로 설정하여 비밀번호를 보여주고, 그렇지 않으면 PasswordVisualTransformation()을 사용하여 비밀번호를 가려줍니다.