안드로이드 컴포즈 원형 프로그레스 (Jetpack Compose CircularProgressIndicator)

안녕하세요.

이번 포스팅에서는 컴포즈 원형 프로그레스를 구현해 보겠습니다.

 

언어: 코틀린

sdk vsersion

  - compile: 33

  - min: 21

  - target: 33

 

우선 아무런 설정 없이 CircularProgressIndicator를 적용하겠습니다.

MainComposeActivity.ky

@Composable
fun CircularProgress() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator()
    }
}

 

아래와 같이 동작합니다.

feature1. default circular indicator

 

이번에는 여러 속성을 추가하여 커스터마이징 해주겠습니다.

MainComposeActivity.ky

@Composable
fun CircularProgress() {
    var progress by remember { mutableStateOf(0f) }

    Box(
        contentAlignment = Alignment.Center
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            CircularProgressIndicator(
                progress = progress,
                modifier = Modifier.size(100.dp),
                color = Color.Magenta,
                strokeWidth = 7.dp
            )
            Spacer(modifier = Modifier.height(50.dp))
            Row {
                Button(onClick = {
                    progress += .1f
                }) {
                    Text("+", color = Color.White)
                }
                Spacer(modifier = Modifier.width(20.dp))
                Button(onClick = {
                    progress -= .1f
                }) {
                    Text("-", color = Color.White)
                }
            }
        }
    }
}

progress 값의 변화에 따라 원형 프로그레스 아이콘이 그려집니다.

size는 100dp, 색상은 마젠타, 원의 테두리 두께는 7dp입니다.

+ 버튼을 클릭하면 프로그레스 값이 추가되고, - 버튼을 클릭하면 값이 떨어지는 단순한 동작입니다.

 

feature2. run

문제없이 동작합니다.

 

아래는 전체 코드입니다.

MainComposeActivity.ky

package com.example.laboratory.compose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.laboratory.compose.ui.theme.LaboratoryTheme

class MainComposeActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LaboratoryTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    CircularProgress()
                }
            }
        }
    }
}

@Composable
fun CircularProgress() {
    var progress by remember { mutableStateOf(0f) }

    Box(
        contentAlignment = Alignment.Center
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            CircularProgressIndicator(
                progress = progress,
                modifier = Modifier.size(100.dp),
                color = Color.Magenta,
                strokeWidth = 7.dp
            )
            Spacer(modifier = Modifier.height(50.dp))
            Row {
                Button(onClick = {
                    progress += .1f
                }) {
                    Text("+", color = Color.White)
                }
                Spacer(modifier = Modifier.width(20.dp))
                Button(onClick = {
                    progress -= .1f
                }) {
                    Text("-", color = Color.White)
                }
            }
        }
    }
}

기본적인 CircluarProgressIndicator 사용법이었습니다.

이상 포스팅을 마칩니다.

 

감사합니다.