안드로이드 스튜디오 seek bar 사용 방법 Kotlin

안녕하세요. 공돌이 입니다.

안드로이드 스튜디오, android studio를 활용하여 어플리케이션(앱)을 만들 때 hello world를 출력하는 방법을 서두로 많은 책들이 시작합니다. 본 블로그에서도 기초적인 부분부터 모든 부분을 다 다루면 좋겠지만, 개발하면서 느꼈던 어려웠던 부분과, one point lesson이 될 수 있는 key point를 남겨 보고자 합니다. 그리고 kotlin 코틀린언어를 기본으로 하여 해당 내용을 소개 하겠습니다. 본 글에서 소개할 내용은 seek bar입니다. 아래 그림처럼 우리가 주로 휴대폰 화면에서 볼 수 있는 user interface (UI)입니다.

 

이 UI는 소리 크기, 화면 밝기, 음악/동영상 위치 이동처럼 특정 크기의 변화에 대해서 관리를 하기에 매우 용의합니다. 아마 하루에도 몇 번씩 소리를 주릴 때, 화면 밝기를 밖에서 조절할 때 사용을 하고 계시겠죠? 이 seek bar는 Palette에서 seekbar로 검색하면 아래 그림처럼 쉽게 찾아서 사용이 가능합니다.

 

이 seek bar는 다양한 앱에서 다양한 디자인으로 사용이 되고 있습니다. Seek bar의 유저가 터치할 빨간 공을 다른 모양으로 변경하거나, 뒤의 회색 선을 다른 색으로 혹은 크기를 더 크게, 빨간색 공이 가운데로 왔을 때 이미 지나온 길에 대한 선 색의 변경 등 다양한 옵션이 존재합니다. Seek bar의 변경하는 옵션 방법에 대해서는 seek bar 변경, seek bar change 등으로 google에서 검색을 하시면 많은 결과를 얻으실 수 있습니다.

이번 본문에서 콕 집어서 다루고 싶은 내용은 저 seek bar에 대해 만약 사용자 터치를 허용하고 싶지 않을 경우와, seek bar 모양을 바꾸고 싶은 경우에 대해서 code를 함께 공유하고 제가 개발한 어플을 예시로 공유하고자 합니다.

Seek bar는 사용자가 터치를 해서 빨간색 공의 위치를 바꿀 수도 있지만, 개발자가 직접 값을 입력하여 위치를 변경할 수 있습니다. 다음 코드를 보겠습니다. seekBar에 대해서 id를 seekbar로 저는 설정 하였고, 아래처럼 onCreate 이후에 seekbar.progress = 10 이라고 적은 것을 보실 수 있습니다.

 

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_wireaction)

    seekbar.progress = 10

 

즉 seekbar.progress에서 seekbar는 id를 나타내고, .progress는 seekbar의 상태를 나타내게 됩니다. 코드를 해석해 보면 id가 seekbar인 UI에대해서 progress 즉 진행상태를 = 10, 10 만큼 변경 시켜주세요 라는 의미가 됩니다. 만약 seekbar.progress = 50 이라고 쓰신다면 어플 실행 시 빨간색 공이 정 가운데로 변경된 것을 확인하실 수 있습니다. 아래 그림이 그 예시입니다.

 

 

이 방법을 이용하면 원하는 위치에 해당 빨간색 공을 두고 시작할 수 있으며, 응용으로는 음악 볼륨을 중간 지점으로 기본 디폴트 (default) 설정을 하거나, 게임 속도를 조절하는 등 다양하게 응용이 가능합니다.

빨간색 공에 대해서 개발자에 따라 취향이 있고, 앱 성격에 맞춰 바꿔야 하는 상황이 발생합니다. 이 빨간색 공은 thumb 로 불리고 있으며, thumb를 어떤 것으로 하면 되는지 이미지 파일에 대한 경로를 설정하면 됩니다. Layout의 코드에서 android:thumb="@drawable/test_img" 로 저는 test_img로 drawable 폴더에 있는 파일을 선택 하였습니다. 간다 합니다. 다만 결과는 아래 그림과 같습니다.

 

 

우측 결과처럼 그림의 크기가 말도 안되게 커지게 됩니다. 그렇다고 이미지 size를 처음부터 줄여서 넣으니 해상도가 깨지고 예쁘지 않은 모습이었습니다. 그래서 google 검색을 통한 thumb의 size 감소 방법에 대해서 열심히 찾았습니다. 그 결과 drawable 폴더 안에 thumb_user 라는 파일을 새롭게 만들어야 했습니다. 먼저 drawable 폴더 위에서 우클릭 -> New -> drawable resource file로 새롭게 하나 만듭니다. 저는 thumb_user.xml로 이름을 명명했습니다. 그리고 아래처럼 코딩을 진행했습니다. Item에 대해서는 위에서 언급한 drawable/test_img이고, size 정보는 <shape> 로 열어 size를 width, height로 나누어 설정을 진행했습니다. 하지만! 이 방법은 seek bar의 thumb 크기에 대해서 조절이 되지 않는 방법이었습니다. (~~~은 그냥 지웠습니다. 개인 화면에 보이시는 것 쓰시면 됩니다)

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.~~~~~~~~~~~~~~~~~~~~~">
    <item android:drawable="@drawable/test_img">
        <shape>
            <size
                android:width="10dp"
                android:height="10dp"
                />
        </shape>
    </item>
</layer-list>

 

모범 답안을 바로 다음 아래에 제시된 코드입니다. 아주 깔금하게 정리가 된 모습입니다 따로 <shape>, <size>로 선언하지 않고, item에 경로와 width, height 정보를 바로 입력한 모습니다.

 

<layer-list xmlns:android="http://schemas.~~~~~~~~~~~~~~">
    <item android:drawable="@drawable/test_img" android:width="50dp" android:height="90dp">
    </item>
</layer-list>

 

이렇게, drawable 폴더에 thumb_user.xml을 만드셨다면 다시 layout으로 돌아가서 기존에 적어둔 android:thumb="@drawable/test_img" 를 다음처럼  android:thumb="@drawable/thumb_user" 로 변경을 해 주셔야 합니다. 이렇게 하고 simulation을 돌려보면 아래와 같은 결과를 얻으실 수 있습니다. 개인이 설정한 크기의 아이콘으로 seek bar의 빨간 공이 캐릭터로 변경된 모습입니다.

 

 

이와 같이 seek bar의 시작 지점의 변경 방법과, seek bar의 빨간 공, thumb에 대해서 변경하는 방법에 대해서 적어 보았습니다. 해당 내용을 공부하면서 번쩍인 것은, seek bar를 이용하면 달리기 게임을 만드는 것도 가능하다고 생각했습니다. 즉 사용자가 버튼을 누르면 특정 수치만큼 캐릭터가 앞으로 전진하는 것이지요. 또 상대할 컴퓨터는 random 함수를 사용하여 순차적으로 이동하는 거리를 다르게 하면 사람 vs 컴퓨터의 달리기 경주가 가능하겠다고 생각했습니다. 해당 내용을 게임으로 구현한 것이 아래 두 링크입니다. 다운 받아 보셔서 체험해 보시면 이해하기 쉬울 것으로 생각합니다.

 

https://play.google.com/store/apps/details?id=com.goodtobebnb.brainminigame

두뇌미니게임-brain mini game - Google Play 앱

https://play.google.com/store/apps/details?id=com.goodtobebnb.brainstudygame

두뇌활동게임-치매 예방 및 반사 신경 운동 - Google Play 앱

이렇게 간단한 게임을 만들면서도 또 하나의 문제가 있었습니다. 바로 seek bar의 특징 때문입니다. Seek bar는 유저가 직접 터치하여 움직일 수 있다는 것입니다. 아무리 버튼을 눌러도, 컴퓨터가 스스로 캐릭터를 움직이더라도 유저가 만져서 캐릭터가 이동해 버리면 의미가 없는 것이지요. 물론! 캐릭터를 멈추게 하는 역 발상의 활용도 가능합니다. 다만 이번 달리기 경주에서는 유저의 불필요한 터치를 막아야 했기 때문에 아래와 같은 코드로 seek bar 터치를 막았습니다. 위에서 progress를 사용하여 초기 시작 위치를 바꾸었다면, 이번에는 .setEnabled 라는 명령어를 사용 하였습니다. Progress 아래 줄에 seekbar.setEnabled(false) 라고 작성을 하였습니다. 코드를 해석해 보면 id가 seekbar에 대해서 사용자가 사용할 수 있는 여부에 대해 setenabled()확인을 하면 () 괄혹 속에 false라고 적음으로써, 유저가 터치 하지 못 하도록 막는다는 뜻 입니다.

 

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContentView(R.layout.activity_wireaction)

    seekbar.progress = 10

    seekbar.setEnabled(false)

 

이렇게 한줄 추가함으로써 이제 seek bar는 화면에 나타나지만 터치를 할 수 없는 상태가 됩니다. 이 방식을 잘 활용하면 불필요한 터치를 막을 수도 있고, 다시 그 기능을 살릴 수도 있게 됩니다. 살릴 경우에는 false 자리에 true 라고 표기하시면 됩니다.

 

쓰고 보니 정말 단순한 결과이지만, 이 내용을 터득하기 위해 새벽까지 고생했던 기억이 새록새록나네요. 도움이 되었다면 좋겠습니다.

 

감사합니다.