안드로이드 스탑워치 시간 가는 기능 구현하기(앱 만들기#9)

먼저 저희가 궁금한 것을 구글에서 스톱워치를 찾아봅시다.

앱 만들기#8에서 했던 것, 바로 아래 스톱워치 만들기가 있기에 그것을 클릭하였습니다.

그랬더니 이와 같은 것을 해야한다고 나오는군요.

안드로이드 스탑워치 시간 가는 기능 구현하기(앱 만들기#9)

저희는 보시면 프린트인이 되도록 만들었는데, 이것은 어플로 되는 것이 아닙니다.

어플로는 RunOnUiThread를 집어넣어줘야 하죠. 

보시면 RunOnUiThread 안에 텍스트뷰 바뀌는 것이 넣어져 있죠?

그래서 UI 조작을 위해서는, 저 스레드를 사용해야 한다고 알려주고 있네요.

런 온 유아이 스레드를 넣어 보겠습니다. 

 

먼저 프린트인으로 만들었던 것입니다.  이 것을 변경을 해보겠습니다.

위의 사진과 같이 런 온 유아이 스레드로 변경을 해보죠.

한번 실행을 해볼까요?

사진에서는 안 보이지만, 어플 속에서 시간이 계속 흘러가는 것을 볼 수 있습니다.

어플이니까 UI를 해야 하는군요.

실시간으로 바뀌는 UI를 위해서는 RunOnUiThread를 사용해야 하는 것을 배울 수 있었습니다.

시간 관련을 하기 위해서는 타이머를 해야 한다는 것을 알 수 있었고요.

 

• UI에서 타이머 기능

var sec : Int = 0
val abc: TextView =  findViewById(R.id.text_1)

timer(period = 1000,)
{
    sec++
runOnUiThread{
    abc. text = sec.toString()
}
}

위와 같은 코딩 기능을 넣어줘야 시간이 계속 흘러가는군요.

위의 코딩입니다.

 

그렇다면 이제 조금 업그레이드시켜서, 버튼을 누르면  스톱워치 시간이 지나가는 기능을 구현해보겠습니다.

그냥 시간이 흘러가도 되지만, 하나씩 업그레이드를 해봐야죠.

 

그러면 생각을 해봅시다. 

버튼 기능을 다시 추가해주고, 시간이 지나갔던 스탑워치 기능을 버튼 기능에 넣어주시면 되겠죠?

• 버튼을 누르면, 시간이 흘러가는 기능

저희가 처음에 만들었던 버튼 기능을 저희는 주석처리해놨었습니다.

그러면 이 주석처리한 것들을 불러와보겠습니다.

 

우선은 이것부터 올려야겠죠.

val btn: Button =  findViewById(R.id.btn_1)

이 것을 VAL 있는 곳으로 올려줍니다.

이런 식으로 사진으로 설명하는 것이 더 편할 것 같아서, 일일이 사진을 찍으면서 만들어 보고 있습니다.

그럼 이렇게 되었죠? 

 

var sec : Int = 0
val abc: TextView =  findViewById(R.id.text_1)
val btn: Button =  findViewById(R.id.btn_1)

 

여기서 BTN은 회색으로 되어있습니다.

왜? 아직 BTN기능을 안 넣었기 때문이죠?

그렇다면 BTN에 타이머 함수를 집어넣어봅시다. 아까 위에서 했던 것 그대로요.

 

이제는 버튼을 클릭하면 변화는 함수를 위에 올려줍시다.

하지만 이대로라면 클릭을 하면, 고마워가 되겠죠? 이 고마워 대신에 저희가 방금 만들었던 스톱워치 시간 기능을 넣어봅시다.

ABC.TEXT = "고마워" 이 것을 지워서, 아래 타이머 기능을 다시 넣어봐요.

고마워는 저희가 텍스트를 불러왔던 것이니까 지워도 되죠. 대신 타이머를 넣습니다.

사진을 하나씩, 보면서 해보세요. 

한 장면 한 장면 넣었기 때문에, 공부도 되면서 만들어보시면 되겠습니다.

 

이런 식으로 버튼 클릭 시에, 시간이 넣는 것으로 만들어보았습니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var sec : Int = 0
        val abc: TextView =  findViewById(R.id.text_1)
        val btn: Button =  findViewById(R.id.btn_1)

        btn.setOnClickListener {
            timer(period = 1000,)
            {
                sec++
                runOnUiThread {
                    abc.text = sec.toString()
                }
            }
        }

이 것이 완성본이지요. TEXT_1과  BTN_1이 것은 앞에서 버튼과 텍스트 이름을 넣어 놨던 것입니다.

ABC는 텍스트이고, BTN 은 버튼입니다. 

그러면 어플을 한번 실행해봅시다.

안녕이라고 나와있는 텍스트가, 버튼을 클릭하자 시간이 가는 것을 볼 수 있습니다.

이렇게 버튼을 클릭하면, 타이머가 가능 기능을 한번 구현해봤습니다. 이 것으로 안드로이드 스탑워치 시간 가는 기능 구현하기(앱 만들기#9)를 완료하였습니다.

 

스탑워치 시간 가는 기능 구현하기 외에도 여러 기능이 있으니 확인해보세요!

안드로이드 타이머 함수 kotlin timer(앱 만들기#8)

안드로이드 타이머 함수 kotlin timer(앱 만들기#8)

안드로이드 스튜디오 버튼에 기능 넣기(앱 만들기#7)

안드로이드 스튜디오 버튼에 기능 넣기(앱 만들기#7)

android studio설치 다운로드하기 안드로이드 앱 만들기#1

android studio설치 다운로드하기 안드로이드 앱 만들기#1