Jetpack [대왕놀] TextView in Compose (Text)

Android View 시스템의 TextView 는 Compose 에서 'Text' 에 매핑된다.

 

#

Text 는 아래와 같은 signature 를 갖고 있다.

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,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
)

 

#

Text 에 stringRes 를 지정하려면 stringResource 함수를 활용하자.

Text(
	text=stringResource(R.string.app_name),
)

 

#

Text 의 fontSize 지정은 fontSize parameter 를 활용한다. Int.sp 함수가 쓰인 것을 주목하자.

Text(
	text="Hello World",
	fontSize=18.sp,
)

 

#

Text 에 bold 를 추가하려면 fontWeight parameter 를 활용한다.

Text(
	text="Hello World",
	fontWeight = FontWeight.Bold,
)

FontWeight 에는 Thin, Light, Normal, Medium, Bold 와 함께 추가적인 값들 (ex. ExtraBold) 이 있으니 사용시 참고해서 사용하자.

 

#

Text 에 Android View 시스템의 gravity 값을 주려면, textAlign parameter 를 활용하자.

Text(
	text="Hello World",
	textAlign = TextAlign.End,
)

 

#

Text 를 singleLine 처리 하려면 maxLines parameter 를 활용하자.

Text(
	text="Hello World",
	maxLines=1,
)

 

#

Text 에 ellipsize(말줄임. android:ellipsize) 옵션을 주려면 overflow parameter 를 활용하자.

Text(
	text="Hello World",
	overflow=TextOverflow.Ellipsis,
)

TextOverflow 의 constant 는 Clip(잘라내기, 기본값), Ellipsis, Visible(bounds 를 넘어서도 그리는..) 이 있다.

 

#

Text 에 underline (밑줄) 옵션을 주려면 textDecoration parameter 를 활용하자.

Text(
	text="Hello World",
	textDecoration=TextDecoration.Underline,
)

TextDecoration 의 constant 는 None, Underline, LineThrough(취소선) 이 있다.

 

#

Text 에 italic (기울어진) 옵션을 주려면 fontStyle parameter 를 활용하자.

Text(
	text="Hello World",
	fontStyle=FontStyle.Italic,
)

 

#

Text 에 clickListener 를 주기 위해서는 Modifier.clickable 을 활용하자.

Text(
	text="Hello World",
    modifier=Modifier.clickable { /* .. */ },
)