안녕하세요.
오늘은 안드로이드 SeekBar의 사용법에 대해서 알아보겠습니다.
SeekBar의 경우 안드로이드에서 기본적으로 지원해 주는 것 외에도, 많은 개발자분이 오픈 소스로 공개해 주시는 멋진 디자인의 시크바들도 많이 존재합니다.
하지만 형태가 다르더라도 기본적인 사용 메커니즘은 동일하기 때문에, 기본으로 지원되는 SeekBar의 사용법을 정확히 알고 있는 것이 매우 중요합니다.
그럼 바로 사용법을 알아보도록 하겠습니다.
SeekBar에 대하여
SeekBar는 슬라이더 형태의 게이지 바를 의미합니다. 사용자가 UI 상에서 슬라이더를 움직이면, 해당 위치의 progress 값을 가져와 다양하게 활용할 수 있습니다.
음량 조절이나 화면 밝기 조절 외에도 매우 폭넓게 사용되므로, 한 번 익혀두면 실무에서 유용하게 쓰입니다.
먼저 SeekBar를 생성하는 방법입니다. 레이아웃 XML 파일에 직접 태그를 추가하거나, 안드로이드 스튜디오의 디자인 팔레트에서 드래그 앤 드롭으로 추가할 수 있습니다.
아래는 XML 파일에서 SeekBar를 구성한 예시 코드입니다.
activity_main.xml
<?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/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="시크바 값"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="@id/seekBar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:max="50"
android:thumb="@mipmap/ic_launcher_round"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>SeekBar에서 주로 사용하는 두 가지 핵심 속성은 max와 thumb입니다.
- max: SeekBar의 최댓값을 설정합니다.
- thumb: 사용자가 조작하는 커서의 이미지를 설정합니다.
위 코드에서는 SeekBar의 변화를 시각적으로 확인하기 위해 TextView도 함께 추가하였습니다.
SeekBar 사용하는 방법
이제 코틀린(Kotlin) 액티비티 파일에서 SeekBar의 리스너를 구현하는 방법을 알아보겠습니다.
MainActivity.kt
package com.pemblem.practice
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.SeekBar
import android.widget.TextView
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val text : TextView = findViewById(R.id.text)
val seekBar : SeekBar = findViewById(R.id.seekBar)
seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
// 시크바를 조작하고 있는 중
text.text = "onProgressChanged : $progress"
}
override fun onStartTrackingTouch(seekBar: SeekBar?) {
// 시크바 조작을 시작했을 때
text.text = "onStartTrackingTouch : ${seekBar!!.progress}"
}
override fun onStopTrackingTouch(seekBar: SeekBar?) {
// 시크바 조작을 멈췄을 때
text.text = "onStopTrackingTouch : ${seekBar!!.progress}"
}
})
}
}먼저 findViewById를 통해 XML에 정의된 SeekBar와 TextView를 연결합니다. 그 후 setOnSeekBarChangeListener를 등록하여 사용자의 조작 이벤트를 감지합니다.
시크바 리스너에는 아래와 같은 세 가지 주요 콜백 함수가 있습니다.
| 함수명 | 설명 |
|---|---|
| onProgressChanged | 시크바의 수치가 변경될 때마다 호출됩니다. |
| onStartTrackingTouch | 사용자가 터치를 시작할 때 호출됩니다. |
| onStopTrackingTouch | 사용자가 터치를 끝낼 때 호출됩니다. |
onProgressChanged 함수는 수치값인 progress 매개변수를 직접 제공하므로 편리하게 사용할 수 있습니다. 반면, 나머지 두 함수는 SeekBar 객체 자체만 전달되므로 seekBar!!.progress를 통해 현재 값을 참조해야 합니다.
아래는 실제 안드로이드 기기에서 앱을 실행하여 각각의 리스너가 작동하는 화면입니다.
오늘은 안드로이드에서 SeekBar를 사용하는 기본적인 방법에 대해 알아보았습니다. 다음 시간에는 지금까지 배운 코틀린과 안드로이드 기초를 활용해 간단한 타이머 앱을 만들어 볼 예정입니다.
타이머 제작 이후에는 추가적인 기능들을 덧붙여 나가는 과정도 다룰 것이니 기대해 주세요. 이번 포스팅이 도움이 되었기를 바랍니다.
긴 글 읽어 주셔서 감사합니다!
다른 글 읽기
이 글의 저작권은 전적으로 작성자인 P_Emblem에게 있으며, 허락 없는 무단 사용을 금합니다.