[안드로이드 스튜디오 코틀린] 시간 조절하는 SeekBar Custom

 

 

 

 

 

 

 

 

 

시간을 조절할 수 있는 SeekBar를 만들어서 시간 값이 변하게 보여주고 싶었다.

 

내가 생각한 방법을 구사할 수 있는 라이브러리를 찾지 못해서 안드로이드 기본 SeekBar와 TextView로 만들어보았다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

초기화면은 이렇게 1분으로 설정해두었고

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

시간을 조절함에 따라 SeekBar와 TextView의 위치가 변하게 만들었다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

총 코드

 

 

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.ViewGroup
import android.widget.SeekBar
import com.example.customseekbarex.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        settingSeekBar()
    }

    private fun settingSeekBar() {
        // 맥스 값
        binding.seekBar.max = 30
        // 증가할 값의 단위
        binding.seekBar.progress = 1
        binding.timeTV.text = "1분"

        binding.seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(p0: SeekBar?, progress: Int, fromUser: Boolean) {
                // progress 바뀜에 따라 text도 같이 바뀌게 함
                binding.timeTV.text = "${progress}분"

                // seekbar의 위치와 textview의 위치를 맞춰 줌
                val newMargin = (progress.toFloat() / binding.seekBar.max) * (binding.seekBar.width - binding.timeTV.width)
                val params = binding.timeTV.layoutParams as ViewGroup.MarginLayoutParams
                params.leftMargin = newMargin.toInt()
                binding.timeTV.layoutParams = params
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {}
            override fun onStopTrackingTouch(p0: SeekBar?) {}
        })
    }
}

 

 

seekBar의 setOnSeekBarChangeListener 함수 안에서 프로그레스가 변함에 따라 textview의 위치를 같이 옮겨주는 코드를 넣어서 만들었다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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"
    android:background="@color/black"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/timeTV"
            android:layout_width="60dp"
            android:layout_height="44dp"
            android:background="@drawable/seekbar_icon"
            android:gravity="center"
            android:paddingBottom="8dp"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:textStyle="bold"
            tools:text="1분" />

        <androidx.appcompat.widget.AppCompatSeekBar
            android:id="@+id/seekBar"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:layout_marginTop="5dp"
            android:max="30"
            android:progressDrawable="@drawable/custom_seekbar"
            android:thumb="@android:color/transparent"
            tools:progress="1" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고

 

 

https://github.com/songmik/CustomSeekBarEx

GitHub - songmik/CustomSeekBarEx