그림짝맞추기 앱만들기 15 - 프로그레스바 추가하기, 30초 카운트다운 프로그레스바로 표시하기, 새게임시 프로그레스바 초기화해주기

안녕하세요~ 두결입니다.

 

지난시간에는

30초 카운트다운 타이머를 추가하고, 소수점 3자리까지 표시해 보았고,

30초안에 못맞출 경우, 재도전 창 띄우기까지 해보았습니다.

 

이번시간에는

30초 카운트다운을 프로그레스바로 표시해보도록 하겠습니다.

---

▣  프로그레스바 추가하기

먼저, 프로그레스바를 추가해볼까요?

 

 

메인의 레이아웃에서 ProgressBar를 갖다 놓겠습니다.

 

<ProgressBar
    android:id="@+id/pgbarGameTime"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="230dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.35"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.11" />

 

XML에서 ID는 pgbarGameTime이라고 하였구요..

width는 230으로 설정하였습니다.

 

한번 실행해볼까요?

 

프로그레스바가 보이긴 하는데 30초 카운트다운 숫자랑 겹치네요 ;

 

<TextView
    android:id="@+id/txtvCountDown"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text=""
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.95"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.1" />

 

30초 카운트다운을 표시하는 TextView를 오른쪽 끝으로 이동하였습니다.

 

pgbar_GameTime = findViewById(R.id.pgbarGameTime);
pgbar_GameTime.setMax(30);
pgbar_GameTime.setScaleY(6.0f);
pgbar_GameTime.setProgressTintList(ColorStateList.valueOf(Color.parseColor("#2F5597")));

 

그리고, 프로그레스바의 높이와 배경색을 바꾸어주었습니다.

 

실행을 해볼까요?

 

 

네 프로그레스바가 잘 표시되네요...^^

 

 

프로그레스바 관련해서는 이전에 했던 강좌가 있으니 그부분 참고해주세요~

https://eun9073.tistory.com/31

모바일앱개발 강좌 #13 - 프로그래스바란?, 프로그래스바 생성하고 화면에 표시하기, 프로그래스

 

 

---

▣  30초 카운트다운 프로그레스바로 표시하기

프로그레스바를 추가했으니

이제 30초 카운트다운할때 프로그레스바도 같이 표시해보도록 하겠습니다.

 

// 30초 카운트다운 타이머
private void StartCountDownTimer()
{

    StopCountDownTimer();
    cdTimer = new CountDownTimer(30000,50) {
        @Override
        public void onFinish() {
            ShowRetryDialog(); // 재도전?
        }
        @Override
        public void onTick(long l) {
            String sLeftTime;
            sLeftTime = String.format("%.03f",l / 1000.0f);
            txtv_CountDown.setText(sLeftTime);
        }
    };
    cdTimer.start();
}

 

위 코드가 30초 카운트다운 타이머인데요..

여기서 onTick()에서 프로그레스바 설정을 해주면 되겠네요~

 

 

프로그레스바도 같이 잘 움직이네요..^^

 

보니까 저 30초 카운트다운 하는 숫자가 프로그레스바 위로 올라가도 괜찮을 것 같네요...

한번 옮겨보겠습니다.

 

<ProgressBar
    android:id="@+id/pgbarGameTime"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="350dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.35"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.11" />

<TextView
    android:id="@+id/txtvCountDown"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text=""
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.104" />

 

 

XML에서 TextView를 ProgressBar아래쪽으로 옮기구요.. (TextView가 위쪽으로 올라가기 위해...)

위치를 수정해주었습니다.

그리고, ProgressBar width도 조금더 키워주었습니다.

 

잘 바뀌었는지 볼까요?

 

 

네 30초 카운트다운이 프로그레스바위로 올라가니 조금더 나은것 같기도 하네요 ㅎㅎ

 

 

---

▣  새게임시 프로그레스바 초기화해주기

자, 마지막으로 한가지만 더 해보겠습니다.

 

 

단계 성공시 30초가 바로 리셋되버려서 내가 몇초만에 맞추었는지가 확인이 안되네요...

 

private void StopCountDownTimer()
{
    // 타이머가 이미 있으면 종료하기
    if(cdTimer !=null)
    {
        cdTimer.cancel();
        cdTimer = null;
    }
    txtv_CountDown.setText("30.000");
}

 

위와같이 StopCountDownTimer()에서 30으로 바꾸어버려서 그런데요..

이부분을 삭제하고 게임시작할때 30으로 바꾸는것으로 해야겠네요..

 

// 새게임 시작
private void NewGame()
{
    txtv_CountDown.setText("30.000");
    pgbar_GameTime.setProgress(30);  // 프로그레스바 초기화

    InitImageArray(); // 초기화
    CreateImageView(); // 동적 ImageView 생성
    ShowPopupCountDown();
}

 

위와같이 NewGame()에서

TextView와 ProgressBar의 값을 초기화 해주었습니다.

 

실행을 해보면

 

 

위와같이 단계성공후에 내가 몇초만에 맞추었는지를 알수 있고, 새게임 시작 시 초기화 된것을 알수 있습니다.

 

 

여기까지 동영상으로 한번 볼까요?

 

 

 

 

 

이번시간은 여기까지만 하도록 하구요~

다음시간에는 5단계 16개 이미지를 해보도록 하겠습니다.

 

그럼, 이만~

 

감사합니다. ^^