[6][android]안드로이드 SeekBar 시크바 기본 사용법[게이지 바]

안드로이드 프로그래밍 메인이미지

안녕하세요.

오늘은 안드로이드 SeekBar의 사용법에 대해서 알아볼 겁니다.

SeekBar의 경우 안드로이드에서 기본적으로 지원해주는 녀석 말고도 다른 프로그래머 분들이 오픈 소스로 공개해주시는 멋진 디자인의 시크 바도 있어요.

하지만 형태가 다르다고 해도 기본적으로 사용하는 방법은 동일하기 때문에 기본으로 지원해주는 녀석의 사용법을 알 고 있는 것이 중요하겠죠.

그럼 바로 알아보도록 하죠.

 

SeekBar에 대하여

시크바

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

UI상에서 사용자가 슬라이더를 움직이면 그 progress 값을 가져와 활용할 수 있죠.

음량이나 밝기 외에도 다양한 곳에 사용되기 때문에 한번 익혀 놓으면 다양한 곳에 사용할 수 있습니다.

 

먼저 SeekBar를 생성하는 방법에 대해 알아보겠습니다.

SeekBar는 레이아웃 xml 파일에 SeekBar을 직접 넣어주거나 팔레트에서 끌어오거나 액티비티 파일에서 생성해줄 수 있습니다.

아래 코드는 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_toBottomOf="@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>

주로 사용하는 두가지 속성이 있는데 바로 max속성과 thumb속성입니다.

max속성은 SeekBar의 최댓값을 정해주고 thumb속성으로는 커서의 이미지를 정해줄 수 있어요.

코드를 보면 TextView를 추가했는데 SeekBar의 변화를 출력하기 위한 텍스트뷰입니다.

그럼 생성하는 방법에 대해서 알아봤으니 사용하는 방법도 알아봐야겠죠.

 

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}"
            }
        })
    }
}

먼저 SeekBar 변수를 생성하고 findViewById(id)를 통해 레이아웃xml의 SeekBar을 담아줘요.

그 후 setOnSeekBarChangeListener을 이용해서 사용자가 시크 바를 조작할 때의 데이터를 활용해봅시다.

시크바 리스너에는 세 가지 함수가 있는데 아래에 표로 정리해 드릴게요.

onProgressChanged	시크 바를 조작하고 있는 중 작동
onStartTrackingTouch	시크 바를 조작하기 시작했을 때 작동
onStopTrackingTouch	시크 바 조작을 마무리했을 때 작동

위 내용을 활용해서 시크 바가 변할 때마다 데이터 값을 가져와서 출력하는 코드를 만들어 봤습니다.

시커바 리스너의 코드 블록

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}"
            }
        })

onProgressChanged함수의 경우 progess 매개 변수를 가지고 있어서 바로 활용해주면 되지만 다른 함수들의 경우 seekerbar변수만 가지고 있기 때문에 progess 정보를 가져오기 위해서는 seekbar!!. progress를 활용해서 시크 바 안의 데이터를 가져와줘야 합니다.

 

아래 사진은 실행 화면이에요.

 

왼쪽부터 onStop/onProgress/onStart

---

이렇게 오늘은 시크 바를 사용하는 방법에 대해서 알아봤습니다.

다음에는 지금까지 배웠던 코틀린 프로그래밍과 안드로이드 프로그래밍을 활용해서 간단한 타이머를 만들어 볼 겁니다.

그리고 향후 타이머 제작 이후 강좌들은 추가적으로 배운 내용들을 타이머에 적용하는 방법에 대해서 알아볼 거세요.

그럼 이번 글이 도움 이 되었으면 하는 마음으로 포스팅을 마치겠습니다.

긴 글 읽어 주셔서 감사합니다.

---

이전 글 읽기

[안드로이드 스튜디오]Constraint Layout 기본 사용법[1] – 위젯 관계 설정

이전 글 읽기

[안드로이드 스튜디오]버튼, 클릭 이벤트 기본 사용법 – 클릭 이벤트[Button][1]

---

이 글의 저작권은 전적으로 작성자인 P_Emblem에게 있으며
허락 없는 사용을 금합니다.