[UMC/Android] 7주차 - Thread 이용한 타이머 만들기

7주차 - Thread 이용한 타이머 만들기

⏱️ 구현 영상

코드

UMC_Android/week7 at master · ss99x2002/UMC_Android

⏱️ 구현 설명

시간 선택 페이지

• 59분 59초까지 타이머를 설정할 수 있는 페이지로 Number Picker를 사용해서 시간을 설정하도록 하였다.
• 시간 선택 페이지와 타이머 페이지는 FrameLayout으로 겹쳐두고 visible 속성을 통해서 보이고, 안보이고를 지정하였다. 따라서 시작버튼을 누르면 타이버 레이아웃이 뜬다

타이머 페이지

• 시간선택 페이지에서 선택한 시간의 타이머가 돌아가는 페이지로 시작 버튼을 누르면 타이머가 돌아간다.
• 시작 버튼을 누르면 해당 버튼은 invisible되고 정지 버튼이 visible된다. 정지버튼을 누르면 타이머가 일시정지된다. (정지 버튼을 누르면 다시 시작버튼이 나오고 정지버튼은 사라진다)
• 취소 버튼을 누르면 시간 선택페이지로 다시 되돌아간다. 타이머도 초기화된다.
• 3초 남았을때부터 숫자 색이 빨간색으로 바뀐다.
• 타이머가 끝나면 소리가 난다.

⏱️ 배운점

1️⃣NumberPicker

• 시간 설정을 하기 위해서 NumberPicker를 처음 사용해봤다.
• maxValue속성을 통해서 최대 숫자를 지정할 수 있고, value를 통해서 현재 보이는 숫자를 지정할 수 있다.
• setOnValueChangedListener 를 통해서 스크롤해 숫자를 바꿀 때 발생시킬 이벤트를 지정할 수 있다. 나는 변화할 때마다 선택된 값을 담는 변수를 새롭게 초기화해주는 이벤트를 넣었다. → 궁금한점: ViewModel을 사용하면 데이터 값이 변화하는걸 관찰하고 실시간으로 반영해주는 Live Data나 observe를 사용 할 수 있는데 이부분에 사용할 수 있는건지 궁금하다.

2️⃣Progress bar Custom

• Progress bar의 종류에는 Indeterminate와 Determinate 가 있다.
• 내가 구현하고자 하는 는 단순 로딩을 나타내는 것이 아닌 현재 진행률을 나타내는 프로그레스바로 determinate 프로그레스바에 해당한다.
• determinate 프로그레스바에서 진행상황을 나타내고 싶을때 progressBar.progress 속성을 통해서 진행률을 나타낼 수 있고, progressBar.incrementProgressBy() 속성을 통해 한번 돌때 증가시킬 양과 max 속성으로 프로그레스바의 최대치를 지정할 수 있다.
  • 나는 타이머의 시간을 max로 1씩 증가시켜 타이머가 종료될 때 다 채워지도록 프로그레스 바를 만들었다.
• determinate 프로그레스바를 커스텀 하기 위해서는 drawable 작성이 다음과 같아야한다.
  • 참고 영상 :
  https://www.youtube.com/watch?v=YsHHXg1vbcc
  • 예시)

<layer-list xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item> // 프로그레스 바가 채워지지 않은 부분
        <shape
            android:shape="ring"
            android:thicknessRatio="16"
            android:useLevel="false">
            <solid
                android:color="@color/white"/>
        </shape>
    </item> 
    
    <item> // 프로그레스 바가 채워질 부분
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270">
        <shape
            android:shape="ring"
            android:thicknessRatio="16"
            android:useLevel="true"> // 이부분을 헷갈리지 않아야한다 . . 
            <solid
            	android:color="@color/black"/>
        </shape>
        </rotate>
    </item>
    
</layer-list>

⏱️ 트러블슈팅

Progressbar Custom

• 문제: 타이머가 돌아가면 원형프로그레스바가 시간에 맞춰서 점차 채워지는 커스텀을 하려고 했으나 안돌아감.
• 원인: 근본적 원인은 indeterminate progressbar 와 determinate progressbar의 차이를 이해하지 못해서 발생함. 또한 커스텀을 하기 위해 만든 drawable 파일에서 item 2개에 모두 useLevel을 false로둬서 progress는 진행되나 시각적으로 프로그레스바가 돌아가지 않았음.
• 해결: 각 item의 useLevel을 false, true로 각각 두어 해결했다.