[Compose Text] Text color 바꾸고 투명도 설정하기

선행지식

[Android Compose Resource] Compose 의 Color 객체 살펴보기

 

Compose Text 색상 바꾸기

Text의 색상을 바꾸기 위해서는 Text의 color 프로퍼티를 사용한다.

 

Color 객체 직접 생성해서 사용하기

Color은 직접 객체를 생성해서 사용할 수 있다.

@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldText1() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Text(text = "Kotlin World Red", color = Color(0xFFFF0000))
        Text(text = "Kotlin World Green", color = Color(0xFF00FF00))
        Text(text = "Kotlin World Blue", color = Color(0xFF0000FF))
    }
}

위와 같이 사용할 경우 Composable에서 직접 color 값을 설정할 수 있게 된다.

그림1. color 객체 직접 설정해서 사용

 

위 코드의 결과는 다음과 같다.

그림2. color 프로퍼티를 이용해 Text 정의하기

 

하지만 이 방식은 Recomposition이 일어날 때마다 Color 객체를 생성하므로 비효율적이다.

따라서 매번 색상이 바뀌어야하는 것이 아니면 미리 Color 객체를 정의 해놓고 사용하는 것이 좋다.

 

미리 정의된 Color 객체 사용하기

ui/theme/Color.kt 파일에 다음과 같이 미리 객체를 정의해놓고 사용하도록 하자. 최상위 선언이므로 static하게 저장된다. 한 번만 객체가 생성되는 것이다.

그림3. 미리 객체 정의

@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldText2() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Text(text = "Kotlin World Red", color = Red)
        Text(text = "Kotlin World Green", color = Green)
        Text(text = "Kotlin World Blue", color = Blue)
    }
}

 

Compose Text alpha(불투명도) 이용해 투명도 설정하기

Text에 투명도를 설정하기 위해서는 Color의 copy메서드를 이용해 alpha(불투명도)값을 바꾸는 것이다. alpha는 1에 가까울수록 불투명해지며 0에 가까울수록 투명해진다.

*copy메서드는 alpha, red, green, blue 값을 직접 바꾸는 것을 지원한다.

@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldText3() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Text(text = "Kotlin World alpha: 1f", color = Color.Black)
        Text(text = "Kotlin World alpha: 0.7f", color = Color.Black.copy(alpha = 0.7f))
        Text(text = "Kotlin World alpha: 0.4f", color = Color.Black.copy(alpha = 0.4f))
        Text(text = "Kotlin World alpha: 0.1f", color = Color.Black.copy(alpha = 0.1f))
    }
}

그림3. 투명도 설정된 Text

이 또한 꼭 동적으로 Color을 설정해야 하는 것이 아닌이상 미리 정의해놓고 사용하는 것 메모리 관리 측면에서 좋다.

val BlackAlpha100 = Color(0xFF000000)
val BlackAlpha70 = Color(0xFF000000).copy(alpha = 0.7f)
val BlackAlpha40 = Color(0xFF000000).copy(alpha = 0.4f)
val BlackAlpha10 = Color(0xFF000000).copy(alpha = 0.1f)

@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldText4() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Text(text = "Kotlin World alpha: 1f", color = BlackAlpha100)
        Text(text = "Kotlin World alpha: 0.7f", color = BlackAlpha70)
        Text(text = "Kotlin World alpha: 0.4f", color = BlackAlpha40)
        Text(text = "Kotlin World alpha: 0.1f", color = BlackAlpha10)
    }
}