본문 바로가기

Android Tutorial/Button

[Android Tutorial #04] Button(버튼)과 클릭 이벤트



안드로이드 튜토리얼 목차 - Android Tutorial List

[Android Tutorial #04] Button(버튼)과 클릭 이벤트

이번에는 화면에 버튼을 만들어보고,
버튼에 대한 클릭 이벤트를 처리하는 방식에 대해 알아보도록 하겠습니다.




 Button(버튼) 만들기 - Layout XML

화면에 버튼과 같은 [뷰]를 보여줄 수 있는 방법에는 2가지가 있습니다.

하나는 자바파일에서 뷰를 생성해서 액티비티에 추가하는 방법,
다른 하나는 뷰가 배치된 layout xml 파일을 만들어 두고 Activity에 연결하는 방법입니다. 


여기서는 xml파일에 버튼을 만들어서 Activity와 연결하는 방법을 사용하도록 하겠습니다.





왼쪽의 프로젝트를 보면,
res/layout 폴더main.xml 파일이 있습니다.

이 파일은 안드로이드 프로젝트 생성시 기본적으로 layout폴더에 추가되는 파일입니다.

또 프로젝트 생성시 Create Activity를 체크했다면, 이렇게 만들어진 Activity에 연결되어있는 layout xml 파일이기도 합니다. 









기본적으로 생성된 main.xml 파일은 아래와 같은 구조로 되어있습니다. 


전체 화면에 TextView하나를 두고 그곳에 [Hello World, ...] 라는 텍스트를 출력해주는거죠.
(이렇게 출력되는 것은  [Android Tutorial #03]에서 확인할 수 있습니다.)

지금은 버튼을 화면에 보여줄 것이므로, <TextView ... /> 태그를 지워줍니다


그리고 Button 하나를 추가해줍니다.



변경후의 main.xml 





만들어진 layout xml을 Graphic Layout으로 확인하면 이런 모습이 됩니다.






 Button 연결하기, Button에 클릭 리스너 등록하기



위에서 main.xml에  Button을 만들었습니다.(main_button)
 

이제 이 Button을 컨트롤 하기 위해서 Activity에서 처리를 해주어야 합니다.

src폴더의 me.croute.tutorial.example04 패키지에 있는, AndroidTutorial04Activity.java 파일을 열어줍니다.



 




프로젝트 생성시 기본적으로 생성되는 Activity



onCreate 메소드 안의 setContentView(R.layout.main);
이 코드는 res/layout/main.xml 파일을 View로 바꾸어 화면에 보여주도록 하는 코드입니다.




이제 여기에다 우리에게 필요한 코드를 추가해 봅니다.

버튼의 연결과 버튼 클릭 이벤트가 추가된 Activity





1. Java의 버튼과 xml의 버튼 연결
// 사용할 버튼을 선언해준다.
Button button;         
// Java의 button 객체를 main.xml의 버튼(id가 main_button)과 연결해준다.
button = (Button) findViewById(R.id.main_button);

findViewByIdresource의 id(int type)을 통해 View를 찾아주는 메소드입니다.
res 폴더내에서 무언가가 변경이 되면, Android는 자동적으로 R.java 파일에 리소스를 추가합니다.
프로젝트 내의 어디서라도 R.layout / R.drawable / R.id 를 통해 리소스에 접근할 수 있습니다. 


위에서 선언해 놓은 button에 id가 main_button인 View(여기서는 버튼)을 연결해주는거죠.



2. 버튼에 클릭이벤트 처리를 위한 리스너 등록
// 버튼의 클릭이벤트를 처리하기 위해 클릭리스너를 버튼에 등록해준다.
button.setOnClickListener(클릭리스너);

버튼을 포함한 모든 View는 setOnClickListener라는 메소드를 가지고 있습니다.
이 메소드를 통해 클릭리스너를 등록하면, 해당 View에 클릭 이벤트가 발생했을 때, 파라미터로 넘겨준 클릭리스너가 클릭 이벤트를 처리할 수 있게됩니다. 


여기서는 아래와 같이 OnClickListener를 상속받아서 클릭 리스너를 만들어 보았습니다.
new OnClickListener()
{
    // 파라미터로 넘어오는 View는 현재 클릭된 View이다.     // 현재 클릭된 View는 button이다.
    public void onClick(View v)
    {
        // 이곳에 클릭되었을 때 실행할 코드를 추가한다!
    }
}



3. 클릭이벤트 처리
OnClickListener의 onClick(View v)메소드에서 클릭이벤트를 처리할 수 있습니다.
 

public void onClick(View v)
{
    Button clickedButton = (Button) v;
 
           
    // 클릭 횟수를 1 증가시킨다.    clickCount++;                 
    // 클릭된 시각을 받아온다.     clickTime = new Date().toString();                
    // 버튼의 텍스트를 현재의 데이터로 변경해준다.     clickedButton.setText(clickCount + "번,   " + clickTime);
}

여기서는 클릭 횟수를 증가시키고,
클릭된 현재 시각을 받아와 버튼의 텍스트에 출력하는 처리를 해보았습니다.

Button은 setText()라는 메소드를 통해, Button에 써져있는 텍스트를 변경 할 수 있습니다. 




 
 정리
 
 Button button; 과 같이 버튼을 선언해준다.
 button = (Button) findViewById(R.id.버튼아이디) 메소드를 통해 뷰(버튼)을 가져와 버튼을 연결해준다.
 button.setOnClickListener(OnClickListener) 메소드를 통해 클릭 리스너를 등록해준다.
 OnClickListener의 onClick(View view) 메소드를 재구현(override)해서 클릭 이벤트 발생시의 처리를 해준다.
 





 프로젝트 실행결과

애플리케이션 실행시 처음으로 보이는 화면입니다. 위에서 만든데로 잘 실행이 되었습니다.




클릭하세요! 라고 써져있으니, 클릭해 봅니다.
클릭된 횟수와, 클릭했을때의 시각이 잘 출력되는것을 확인할 수 있습니다. 





프로젝트 압축파일 - AndroidTutorial04.zip

AndroidTutorial04.zip