[Android] 이벤트 리스너 예제

이전 내용

[Android] 텍스트뷰 동적 생성

---

이벤트 리스너

 

이벤트 리스너는 사용자와의 상호작용을 처리하기 위한 중요한 구성 요소다. 사용자가 특정 작업(예: 버튼 클릭, 터치, 스와이프 등)을 수행할 때, 이벤트 리스너는 해당 이벤트에 대한 반응을 정의할 수 있다.

• 이벤트: 사용자의 입력(터치, 클릭 등) 또는 시스템에서 발생하는 특정 작업.
• 리스너: 이벤트가 발생했을 때 수행할 작업을 정의하는 인터페이스

---

주로 사용하는 이벤트 리스너

 

- OnClickListener: 버튼 클릭과 같은 클릭 이벤트를 처리

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 클릭 시 수행할 동작
    }
});

 

- OnLongClickListener: 버튼이나 뷰를 길게 눌렀을 때 발생하는 이벤트를 처리

button.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(View v) {
        // 길게 눌렀을 때 수행할 동작
        return true; // true를 반환하면 이벤트가 처리되었음을 나타냄
    }
});

 

- OnTouchListener: 뷰에 대한 터치 이벤트를 처리. 사용자의 터치 동작(터치 시작, 이동, 종료 등)을 모두 감지할 수 있다.

view.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // 터치 시 수행할 동작
        return true; // 이벤트가 처리되었음을 나타냄
    }
});

 

- OnFocusChangeListener: 뷰의 포커스 변화(포커스 얻음/잃음)를 감지

editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        // 포커스 상태에 따라 수행할 동작
    }
});

 

- OnKeyListener: 키보드 입력 이벤트를 처리

editText.setOnKeyListener(new View.OnKeyListener() {
    @Override
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        // 키 입력 시 수행할 동작
        return false; // false를 반환하면 기본 키 이벤트가 처리됩니다.
    }
});

---

이벤트 리스너를 사용하는 방법

 

1. UI 요소 정의
XML 레이아웃 파일에서 사용자가 상호작용할 UI 요소를 정의한다. 예를 들어, 버튼, 텍스트 입력란, 체크박스 등.

2. Java 코드에서 UI 요소 초기화
onCreate 메서드에서 findViewById 메서드를 사용하여 XML에서 정의한 UI 요소를 초기화한다. 이렇게 하면 Java 코드에서 해당 UI 요소에 접근할 수 있다.

3. 이벤트 리스너 등록
UI 요소에 이벤트 리스너를 등록한다. 예를 들어, 버튼에 클릭 리스너를 설정하여 사용자가 버튼을 클릭할 때 실행될 동작을 정의한다. 이벤트 리스너는 보통 인터페이스로 제공되며, 해당 인터페이스의 메서드를 구현하여 특정 이벤트가 발생했을 때 수행할 작업을 지정한다.

4. 이벤트 처리 로직 구현
리스너 내에 메서드 구현을 통해 이벤트 발생 시 어떤 동작을 수행할지를 정의한다. 예를 들어, 버튼이 클릭되었을 때 사용자에게 메시지를 표시하거나, 다른 UI 요소의 상태를 변경하는 등의 작업을 수행할 수 있다.

---

이벤트 리스너 예제

 

아래와 같은 화면에서 색상 버튼을 클릭하면 인물 그림은 그대로 있고, 해당 뒷배경의 색상이 바뀌도록 구현해 본다.

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/clothingImageView"
        android:layout_width="387dp"
        android:layout_height="471dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:src="@drawable/img"
        tools:srcCompat="@tools:sample/avatars"/>

    <Button
        android:id="@+id/colorButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color 1"
        android:layout_below="@id/clothingImageView"
        android:layout_alignParentStart="true"
        android:layout_marginTop="16dp" />

    <Button
        android:id="@+id/colorButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color 2"
        android:layout_below="@id/clothingImageView"
        android:layout_toEndOf="@id/colorButton1"
        android:layout_marginTop="16dp" />

    <Button
        android:id="@+id/colorButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color 3"
        android:layout_below="@id/clothingImageView"
        android:layout_toEndOf="@id/colorButton2"
        android:layout_marginTop="16dp" />

    <Button
        android:id="@+id/colorButton4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Color 4"
        android:layout_below="@id/clothingImageView"
        android:layout_toEndOf="@id/colorButton3"
        android:layout_marginTop="16dp" />


</RelativeLayout>

 

ImageView

• 이미지 표시.
• 가로 387dp, 세로 471dp로 설정되어 있으며, 화면 중앙에 배치.
• @drawable/img로 설정된 이미지를 표시.

Color Buttons (색상 버튼)

• 사용자가 색상을 선택할 수 있는 버튼.
• 각 버튼의 텍스트는 "Color 1", "Color 2", "Color 3", "Color 4"로 설정.
• 모든 버튼은 동일한 높이에 있으며, clothingImageView 아래에서 수평으로 배치.

 

package com.yh.visualtool10;

import android.graphics.Color;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageView;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {

    private ImageView clothingImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        clothingImageView = findViewById(R.id.clothingImageView);

        Button colorButton1 = findViewById(R.id.colorButton1);
        Button colorButton2 = findViewById(R.id.colorButton2);
        Button colorButton3 = findViewById(R.id.colorButton3);
        Button colorButton4 = findViewById(R.id.colorButton4);

        colorButton1.setOnClickListener(view -> changeClothingColor(Color.RED));
        colorButton2.setOnClickListener(view -> changeClothingColor(Color.BLUE));
        colorButton3.setOnClickListener(view -> changeClothingColor(Color.GREEN));
        colorButton4.setOnClickListener(view -> changeClothingColor(Color.YELLOW));

    }

    private void changeClothingColor(int color) {
        clothingImageView.setBackgroundColor(color);
    }
}

 

1. onCreate 메서드
onCreate() 메서드는 안드로이드 애플리케이션의 액티비티가 생성될 때 호출되는 메서드로, 이 메서드 내에서 UI 요소를 초기화하고, 필요한 설정을 수행한다.

• super.onCreate(savedInstanceState): 부모 클래스의 메서드를 호출하여 기본적인 동작 수행.
• setContentView(R.layout.activity_main): 이 액티비티에서 사용할 레이아웃(activity_main.xml 파일)설정.

UI 요소 초기화:

• clothingImageView: 레이아웃 파일에서 정의한 ImageView를 찾아서 초기화.
• 각 색상 버튼(예: colorButton1, colorButton2, colorButton3, colorButton4)을 찾아서 초기화.
• 이벤트 리스너 등록: 각 버튼에 대해 클릭 리스너를 설정합니다.
  colorButton1: 클릭 시 의류 색상을 빨간색으로 변경합니다.
  colorButton2: 클릭 시 의류 색상을 파란색으로 변경합니다.
  colorButton3: 클릭 시 의류 색상을 녹색으로 변경합니다.
  colorButton4: 클릭 시 의류 색상을 노란색으로 변경합니다.

2. changeClothingColor 메서드: 색상을 변경하는 기능 수행.

• 매개변수: int color 변경하고자 하는 색상.
• clothingImageView.setBackgroundColor(color): 색상을 기반으로 clothingImageView의 배경색을 설정. 사용자가 클릭한 버튼에 따라 변경된 색상을 적용.

 

이벤트 리스너에서 람다 표현식은 Java 8 이상에서 도입된 기능으로, 코드의 간결성과 가독성을 향상시키는 데 도움을 준다.

즉, 해당 코드는 아래(주석 처리) 처럼 익명 내부 클래스를 사용하여 더 전통적인 방법으로 표현될 수 있다.

        colorButton1.setOnClickListener(view -> changeClothingColor(Color.RED));

//            @Override
//            public void onClick(view v) {
//                changeClothingColor(Color.Red);
//        }

 

---

다음 내용

[Android] 컴파운드 버튼 1 - 체크 박스