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

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

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

UI 구조 확인

UI구조는 저번과 동일하며, 저번에 수행한 상단의 여섯 개 버튼을 제외하고 나머지 버튼들을 구현하는 방법에 대해 알아볼 것이다.

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

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

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

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

이벤트 처리방법

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

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

이번에 해 볼 버튼들은 저번에 사용했던 무명 클래스와 직접 리스너 클래스를 생성하는 방법을 사용해 볼 예정이다.

7~9번째 버튼 처리

이번에는 초록, 민트, MyColor 버튼에 대해서 해당 버튼들이 이벤트를 처리하는 방법을 구현해 볼 것이다.

첫 번째로 초록 버튼을 처리해 보자. 초록 버튼은 텍스트뷰의 배경 색상을 초록색으로 변경 해 주는 버튼이며, 무명클래스를 통해 처리하는 방법을 사용한다.

Button btnGreen, btnMint, btnMycolor;
btnGreen = (Button) findViewById(R.id.button7);

우선 각 버튼들의 객체를 미리 생성해둔다. 그리고 지금 사용할 btnGreen 객체참조변수에 7번째 버튼을 할당한다.

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

  	btnGreen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                txtDisplay2.setBackgroundColor(Color.GREEN);
            }
    });
   //setBackgroundColor을 사용하면 텍스트뷰의 배경 색상 변경 가능
   //Color.GREEN은 안드로이드 스튜디오에 기본적으로 존재하는 색상값

• 이렇게 하면 무명 클래스를 이용하는 간단한 텍스트 뷰의 배경 색상 변경 버튼 이벤트 처리가 완료된 것

두 번째로는 민트 버튼을 처리할 것이다. 민트 버튼도 초록 버튼과 마찬가지로 처리하지만, 색상 변경을 수행하는 방식에서 차이가 있으므로 색상을 처리하는 방법에 중점을 두어 알아볼 것이다.

• 동일하게 리스너 클래스를 직접 만들지 않고 무명 클래스를 활용해 onClick 메소드를 활용함

// 민트색 배경 버튼
btnMint = (Button) findViewById(R.id.button8);
btnMint.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View view) {
         // RGB컬러를 문자열로 지정하는 방법은 두 가지임
         // 1. txtDisplay2.setBackgroundColor(Color.parseColor("#DCFFFA"));
         txtDisplay2.setBackgroundColor(Color.rgb(220, 255,250));
     }
 });

• 앞에서 초록 배경을 설정 할 때는 Color.GREEN 을 사용해 배경 색상을 설정했으나 설정 방법은 이보다 더 다양하다
  • 색상 설정 방법

    1. 안드로이드 스튜디오에 이미 있는 색상값 (Color)을 활용
    2. Color.parseColor을 이용해 컬러코드로 색상값 입력
    3. Color.rgb(r,g,b)를 이용해 rgb값으로 색상 선택

  • 위 방법들 중 하나 원하는 방법을 사용해 색상을 설정하면 된다.

마지막 세 번째 버튼의 구현은 앞서 설명한 두 버튼과 구현이 약간 다르게 수행된다.

• 생성한 객체참조변수에 버튼의 ID를 할당하는 것은 동일

btnMycolor = (Button) findViewById(R.id.button9);

• 그리고 이번에는 resource의 values 폴더에 있는 colors.xml을 활용해 직접 커스텀 컬러를 만들어 둔 후 이를 활용할 것

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="mycolor">#FFB83E</color>
</resources>

• 여기서 생성한 'mycolor'이란 이름의 color 리소스는 직접 생성한 color 리소스이다. java파일에서 이 색상값을 활용할 수 있다.

btnMycolor.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View view) {
         // 해당 방법은 컬러 리소스(color.xml)을 가져와 사용하는 방법, 리소스의 컬러를 값으로 정의해야 함
         int color = getResources().getColor(R.color.mycolor);
         txtDisplay2.setBackgroundColor(color);
     }
 });
 //int color에 color.xml에 생성해 둔 mycolor의 값을 불러와 색상을 설정하도록 만든다.

• getResources()는 res폴더에 있는 리소스를 활용한다는 것
• getColor()은 리소스에 존재하는 color 리소스를 가져온다는 것

여기서는 앞의 두 버튼과 다르게 컬러 리소스를 color.xml에 미리 생성한 후, 만들어 둔 컬러 리소스를 활용하는 점에서 앞의 버튼들과 좀 다르다고 볼 수 있다.

이 방법을 사용한다면 자주 사용하는 컬러값에 대해서 리소스로 따로 분리해 저장해 둔 후 재사용하기 편리하다는 점에서 장점이라고 볼 수 있다.

10~12번째 버튼 처리

이번에는 텍스트를 정렬하는 위, 중간, 아래 버튼에 대해서 해당 버튼들이 이벤트를 처리하는 방법을 구현해 볼 것이다.

텍스트 정렬 버튼을 위해서 리스너 클래스를 직접 정의 해 활용할 것이다.

구현 과정은 아래와 같다.

• 생성된 객체참조변수에 버튼의 ID들을 각각 할당

btnTop = (Button) findViewById(R.id.button10);
btnCenter = (Button) findViewById(R.id.button11);
btnBottom = (Button) findViewById(R.id.button12);

• 정렬 버튼을 효율적으로 구현해 사용하기 위해 정렬 버튼을 위한 리스너 클래스를 직접 구현

	public class TextAlignClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            // 매개변수 view: 버튼 정보를 의미
            int viewId = view.getId();
            if (viewId == R.id.button10) {
                // R.id.button10에 대한 처리
                txtDisplay2.setGravity(Gravity.TOP);
            } else if (viewId == R.id.button11) {
                // R.id.button11에 대한 처리
                txtDisplay2.setGravity(Gravity.CENTER);
            } else if (viewId == R.id.button12) {
                // R.id.button12에 대한 처리
                txtDisplay2.setGravity(Gravity.BOTTOM);
            }
        }
    }
    // setGravity(): 정렬기준을 설정하는 메소드
    // 텍스트를 정렬하는 것이므로 TextAlignClickListener이라는 이름 부여
    // int viewId에 클릭된 뷰의 ID값을 가져오는 getId()를 사용해 클릭된 뷰의 ID값 할당

• 직접 생성한 리스너 클래스를 각 버튼에 연결

btnTop.setOnClickListener(new TextAlignClickListener());
btnCenter.setOnClickListener(new TextAlignClickListener());
btnBottom.setOnClickListener(new TextAlignClickListener());

이번에는 새로운 리스너 클래스를 직접 만들어서 정렬을 수행하는 버튼을 구현했다. 새로운 리스너 클래스 속에서는 getId()를 이용해 ID를 받아오고, 받아온 ID값을 이용해 어떤 버튼이 눌렸는지 구분하여 정렬을 어떻게 수행할 지를 선택하는 리스너 클래스를 생성했다.

이렇게 하면 완벽히 세 버튼을 위한 리스너 클래스를 생성한 것이므로 클래스 하나를 이용해 세 버튼을 처리할 수 있다.

마무리

이번 연습을 통해서 리스너 클래스를 활용하는 다양한 상황에 대해서 연습 해 볼 수 있었다. 다음번에는 다른 기능을 활용하는 법을 연습할 예정이다.

리스너 클래스는 다양한 이벤트를 처리하기 위해선 기본적인 구조이기에 암기하지는 않더라도 안드로이드 스튜디오를 활용하기 위해선 그 기본 구조를 잊어서는 안될 것으로 보인다.