[Kotlin] Seekbar 간단설명

위에서 보는것과 같이 슬라이더 형태의 게이지 바를 SeekBar 라고 한다.

볼륨조절, 동영상 재생에 대표적으로 사용된다.

현재 위치를 progress 값으로 가져와서 활용할 수 있다.

 

 

<androidx.appcompat.widget.AppCompatSeekBar
        android:id="@+id/player_song_seekbar"
        android:layout_width="match_parent"
        android:layout_height="20dp"

        android:paddingStart="0dp"
        android:paddingEnd="0dp"
        android:progress="0"
        android:max="1000"
        android:thumb="@android:color/transparent"
        android:background="@null"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/player_lyrics_1_tv"
        app:layout_constraintBottom_toTopOf="@id/player_btn_linear"/>

• max 속성으로 SeekBar의 최대값을 설정해 준다.
• progress 속성으로 SeekBar의 현재 위치를 알 수 있다.
• thumb 속성은 커서의 이미지와 관련이 있는데 자세한 사항은 구글링 하여라,,!!

 

 

 노래 플레이 시에 시간초의 증가와 SeekBar 진행은 이전 글의 하단 코드에서 보는것과 같이,

 Player 라는 워커스레드를 만든 뒤에 Handler 를 통해 메인스레드에서 UI 작업을 진행하였다.

 

 

 

 

그렇다면 위의 영상처럼 터치를 한 상태로 좌우로 슥슥 스크롤을 했을때 변화는 어떻게 줄 수 있을까??

 

아래에 나올 setOnSeekBarChangeListener 를 사용해서 유저가 SeekBar 를 조작했을 때의 데이터를 활용해서 작업을 할 수 있다.

 

 

binding.playerSongSeekbar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
       
       // SeekBar의 값이 변경되었을 때!
        override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
        //seekbar를 터치 한 채로 스크롤하면서 시간 변경하는 중!! (seekbar의 값 변경중-ing!!)
            binding.playerTimeStartTv.text 
            = String.format("%02d:%02d", progress*song.totalTime/1000/60, progress*song.totalTime/1000%60)

        }
        
        // 값을 변경하기 위해 유저가 터치했을 때
        override fun onStartTrackingTouch(seekBar: SeekBar?) {
        
        }
        
        // 값을 변경한 후 터치를 때었을 때
        override fun onStopTrackingTouch(seekBar: SeekBar?) {
        //seekbar 값을 변경하다가 터치를 때는 순간의 progress 를 통해서 currentTime 계산 후 song에 대입!
            song.currentTime = (seekBar?.progress!!)*song.totalTime/1000
        }
    })

 

• onProgressChanged 함수는 SeekBar를 조작하고 있는 중에 작동한다. SeekBar 를 터치한 채로 스크롤을 하면 onProgressChanged 함수 안에있는 코드가 실행되는데,  사람의 손에 따라 실시간으로 변하는 progress 값을 통해 시간초 text를 실시간으로 조작하는 코드이다.
• onStartTrackingTouch 함수는 SeekBar를 조작하기 시작했을 때 작동한다. SeekBar를 조작하려고 터치하는 순간 작동한다고 보면 된다.
• onStopTrackingTouch 함수는 SeekBar 조작을 마무리 했을 때 작동한다. SeekBar 조작을 마무리하고 터치를 떼는 순간 작동한다고 보면 되는데, 손을 떼는 순간의 progress 값을 통해서 currentTime 을 계산하고 현재 플레이중인 노래의 정보를 넣는 song 클래스에 값을 대입한다.  그러면 SeekBar 스크롤 조작이 끝남과 동시에 손을 뗀 그 시점부터 스무스하게 노래가 재생된다.