[Android] Compose 컴포넌트 - Text와 TextField

Text

Text는 XML에서의 TextView와 같은 기능을 합니다.

androidx.compose.material3  |  Android Developers

표시 텍스트  |  Jetpack Compose  |  Android Developers

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
): Unit

• text : 표시할 텍스트
• modifier : 텍스트에 적용할 modifier 설정
• color : 텍스트 색상 설정
• fontSize : 폰트 크기 설정 
• fontStyle : 폰트 스타일(normal, italic) 설정 
• fontWeight : 폰트 굵기 설정 
• fontFamily : 폰트 종류 설정 
• letterSpacing : 텍스트 사이의 간격 설정
• textDecoration : 텍스트에 Underline(밑줄), LineThrough(가로줄)을 설정
• textAlign : 텍스트의 정렬을 설정할 수 있는 옵션
• lineHeight : 줄 간격을 설정할 수 있는 옵션
• overflow : overflow(글자 넘침)가 일어났을 때 어떻게 보일 것인지 설정
• softWrap : 글자가 영역을 넘어갔을 때 자동으로 줄을 바꿀 것인지 설정
• maxLines : 최대 몇 줄까지 보여질지 결정
• onTextLayout : softWrap 등으로 인해 텍스트의 크기가 달라졌을 때의 Callback
• style : 텍스트의 스타일 지정

 

TextField

TextField를 사용하면 사용자가 Text를 입력하고 수정할 수 있습니다.

이 때, remember API를 함께 사용해야 TextField에서 Text 입력이 정상적으로 이루어집니다.

• val mutableState = remember { mutableStateOf(...) }
• var value by remember { mutableStateOf(...) }
• val (value, setValue) = remember { mutableStateOf(...) }

Text fields – Material Design 3

사용자 입력 처리  |  Jetpack Compose  |  Android Developers

@Composable
fun TextField(
    value: String,
    onValueChange: (String) -> 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,
    prefix: @Composable (() -> Unit)? = null,
    suffix: @Composable (() -> Unit)? = null,
    supportingText: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = TextFieldDefaults.shape,
    colors: TextFieldColors = TextFieldDefaults.colors()
): Unit

• value : TextField에 표시할 텍스트
• onValueChange : 입력된 텍스트가 업데이트될 때마다 호출되는 Callback
• modifier : TextField에 적용할 modifier 설정
• textStyle : 입력된 텍스트에 적용할 스타일 설정
• label : TextField 컨테이너 내부에 표시되는 라벨 설정
• visualTransformation : 입력된 텍스트의 시각적 표현에 대한 변환 설정
  
  • VisualTransformation.None : 있는 그대로 표시 (기본값)
  • PasswordVisualTransformation() : 별표(*) 마스킹 표시 (비밀번호와 같은 민감한 정보)
  • 사용자 정의 클래스 : 사용자가 원하는 대로 텍스트 표시 (신용카드 번호, 전화번호 형식, 천 단위로 콤마(,) 처리 등)