안녕하세요, 반갑습니다!
게임을 처음 다운로드 할 때,
음악이 재생되고 있을 때,
무언가가 백그라운드에서 진행되고 있을 때,
개발자인 우리는 사용자에게 '무언가' 를 보여줘야 합니다.
안그러면 사용자는 음악을 얼마나 들었는지, 게임은 언제할 수 있는지 전~혀 모르기 때문이죠
그래서 반드시 이 기능을 사용해야 합니다.
무언가 진행되고 있는 것을 직관적으로 보여줄 수 있는 UI 입니다.
프로그래스바 (ProgressBar)
진행도를 %로 보여주는 UI 입니다.
최근에는 앱 설치 후 다운로드 하는 경우가 많기 때문에 게임에서 많이 볼 수 있구요.
음악, 동영상 플레이어에서도 많이 사용됩니다.
다운로드 받을 때도 당연히 사용되구요.
그럼, 바로 만들어 보겠습니다.
1. .xml 에 ProgressBar 설치하기
ProgressBar 에는 두 가지 종류가 있습니다.
네트워크 연결 등 언제 끝날지 모르는 경우 와 다운로드 등 언제 끝나는지를 아는 경우!
이 두가지 프로그래스바는 작동방법은 거의 동일합니다.
진행율을 보여주거나 안보여주거나의 차이일 뿐이죠.
Widgets 의 ProgressBar 를 원하는 위치에 배치해 주세요.
아이콘의 모양에서도 알 수 있듯이 이 프로그래스바는 언제 끝날지 모르는 경우의 프로그래스바 입니다.
그저 Loading... 임을 보여줄 뿐이죠.
이건 얼마나 기다려야 끝나는지 아는 경우에 사용할 수 있는 프로그래스바 입니다.
저는 아래 이미지 처럼 배치했습니다.
하단의 이미지 가져오기 버튼을 터치하면, 프로그래스바가 나타났다가 전체화면으로 이미지를 보여주도록 했습니다.
2. ProgreessBar 의 상태 미리 지정해두기
프로그래스바를 배치했지만, 처음부터 보이면 안되겠죠?
백그라운드 작업 등이 있을때만 사용자에게 보여줘야 합니다.
아래처럼 프로그래스바를 보이지 않게 해주세요.
override fun onCreate(savedInstanceState: Bundle?) {
init()
}
private fun init() {
showProgress(false)
}
fun showProgress(isShow:Boolean) {
if (isShow) progress.visibility = View.VISIBLE
else progress.visibility = View.GONE
}
물론, 이렇게 소스에서 처리해줄 수도 있지만 xml 에서도 보이지 않게 속성을 설정할 수 있습니다.
<LinearLayout
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:visibility="invisible">
<ProgressBar
style="@android:style/Widget.Holo.ProgressBar.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Loading.." />
</LinearLayout>프로그래스바(ProgressBar) 와 Loading.. 글자를 감싸고 있는 Layout 만 보였다가 보이지 않게 하면 되기 때문에 Layout에 속성을 설정해 주었습니다.
3. ProgressBar 가 띄우기
이제 이미지 가져오기 버튼을 눌렀을 때, 프로그래스바가 나타납니다.
실제로는 데이터를 다운로드 시작하거나 음악 등이 시작될때 나타나도록 하면 되겠죠?
저는 간단하게 Thread 를 이용해서 몇초간만 띄우도록 하겠습니다.
btn.setOnClickListener {
showProgress(true)
thread (start = true) {
Thread.sleep(3000)
runOnUiThread {
showProgress(false)
setPicture()
}
}
}
버튼을 터치하면 프로그래스바(ProgressBar) 가 나타납니다.
그리고 thread(start = true) 를 통해 백그라운드에서 Thread.Sleep(3000) 가 작동하게 됩니다.
(※1000밀리초는 1초입니다)
3초가 지난 후, 프로그래스바(ProgressBar) 는 사라집니다.
그리고 이미지가 짠 하고 나오게 됩니다.
어떠신가요? 잘 작동하시나요?
그런데 지금 같이 Thread 를 이용하게 도면 반드시 지켜주셔야 할 것이 있습니다.
4. Thread 사용시 꼭 지켜야 할 것!
Ui 는 반드시 메인 Thread 에서 실행, 변경되어야 한다는 것입니다.
btn.setOnClickListener {
.
.
.
runOnUiThread {
showProgress(false)
setPicture()
}
}
}
안드로이드는 어떤 Thread 에 있어도 항상 메인Thread 에서 실행될 수 있도록 간단한 방법을 제시하고 있습니다.
바로 runOnUiThread { } 입니다.
이 점만 유의하셔서 만들어 주신다면 프로그래스바(ProgressBar) 를 이용해서 멋진 앱을 만드실 수 있습니다.
그럼 완성입니다!
감사합니다.