모바일 앱(안드로이드)

Jetpack Compose에서 그라데이션 적용하기

Billcorea 2024. 11. 12. 22:06
반응형

Jetpack Compose에서 그라데이션 적용하기

그라데이션 ???


Jetpack Compose는 안드로이드 UI를 선언적으로 구성할 수 있는 강력한 도구입니다. 이번 포스트에서는 Compose를 사용하여 뷰에 그라데이션 효과를 적용하는 방법을 소개하겠습니다.

#### 1. 프로젝트 설정

먼저 프로젝트의 `build.gradle` 파일에 Jetpack Compose 의존성을 추가해야 합니다.

```groovy
dependencies {
    implementation "androidx.compose.ui:ui:1.3.0"
    implementation "androidx.compose.material:material:1.3.0"
    implementation "androidx.compose.ui:ui-tooling-preview:1.3.0"
    implementation "androidx.activity:activity-compose:1.5.0"
}
```

#### 2. Linear Gradient 예제

Jetpack Compose에서 `Brush` 클래스를 사용하여 그라데이션을 적용할 수 있습니다. 아래는 파란색에서 하얀색으로 그라데이션을 적용하는 예제입니다. 특히, 하단 5%에 하얀색이 나타나도록 설정해보겠습니다.

val gradientColors = listOf(
        Color(0xFF17192E),
        Color(0xFF17192E),
        Color(0xFF17192E),
        Color(0xFF17192E),
        Color(0xFF17192E),
        Color(0xFF17192E),
        Color(0xFF17192E),
        Color(0xFF17192E),
        Color(0xFF3971FF)
    )
    LaunchedEffect(key1 = true) {
        delay(3000) // 3 seconds delay
        onTimeout()
    }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                brush = Brush.linearGradient(
                    colors = gradientColors,
                    start = Offset.Zero,
                    end = Offset.Infinite,
                    tileMode = TileMode.Repeated
                )
            )
            .wrapContentWidth(Alignment.CenterHorizontally)
    ) {
        Column(modifier=Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(painter = painterResource(R.drawable.ic_gong_white), contentDescription = "Logo")
            Image(painter = painterResource(R.drawable.ic_example), contentDescription = "example")
        }
    }



### 설명
- **LinearGradient 브러시 생성**: `Brush.linearGradient`를 사용하여 파란색에서 하얀색으로 이어지는 그라데이션을 생성합니다.
- **색상 배열 및 스톱 설정**: `colors` 배열에 색상을 정의합니다.   색의 비중으로 여러개 나열 하여 화면에서 차지 하는 공간의 크기을 설정 합니다.
- **배경 그라데이션 적용**: `Modifier.background`를 사용하여 `Box`의 배경에 그라데이션을 적용합니다.

이 코드를 통해 상단에서 파란색이 시작하여 하단 5% 정도가 하얀색으로 채워지는 그라데이션을 구현할 수 있습니다. Jetpack Compose를 사용하면 이러한 그래픽 효과를 쉽게 구현할 수 있습니다.

도움이 되셨길 바랍니다! 더 궁금한 점이 있으시면 언제든지 댓글로 문의해 주세요! 😊

---
이제 Jetpack Compose를 사용하여 아름다운 그라데이션 효과를 앱에 적용해 보세요! 🚀

반응형