[Kotlin][Android] SeekBar 시크바 기본 사용법

오늘은 코틀린을 이용해서 시크바를 구현해보도록 하겠습니다. 

 

시크바란?

SeekBar은 슬라이더 형태의 게이지 바를 말합니다.

음량이나 밝기 외에도 음악, 동영상 제어하는 등 다양한 곳에 사용되기 때문에 한번 익혀 놓으면 다양한 곳에 사용할 수 있습니다.

 

시크바 공식문서

developer.android.com/reference/android/widget/SeekBar

SeekBar  |  Android 개발자  |  Android Developers

시크바 이벤트 리스너를 활용하면, 사용자가 시크바에서 선택한 값을 알 수 있습니다. 

(1) onProgressChanged: 시크바를 조작하고 있는 중에 발생

(2) onStartTrackingTouch: 시크바를 처음 터치했을 때 발생

(3) onStopTrackingTouch: 시크바 터치가 끝났을 때 발생

 

시크바 리스너 함수

 

코틀린으로 시크바 터치가 끝났을 때, 유저가 선택한 값을 TextView에 띄우는 예제를 만들어 보겠습니다.  

개발 순서

1. 화면 구성(activity_main.xml)

2. Activity 사용(MainActivity)

 

1. 화면 구성(activity_main.xml)

태그 요소 <SeekBar>에 항목 max와 progress를 추가해줍니다. 

1. android:max는 SeekBar 최대치일때의 수치 설정
2. android:progress로 초기값을 설정

스틱코드를 이용해서 SeeKBar 태그 쉽게 넣기

stickode.com/detail.html?no=2042

스틱코드

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

    <TextView
        android:id="@+id/textview_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/seekBar"
        android:layout_marginBottom="50dp"
        android:hint="0"
        android:textSize="40sp"
        />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginTop="44dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="100dp"
        android:max="10"
        android:progress="0"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

 

activity_main.xml 화면

2. Activity 사용(MainActivity)

시크바에 발생하는 이벤트에 따라 어떤 행동을 취하고 싶을 때는 리스너 객체를 생성해줘야 합니다. 저는 스틱코드를 이용해서 간단하게 구현했습니다.

스틱코드를 이용해서 SeekBar 리스너 설정 하기

stickode.com/detail.html?no=2042

스틱코드

Kotlin Extension에서는 자체 제공하는 Synthetic Binding을 통해, 특별한 변수의 선언 없이 Button 객체를 사용할 수 있도록 도와줍니다.  

 

앞서 시크바 리스너 함수에 대해서 알아봤는데요. 저는 시크바가 움직일때마다 텍스트뷰가 변해야 하기 때문에 onProgressChanged 메서드를 선택했습니다. 

 

onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) 매개변수를 살펴보면 다음과 같습니다.

seekBar : 시크바 View 

progress : 변경된 진행 값 

fromUser : 사용자에 의한 변경인지(True), 코드에 의한 변경인지(False) 

 

 

진행 값을 받아와서 텍스트뷰에 보여주는 코드는 다음과 같이 작성해줍니다.

MainActivity 최종 코드입니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                textview_progress.text = progress.toString()
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
            }
        })
    }
}

 

최종 결과 영상입니다.