[Android Studio] 안드로이드 스튜디오를 이용한 UI/프론트 공부 #2

안드로이드 어플리케이션을 만들 때 사용하는 Android Studio를 통해 UI 및 프론트에 대한 공부를 하며 그 내용들을 기록하고자 이렇게 글을 작성한다.

개발언어는 Java와 Kotlin 중 Java를 채택하여 학습하였다. Kotlin은 사용해 본 적이 없으나 Java의 경우 기본적인 기능들을 사용해 본 적이 있어 이를 선택하게 되었다.

UI 구조 확인

이번에 할 구조는 위와 같다.
다양한 버튼들을 놔두었고, 이 버튼들을 다양한 방법으로 처리하는 것을 해 볼 예정이다.
버튼의 처리가 가장 단순하고 쉬운 것이므로 두 번째에 다루게 되었다.

위에서부터 출력이 버튼 1, 삭제가 2, 노랑이 3으로 총 12개의 버튼에 대해서 어떤 방식으로 처리할 것인지를 알아볼 예정이다.

버튼들에서 발생하는 이벤트의 처리 방식

우선 기본적으로 '이벤트'의 의미를 아는 것이 중요할 것이다.
여기서 말하는 이벤트란, 어플리케이션에서 일어나는 모든 것을 의미한다. 간단한 예시를 들면 현재 저 UI에 배치된 버튼을 사용자가 누르면 이는 이벤트에 속하는 것이다.

그리고 버튼들은 전부 이벤트가 발생할 때 각자 가지는 기능, 역할을 수행한다.
그렇다면 버튼들은 각자 이벤트가 발생하는 것을 감지(인지) 할 필요가 있고 이를 감지하는 역할을 가지는 것이 '이벤트 리스너'(Event Listener) 이다.

이벤트 리스너를 통해 이벤트를 처리하는 방법은 아래의 종류와 같다

이벤트 처리방법

1. xml에서 onclick 사용하는 간단한 버튼 처리
2. 리스너클래스 직접 내부에 만들어 처리
3. 무명클래스: 리스너클래스 정의하지 말고 안에서 생성해 메소드만 사용
4. 메인액티비티에서 이벤트리스너 인터페이스 구현(메인액티비티를 리스너로)

이를 바탕으로 자바 코드에서 이벤트를 처리하는 방법에 대해 이번에 직접 해 볼 것이다.

이벤트 리스너를 통해 버튼에 들어오는 이벤트 처리하기

* 객체참조변수 먼저 만들기

우선 사용할 객체참조변수들을 먼저 만들어 볼 것이다.

public class MainActivity 
extends AppCompatActivity implements View.OnClickListener {

    TextView txtDisplay1, txtDisplay2; // 해당 형식은 객체참조변수
    LinearLayout linContainer;
    Button btnOut1, btnOut2, btnOut3;
    Button btnGreen, btnMint, btnMycolor;
    Button btnTop, btnCenter, btnBottom;
    ...
    

우선 각 버튼들에 사용할 객체참조변수를 먼저 선언하였다.
텍스트가 나타나는 TextView가 두 개이므로 txtDisplay 1, 2가 만들어졌고 나머지는 각 버튼들에 들어오는 이벤트를 처리하기 위해 만들었다.

1~3번째 버튼 처리

버튼 처리 방식은 한 줄씩 묶음으로 설명을 작성하겠다.
1번 버튼부터 3번 버튼까지는 자바 코드에 직접 이벤트를 받는 기능을 구현하는 것이 아니라 xml의 Design에서 이벤트를 받고 어떤 동작을 할 지 정해줄 것이다.

1. 1번 버튼(출력) 처리방법
   • 출력해주는 역할이므로 showMessage라는 메소드 작성

   public void showMessage(View view) {
       // view: 여기서 view 매개변수는 클릭한 버튼 객체 의미
       txtDisplay1.setText("반갑습니다");
   }

   • 이 코드를 xml의 Design에서 탑재해준다
     
   • 이러면 이벤트 처리 완성

2번, 3번도 위와 다르지 않다. 동일하게 deleteMessage, setYellowBackColor 메소드를 만들어서 Design의 Common Attributes에 있는 onClick에 추가하여 해당 기능들을 구현하였다.

2번까지 예시를 한 번 들어보도록 하겠다.

2. 2번 버튼(삭제) 처리방법
   • 삭제해주는 역할이므로 deleteMessage라는 메소드 작성

   public void deleteMessage(View view) {
        //매개변수로 반드시 view타입 매개변수 선언해야
        txtDisplay1.setText("");
    }

   • 이 코드를 xml에서 탑재해준다
     
   • 이러면 이벤트 처리 완성

두 처리방법을 보면서 xml Design을 이용하면 이벤트를 엄청 간단하게 처리할 수 있음을 알 수 있다.

4~6번째 버튼 처리

이번에는 리스너1, 리스너2, 리스너3 버튼에 대해서 해당 버튼들이 이벤트를 처리하는 방법을 구현해 볼 것이다.

첫 번째로 리스너1 버튼을 처리해 보자. 리스너1은 리스너클래스를 직접 만들어 처리하는 방법을 사용한다.

• 생성한 객체참조변수에 뷰의 ID 등록 및 리스너 객체 생성

  btnOut1 = (Button)findViewById(R.id.button4);
  
  // 리스너 클래스로부터 리스너 객체 생성
  ButtonClickListener listenerButton = new ButtonClickListener();
  
  btnOut1.setOnClickListener(listenerButton);

• 여기서 ButtonClickListener을 만든 적은 없다. 그러므로 버튼이 클릭되는 이벤트를 감지할 ButtonClickListener 리스너 클래스를 만든다.

   public class ButtonClickListener implements View.OnClickListener {
      // 반드시 클릭 이벤트를 처리하는 콜백 메서드
      @Override
      public void onClick(View view) {
          txtDisplay2.setText("abc");
      }
   }

• 위에서 ButtonClickListener 타입으로 listenerButton을 선언하여 리스너 객체를 생성한 후 btnOut1에 listenerButton을 연결하여 이벤트를 처리한다.

이로서 리스너1 버튼의 이벤트 처리가 완료되었다.
이제 두 번째인 리스너2 버튼의 이벤트 처리를 할 것이다.

리스너2 버튼은 위의 방법과 다르게 무명 클래스를 사용하는 방법으로 이벤트를 처리해 볼 것이다.

• 생성한 객체참조변수에 뷰의 ID 등록 수행

  btnOut2 = (Button)findViewById(R.id.button5);

• 이번에는 리스너 클래스를 직접 만들지 않고 무명 클래스를 만들어 바로 onClick 메소드를 사용

  btnOut2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                txtDisplay2.setText("cba");
            }
   });
   //view.OnClickListener을 사용하면 자동으로 콜백 메소드가 생성됨.

여기서는 setOnClickListener에서 바로 OnClickListerner객체를 생성하며 이름을 부여받지 않은 무명클래스가 생성되는 것을 볼 수 있다.

무명클래스가 생성되면 자동으로 OnClick 콜백 메소드가 생성되며 여기에 버튼에 대한 이벤트가 발생하면 그 이벤트의 처리를 어떻게 할 것인지 작성할 수 있다.

이렇게 리스너2 버튼에 대한 이벤트 처리가 완료되었다.
무명클래스를 이용하는 방식은 간단한 이벤트 처리에서 유용하게 쓰일 수 있다.

마지막 리스너3 버튼은 또 앞선 버튼들과 처리 방식이 다르다.

해당 버튼의 이벤트 처리는 현재 페이지를 구성하는 MainActivity 클래스에 리스너 인터페이스를 구현하여 MainActivity 내부에 OnClick 콜백 메소드를 만들어 처리하는 방식이다.

• 생성한 객체참조변수에 뷰의 ID 등록 수행

  btnOut3 = (Button) findViewById(R.id.button6);

• MainActivity 클래스에 OnClickListener을 implement

  public class MainActivity extends AppCompatActivity implements View.OnClickListener {
  ...

  • 이를 통해서 메인액티비티 클래스를 리스너 클래스로 사용한다
• 아래에 자동으로 생성된 콜백메소드인 onClick 메소드를 사용해 이벤트 처리

  @Override
    public void onClick(View view) {
        txtDisplay2.setText("bca");
    }

이벤트 처리 방법은 위와 같이 총 네 가지 종류로 나뉘어서 이벤트를 감지, 처리하고 있다.
다양한 방법이지만, 모든 상황에서 모든 방법이 다 효율적이진 않을 것이다.
각 상황에 따라 효율적으로 사용하는 것이 중요할 것으로 보인다.

우선 이번에는 버튼 이벤트 처리를 여기까지 하고, 추후 남은 여섯 가지의 버튼을 처리하는 방법에 대해 정리하도록 하겠다.