Compose 기초 4 : Gradient

이번 포스팅에서는 Compose를 활용하여 Gradient을 표시하는 방법에 대하여 알아보겠습니다.

@Composable
fun BrushBox(
    brush: Brush,
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(100.dp)
            .background(brush = brush)
    )
}

private fun getColorList() = listOf(
    Color(0xFFFFE162),
    Color(0xFFFF6464)
)

시작에 앞서 기본 설정입니다.

Gradient은 background의 brush 속성으로 적용이 가능합니다.

1) Gradient의 종류

BrushBox(
    brush = Brush.linearGradient(getColorList()),
)

BrushBox(
    brush = Brush.verticalGradient(getColorList()),
)

BrushBox(
    brush = Brush.horizontalGradient(getColorList()),
)

BrushBox(
    brush = Brush.radialGradient(getColorList()),
)

BrushBox(
    brush = Brush.sweepGradient(getColorList()),
)

이렇게 5가지 종류가 있습니다.

색상은 예시에서는 2개만 사용하였으나 원하는 색상들을 list에 담아서 사용하면 됩니다.

2) LinearGradient

@Composable
fun LinearGradientTest() {
    var sliderPosition by remember { mutableStateOf(0f) }
    var offset by remember { mutableStateOf(GradientOffset()) }

    Text(text = sliderPosition.toInt().toString())
    Slider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..360f,
        onValueChangeFinished = {
            offset = getGradientOffset(sliderPosition.toInt())
        },
        steps = 3,
        colors = SliderDefaults.colors(
            thumbColor = MaterialTheme.colors.secondary,
            activeTrackColor = MaterialTheme.colors.secondary
        )
    )

    BrushBox(brush = Brush.linearGradient(
        colors = getColorList(),
        start = offset.start,
        end = offset.end
    ))
}

data class GradientOffset(
    val start: Offset = Offset.Zero,
    val end: Offset = Offset(Float.POSITIVE_INFINITY, 0f)
)

fun getGradientOffset(angle: Int): GradientOffset {
    return when (angle) {
        45 -> GradientOffset(
            start = Offset.Zero,
            end = Offset.Infinite
        )
        90 -> GradientOffset(
            start = Offset.Zero,
            end = Offset(0f, Float.POSITIVE_INFINITY)
        )
        135 -> GradientOffset(
            start = Offset(Float.POSITIVE_INFINITY, 0f),
            end = Offset(0f, Float.POSITIVE_INFINITY)
        )
        180 -> GradientOffset(
            start = Offset(Float.POSITIVE_INFINITY, 0f),
            end = Offset.Zero,
        )
        225 -> GradientOffset(
            start = Offset.Infinite,
            end = Offset.Zero
        )
        270 -> GradientOffset(
            start = Offset(0f, Float.POSITIVE_INFINITY),
            end = Offset.Zero
        )
        315 -> GradientOffset(
            start = Offset(0f, Float.POSITIVE_INFINITY),
            end = Offset(Float.POSITIVE_INFINITY, 0f)
        )
        else -> GradientOffset(
            start = Offset.Zero,
            end = Offset(Float.POSITIVE_INFINITY, 0f)
        )
    }
}

linearGradient는 start와 end의 속성을 변경함으로써 각도를 조정할 수 있습니다.

테스트를 위해 Slider를 이용하여 각도를 변경할 수 있게 하였습니다.

45도 단위로 getGradientOffset에 설정은 하였으나 45도 단위는 차이가 크지 않아서 Slider에서는 90도 단위로만 볼 수 있게 하였습니다.

저 값들 외에도 원하는 Offset값을 설정하여 각도를 지정할 수 있습니다.

참고로 기본 값은 45도 입니다.

BrushBox(brush = Brush.linearGradient(
    colors = getColorList(),
    start = Offset.Zero,
    end = Offset(100f, 100f),
    tileMode = TileMode.Decal
))

BrushBox(brush = Brush.linearGradient(
    colors = getColorList(),
    start = Offset.Zero,
    end = Offset(100f, 100f),
    tileMode = TileMode.Clamp
))

BrushBox(brush = Brush.linearGradient(
    colors = getColorList(),
    start = Offset.Zero,
    end = Offset(100f, 100f),
    tileMode = TileMode.Repeated
))

BrushBox(brush = Brush.linearGradient(
    colors = getColorList(),
    start = Offset.Zero,
    end = Offset(100f, 100f),
    tileMode = TileMode.Mirror
))

TileMode는 Offset의 영역 보다 UI의 크기가 클 때 어떻게 지정할지 설정합니다.

3) VerticalGradient & HorizontalGradient

@Composable
fun HorizontalGradientTest() {
    BrushBox(brush = Brush.horizontalGradient(
        colors = getColorList(),
        startX = 0f,
        endX = 500f,
        tileMode = TileMode.Repeated
    ))
}

@Composable
fun VerticalGradientTest() {
    BrushBox(brush = Brush.verticalGradient(
        colors = getColorList(),
        startY = 0f,
        endY = 100f,
        tileMode = TileMode.Repeated
    ))
}

LinearGradient가 x축,y축 모두 이용한다면 VerticalGradient와 HorizontalGradient은 각각 하나의 축만 이용한다는 차이점이 있습니다.

그 외에는 동일합니다.

4) RadialGradient

BrushBox(
    brush = Brush.radialGradient(
        colors = getColorList(),
        center = Offset.Unspecified,
        radius = Float.POSITIVE_INFINITY,
        tileMode = TileMode.Decal
    )
)

BrushBox(
    brush = Brush.radialGradient(
        colors = getColorList(),
        center = Offset.Unspecified,
        radius = Float.POSITIVE_INFINITY,
        tileMode = TileMode.Clamp
    )
)

BrushBox(
    brush = Brush.radialGradient(
        colors = getColorList(),
        center = Offset.Unspecified,
        radius = Float.POSITIVE_INFINITY,
        tileMode = TileMode.Repeated
    )
)

BrushBox(
    brush = Brush.radialGradient(
        colors = getColorList(),
        center = Offset.Unspecified,
        radius = Float.POSITIVE_INFINITY,
        tileMode = TileMode.Mirror
    )
)

TileMode는 사용 방법과 종류는 동일합니다.

BrushBox(
    brush = Brush.radialGradient(
        colors = getColorList(),
        center = Offset.Zero,
        radius = Float.POSITIVE_INFINITY,
    )
)

BrushBox(
    brush = Brush.radialGradient(
        colors = getColorList(),
        center = Offset.Infinite,
        radius = Float.POSITIVE_INFINITY,
    )
)

BrushBox(
    brush = Brush.radialGradient(
        colors = getColorList(),
        center = Offset(100f, 200f),
        radius = Float.POSITIVE_INFINITY,
    )
)

BrushBox(
    brush = Brush.radialGradient(
        colors = getColorList(),
        center = Offset.Unspecified,
        radius = 400f,
    )
)

radialGradient의 center의 값을 변경해서 원의 위치를 변경할 수 있습니다.

radius의 값을 변경해서 원의 크기를 변경할 수 있습니다.

5) SweepGradient

val colors = listOf(
        Color(0xFFFFE162),
        Color(0xFFFF6464),
        Color(0xFF3D5AFE),
        Color(0xFF00E676)
    )

    BrushBox(
        brush = Brush.sweepGradient(
            colors = colors,
            center = Offset.Unspecified
        )
    )

    BrushBox(
        brush = Brush.sweepGradient(
            colors = colors,
            center = Offset(300f, 100f)
        )
    )

    BrushBox(
        brush = Brush.sweepGradient(
            colors = colors,
            center = Offset(1000f, 300f)
        )
    )

sweepGradient는 TileMode는 없고 center 값을 변경하여 중심점을 변경할 수 있습니다.