안드로이드 프로그레스 바(progress bar) 사용하기(with timer)

안녕하세요.

이번 포스팅에서는 프로그레스 바를 사용해 보겠습니다.

프로그레스 바 표시에 timer를 사용합니다.

 

언어: 코틀린

sdk vsersion

  - compile: 33

  - min: 21

  - target: 33

 

가장 먼저 프래그먼트를 생성합니다.

ProgressFragment.kt

class ProgressFragment : Fragment() {

    private var _binding: FragmentProgressBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentProgressBinding.inflate(layoutInflater, container, false)
        return binding.root
    }

    override fun onStart() {
        super.onStart()
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

 

fragment_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".ProgressFragment">

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:id="@+id/progress_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="500"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progress_circular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <Button
        android:id="@+id/start_progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="시작하기"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

두 종류의 프로그레스 바를 넣었는데, 하나는 일자형으로 진행 상태를 보여줄 수 있으며 하나는 원형으로 로딩 표시를 나타낼 수 있습니다.

일자형 프로그레스 바의 max 값을 500, 원형 프로그레스 바의 초기 visibility는 invisible로 설정합니다.

버튼을 클릭하면 프로그레스 바가 기능하기 시작하도록 구현하겠습니다.

 

이제 타이머와 함께 프로그레스 바의 진행상태를 표시하는 코드를 작성하겠습니다.

ProgressFragment.kt

class ProgressFragment : Fragment() {

    private var _binding: FragmentProgressBinding? = null
    private val binding get() = _binding!!

    private var timer: Timer? = null

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentProgressBinding.inflate(layoutInflater, container, false)
        binding.startProgress.setOnClickListener {
            binding.progressCircular.visibility = View.VISIBLE
            startProgress()
        }
        return binding.root
    }

    private fun startProgress() {
        if (timer != null) {
            timer!!.cancel()
        }
        var progress = 0
        timer = timer(period = 10) {
            progress++
            binding.progressHorizontal.progress = progress
            if (progress == 500) {
                this@timer.cancel()
                binding.progressCircular.visibility = View.INVISIBLE
            }
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        if (timer != null) {
            timer!!.cancel()
        }
        _binding = null
    }
}

버튼을 누를 시, 원형 프로그레스 바가 나타나고 타이머는 10ms(0.01초)마다 호출되며 그때마다 progress 값을 0부터 시작해서 1씩 더해줍니다.

더해진 값을 일자형 프로그레스 바의 progress 값에 넣어주며 progress가 500이 되면, 즉 5초가 지나면(10ms * 500 = 5000ms -> 5초) 타이머를 캔슬합니다. 이와 함께 원형 프로그레스 바를 사라지게 합니다.

 

에뮬레이터에서 돌려보겠습니다.

figure1. run

정상적으로 동작합니다.

 

이상 포스팅을 마치겠습니다.

 

감사합니다.