이번에 만들건 뽀모도로 타이머!
카운트다운 타이머를 만든다고 보면된다! + 알림이랑 째깍째깍소리 나는거 까지!
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으로 채워진다!!
이어서~
