Button

버튼


버튼은 사용자가 클릭시 개발자가 작성한 코드가 동작하는 뷰입니다.

주요 속성

-text

버튼에 표시되는 문자열을 설정합니다.
textView의 text속성과 동일합니다.

주요 리스너

-OnClickListener

사용자가 버튼을 클릭 했을때 반응해 해당하는 코드를 실행하는 리스너입니다.


버튼의 리스너를 설정하는 방법은 크게 두가지가 있습니다.

첫째, 리스너 클래스를 새로 만들고 객체를 생성해 내부에 리스너를 추가해 작성합니다.
둘째, 람다식을 이용해 내부에 바로 리스너 작성합니다.

개인적으로는 람다식을 이용하는 두번째 방법이 더 편리하다고 생각합니다.
그러나 상황에 따라 자신이 편하다고 생각하는 첫번째와 두번째 방법 중 상황에 맞게 사용하시면 됩니다.

먼저 완성된 예제를 보겠습니다.

텍스트뷰와 버튼으로만 이루어진 간단한 예제입니다.
각각

상단은 텍스트뷰, 클래스 리스너를 이용한 버튼 3개
하단은 텍스트뷰, 람다식 리스너를 이용한 버튼 3개
입니다.

예제에 관련한 XML코드를 보여드리겠습니다.




XML코드로 버튼과 텍스트뷰같은 위젯들을 만들었다면 그 위젯들을 동작하게 할 코드도 필요합니다.
버튼을 동작하게 하는 코틀린 코드를 보겠습니다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
class MainActivity : AppCompatActivity() {

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

        var listener =btlistener()
        button.setOnClickListener(listener)
    }

    inner class btlistener:View.OnClickListener{
        override fun onClick(v: View?) {
            textView.text ="1번 버튼이 눌렸습니다."
        }
    }
}

11번째 줄에서  inner class 라는 중첩 클래스를 이용하여 버튼을 클릭 했을때 동작할 코드를 작성합니다.

inner class 인 btlistener 클래스는 OnClickListener를 상속 받고 있습니다.
또한 btlistener 클래스는 내부에서 onClick 메소드를 오버라이딩 하고 있습니다.
onClick 메소드 내에 textView.text ="텍스트 변경" 등 속성에 관련된 코드를 작성하면 해당 리스너를 통해 작성한 코드가 실행되게 됩니다.

버튼을 클릭하면 실행되게 될 코드를 가진 btlistener 이라는 리스너 클래스를 만들었습니다.
이제 이 리스너 클래스를 실제로 동작하도록 해야하는데 어떤 방법이 있을까요?

7번째 줄로 올라가보면 의문에 대한 답이 보입니다.
var 키워드를 통해 listener 라는 객체를 생성해 줍니다.
listener 객체는 btlistener 이라는 클래스를 담고 있습니다.

8번째 줄에서는 button이라는 이름을 가진 위젯을 클릭시 
대응할 리스너를 넣을 수가 있습니다.
괄호 안에 listener 이라는 리스너를 세팅을 하였습니다.

이제 button을 클릭 시 해당하는 리스너가 실행되어 11번째 줄에 있는 텍스트뷰의 텍스트 변경이 이루어 집니다.


리스너 클래스 역시 버튼 하나하나씩 따로따로 리스너 클래스를 구현하고 객체를 만들고 버튼 마다 개별적으로 적용할 필요는 없습니다.

아래의 코드를 보자면 위에서 살펴본 코드와 유사하지만 다른점이 한가지 있습니다.

바로 when문을 활용했다는 것, 입니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class MainActivity : AppCompatActivity() {

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

        var listener2 =btlistener2()

        button2.setOnClickListener(listener2)
        button3.setOnClickListener(listener2)

    }
    inner class btlistener2:View.OnClickListener{
        override fun onClick(v: View?) {
            when(v?.id){
                R.id.button2 ->
                    textView.text ="2번 버튼이 눌렸습니다."
                R.id.button3 ->
                    textView.text ="3번 버튼이 눌렸습니다."
            }

        }
    }
}

13번째 줄에서는 마찬가지로 OnClickListener을 상속받은 
btlistener2라는 클래스를 만들었습니다.

여기서 중요한 부분이 있습니다.
14번째 줄에서 onClick 메소드 옆의 괄호에 'v' 라는 변수가 보입니다.
여기서 'v'는 무엇을 의미할까요?
바로 리스너 실행시 onClick된 즉, 리스너에서 클릭된 위젯의 주소가 들어오게됩니다.

15번째 줄에서 보이듯 when문을 이용해 'v'라는 변수의 아이디를 조건식에 넣고
만약 R.id.button2 레이아웃의 아이디가 button2 일때 텍스트뷰의 텍스트를 수정한다.
이와 같습니다.

그 이후에는 위에서 설명드린 클래스를 이용한 button 클릭 리스너와 동일합니다.


람다

이번에는 람다식을 이용해 코드를 작성하는 것에 대해 살펴보겠습니다.

저는 개인적으로 람다식을 이용하는 것이 편리해 되도록이면 람다식을 위주로 사용해 코드를 작성하고 있습니다.

먼저 코드를 살펴보겠습니다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
class MainActivity : AppCompatActivity() {

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

         rdbutton.setOnClickListener { v ->
            textView2.text ="람다 버튼 1번이 뉼렸습니다."
        }
    }
}

네, 이게 끝입니다.

이렇게 간단한 코드를 살펴보면 7번째 줄에서 rdbutton.setOnClickListener
즉,
rdbutton이라는 버튼을 setOnClickListener이라는 리스너를 이용해 람다식을 열고 텍스트뷰의 텍스트 수정과 같은 코드를 작성하면 끝입니다.
이 코드는 중첩 클래스를 만들고 리스너 객체를 만들어 버튼의 클릭 리스너에 장착 시키는 것과 같은 동작을 하지만 람다식을 이용하면 훨씬 더 직관적이고 간편하게 표현이 가능합니다.


마찬가지로 when문을 이용해 전개가 가능합니다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
class MainActivity : AppCompatActivity() {

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

          var rdlistener =View.OnClickListener { v ->
            when(v.id){
                R.id.rdbutton2 ->
                    textView2.text ="람다 버튼 2번이 눌렸습니다."
                R.id.rdbutton3 ->
                    textView2.text ="람다 버튼 3번이 눌렸습니다."
            }
        }

        rdbutton2.setOnClickListener(rdlistener)
        rdbutton3.setOnClickListener(rdlistener)
    }
}
rdlistener이라는 리스너를 만들고 OnClickListener를 통해 람다식을 전개해주고
7번째 줄의 v -> 에는 클릭한 위젯의 주소가 들어오므로 마찬가지로 when문을 통해 전개해주시면 됩니다.
끝으로 16, 17번째 줄과 같이 버튼의 리스너에 
rdlistener이라는 리스너를 장착해 주시면 작성 완료입니다.


이번 포스팅에서는 버튼에 대해 살펴보았습니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

Google Map(구글 지도 사용하기)

안드로이드는 애플리케이션에서 지도를 사용할 수 있도록 구글 지도 API를 제공하고 있습니다. 간단한 설정 만으로도 지도를 표시할 수가 있습니다. MapFragment를 활용하면 간단한 설정으로도 구글 맵을 애플리케이션에 배치해 이용할 수가 있습니다.
자세한 내용 보기