[Jetpack compose] Text를 사용해 보자!

안녕하세요, 오늘은 jetpack compose로 기존에 사용하던 TextView를 어떻게 사용할 수 있는지에 대해 알아보도록 하겠습니다

    Text(
        //보여지는 text
        text = "Hello world!",
        //modifier로 여러가지 설정
        modifier = Modifier
                //text 영역 사이즈 설정
            .size(width = 80.dp, height = 100.dp)
                //padding 설정
            .padding(start = 10.dp, bottom = 15.dp)
                //클릭 설정
            .clickable(onClick = { }),
        //style로 여러가지 설정
        style = TextStyle(
            //컬러 설정
            color = Color.Blue
        ),
        //font 굵기 설정
        fontWeight = FontWeight.Bold,
        //font 사이즈 설정
        fontSize = 18.sp,
    )

프리뷰

 

각각의 속성들의 설명은 주석으로 남겼습니다

Text() 안에 text 속성으로 text를 설정합니다.

modifier 속성으로 text의 영역 등의 설정을 해줍니다

style 속성으로 text를 커스텀 해 줍니다

Modifier로 사용할 수 있는 속성들을 아래 표로 몇 가지 정리해 봤습니다

의미	Jetpack compose	기존에 사용하던 XML
가로와 세로 크기를 원하는 만큼	size(width = 80.dp, height = 100.dp)	android:layout_width = "80dp" android:layout_height = "100dp"
가로 세로 모두 부모 크기와 같게	fillMaxSize()	android:layout_width = "match_parent" android:layout_height = "match_parent"
세로 크기를 부모 크기와 같게	fillMaxHeight()	android:layout_height = "match_parent"
가로 크기를 부모 크기와 같게	fillMaxWidth()	android:layout_width = "match_parent"
가로 크기를 부모 전체 크기에서 절반을 차지하게 (다른 fillMax 속성들도 가능)	fillMaxWidth(0.5f)	android:layout_width = "0dp" android:layout_weight = "0.5"

 

추가로 jetpack compose는 몇 가지 재밌는 특징이 있습니다. 그중 하나가 바로 속성 순서가 중요하다는 것인데요

위에 보여드린 코드대로 클릭 범위를 확인해보면 아래와 같습니다

인터렉티브 모드

예상하시는 거와 같이 padding으로 좁혀져 범위가 나오게 되는 걸 보실 수 있습니다

하지만 코드를 이렇게 clickable이 padding 속성 앞으로 오게 되면

    Text(
        //보여지는 text
        text = "Hello world!",
        //modifier로 여러가지 설정
        modifier = Modifier
                //text 영역 사이즈 설정
            .size(width = 80.dp, height = 100.dp)
                //클릭 설정
            .clickable(onClick = { })
                //padding 설정
            .padding(start = 10.dp, bottom = 15.dp)
         ,
        //style로 여러가지 설정
        style = TextStyle(
            //컬러 설정
            color = Color.Blue
        ),
        //font 굵기 설정
        fontWeight = FontWeight.Bold,
        //font 사이즈 설정
        fontSize = 18.sp,
    )

인터렉티브 모드

이렇게 모든 범위가 클릭 범위로 바뀌는 걸 확인할 수 있습니다. 이유는 단순합니다, padding을 하기 전에 먼저 클릭 속성을 설정해줬기 때문입니다!