Compose GraphicsLayer

이번 포스팅에서는 GrapicsLayer에 관해서 알아보겠습니다.

시작하기 앞서 기본 준비를 하겠습니다.

@Composable
fun CustomSlider(
    value: Float,
    text: String,
    modifier: Modifier = Modifier,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    onValueChange: (Float) -> Unit
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .fillMaxWidth()
            .padding(horizontal = 30.dp)
    ) {
        Text(text = "$text $value", color = Color.Black, fontWeight = FontWeight.Bold)
        Slider(
            value = value,
            onValueChange = onValueChange,
            valueRange = valueRange,
            colors = SliderDefaults.colors(
                thumbColor = Color(0xFFFFC400),
                activeTrackColor = Color(0xFF707070)
            )
        )
    }
}

이번 예제에서는 Slider를 많이 사용할 것이기 때문에 미리 만들어 두었습니다.

scaleX: Float = 1f,
scaleY: Float = 1f,
alpha: Float = 1f,
translationX: Float = 0f,
translationY: Float = 0f,
shadowElevation: Float = 0f,
rotationX: Float = 0f,
rotationY: Float = 0f,
rotationZ: Float = 0f,
cameraDistance: Float = DefaultCameraDistance,
transformOrigin: TransformOrigin = TransformOrigin.Center,
shape: Shape = RectangleShape,
clip: Boolean = false,
renderEffect: RenderEffect? = null,
ambientShadowColor: Color = DefaultShadowColor,
spotShadowColor: Color = DefaultShadowColor,

graphicsLayer는 Modifer에서 사용이 가능하며 위의 속성 값들을 설정할 수 있습니다.

Image(
    painter = painterResource(id = R.drawable.card1),
    contentDescription = "card",
    modifier = Modifier
        .size(width = 200.dp, height = 300.dp)
        .graphicsLayer(
            alpha = alpha,
            translationX = translationX,
            translationY = translationY,
            shadowElevation = shadowElevation,
            ambientShadowColor = Color.Red,
            spotShadowColor = Color.Blue,
            scaleX = scaleX,
            scaleY = scaleY,
            rotationX = rotationX,
            rotationY = rotationY,
            rotationZ = rotationZ,
            cameraDistance = cameraDistance,
            transformOrigin = TransformOrigin(originX, originY),
            shape = RoundedCornerShape(150.dp),
            clip = true,
            renderEffect = BlurEffect(1f, 10f)
        )
)

이런식으로 사용하면 됩니다.

1) Alpha

var alpha by remember { mutableStateOf(1f) }

CustomSlider(
    value = alpha,
    text = "alpha"
) {
    alpha = it
}

투명도 값을 조정합니다.

만약 Image 안에 Modifier 속성으로 background를 주었다면 background는 유지된 채 painterResource로 넣은 이미지만 투명도가 조절됩니다.

이건 다른 속성들도 동일하게 적용됩니다.

2) Translate

CustomSlider(
    value = translationX,
    text = "translationX",
    valueRange = -100f..100f
) {
    translationX = it
}

CustomSlider(
    value = translationY,
    text = "translationY",
    valueRange = -100f..100f
) {
    translationY = it
}

X축, Y축 기준을 기준으로 이미지를 이동시킵니다.

3) Scale

CustomSlider(
    value = scaleX,
    text = "scaleX",
    valueRange = 0f..2f
) {
    scaleX = it
}

CustomSlider(
    value = scaleY,
    text = "scaleY",
    valueRange = 0f..2f
) {
    scaleY = it
}

X축, Y축 기준을 기준으로 이미지를 확대/축소시킵니다.

4) ShadowElvation

CustomSlider(
    value = shadowElevation,
    text = "shadowElevation",
    valueRange = 0f..100f
) {
    shadowElevation = it
}

value의 크기에 맞는 Elevation을 생성합니다.

위의 이미지에서는 사각형을 기준으로 그림자를 생성하는데 shpae 속성 값으로 원하는 모양을 넣어주면 그림자의 모양을 바꿀 수 있습니다.

ambientShadowColor와 spotShadowColor를 통해 그림자의 색상을 변경할 수 있습니다.

5) Rotation & CameraDistance

CustomSlider(
    value = rotationX,
    text = "rotationX",
    valueRange = 0f..360f
) {
    rotationX = it
}

CustomSlider(
    value = rotationY,
    text = "rotationY",
    valueRange = 0f..360f
) {
    rotationY = it
}

CustomSlider(
    value = rotationZ,
    text = "rotationZ",
    valueRange = 0f..360f
) {
    rotationZ = it
}

CustomSlider(
    value = cameraDistance,
    text = "cameraDistance",
    valueRange = 0f..20f
) {
    cameraDistance = it
}

X축, Y축, Z축 기준으로 회전시킵니다.

cameraDistance의 값에 따라 회전 시 보여지는 부분이 달라지게 됩니다.

6) Origin

CustomSlider(
    value = originX,
    text = "originX",
    valueRange = 0f..3f
) {
    originX = it
}

CustomSlider(
    value = originY,
    text = "originY",
    valueRange = 0f..3f
) {
    originY = it
}

회전 기준점을 변경합니다.

7) Shape

기본적으로 Shape 사용 방법과 동일하며, Modifer.background 속성과 별도로 작동되기 때문에 위와 같이 나옵니다.

8) Render

CustomSlider(
    value = render,
    text = "render",
    valueRange = 1f..30f
) {
    render = it
}

renderEffect = BlurEffect(render, render)

Render 효과 중 Blur효과를 적용시킨 모습입니다. X축, Y축을 다르게 설정도 가능합니다.

주의할 점은 RenderEffect는 안드로이드 12부터 적용되는 기능입니다.

그 이하 버전에서는 효과가 무시됩니다.