코틀린 안드로이드 - 뽀모도로 타이머1(SeekBar 만들어서 연결까지)

Jamwon·2021년 7월 6일
0

Kotlin_Android

목록 보기
18/30
post-thumbnail

이번에 만들건 뽀모도로 타이머!

카운트다운 타이머를 만든다고 보면된다! + 알림이랑 째깍째깍소리 나는거 까지!

layout만들기!

activity_main.xml

<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/txt_remainMinutes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="00"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintLeft_toLeftof="parent"
        app:layout_constraintRight_toLeftOf="@id/txt_remainSeconds"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/txt_remainSeconds"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="00"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="@id/txt_remainMinutes"
        app:layout_constraintLeft_toRightOf="@id/txt_remainMinutes"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/txt_remainMinutes"
        tools:ignore="HardcodedText" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="60"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/txt_remainMinutes" />

</androidx.constraintlayout.widget.ConstraintLayout>

Chain 상태

서로 constraint가 걸려있을때 chain상태가 걸린다고 한다.
공식문서를 보면 constrainlayout을 어떻게 활용할지 잘 나와있다 !

현재 2개의 TextView가 서로 constraint되어있어서 chain style을 부여할수 있다. chain style은 chain의 head에 속성을 부여하면되는데 여기서는 '분' TextView에 chainStyle을 부여하면된다.

분과초가 붙어있길 원하기 때문에

app:layout_constraintHorizontal_chainStyle="packed"

txt_remainMinutes에 부여!

SeekBar추가 (슬라이더)

seekbar는 의 최대값은 분이기때문에 60으로 부여!

SeekBar 연결!

오오 초반챕터라 viewBinding을 사용하지 않는다고 말해주셧다.

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private val remainMinutesTextView: TextView by lazy {
        findViewById(R.id.txt_remainMinutes)
    }
    private val seekBar: SeekBar by lazy {
        findViewById(R.id.seekBar)
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        bindViews()
    }

    private fun bindViews(){
        seekBar.setOnSeekBarChangeListener(
            object :SeekBar.OnSeekBarChangeListener{
                @SuppressLint("SetTextI18n")
                override fun onProgressChanged(
                    seekBar: SeekBar?,
                    progress: Int,
                    fromUser: Boolean
                ) {
                    remainMinutesTextView.text="%02d".format(progress)
                }

                override fun onStartTrackingTouch(seekBar: SeekBar?) {
                    TODO("Not yet implemented")
                }

                override fun onStopTrackingTouch(seekBar: SeekBar?) {
                    TODO("Not yet implemented")
                }
            }
        )
    }
}

bindViews()

이 함수에서 View에 있는 요소들을 연결해준다.

seekBar는 onClickListener가 아닌 OnSeekBarChangeListner를 사용한고 안에는 onProgressChanged / onStartTrackingTouch/ onStopTrackingTouch 콜백들이 있다.

onProgressChanged(seekBar: SeekBar?,progress: Int,fromUser: Boolean)

에서 progress는 실제 seekBar의 값을 나타내고 fromUser는 유저가 조절하고 있는지 아닌지를 boolean 값으로 나타낸다.

결과물

seekBar를 손가락으로 옮기면 그에 대응하는 값을 잘 볼 수있다. !

새로 배운것

SeekBar aka 슬라이더

layout의 요소중 하나.
OnSeekBarChangeListner를 사용해서 SeekBar에서 일어나는 일들에 접근 할 수 있다.

format()

파이썬에서와 같이 출력문의 format을 정해서 출력할 수있다.
text="%02d".format(progress)
라고 하면 2자리수 출력을 할수있고 1자리수라고 해도 앞이 0으로 채워진다!!

이어서~

profile
한걸음씩 위로 자유롭게

0개의 댓글