안드로이드 Custom View를 만들고 Key까지 처리하기

안드로이드에서 커스텀 뷰를 만들 때, 레이아웃을 사용하여 내부에 여러 뷰를 포함할 수 있습니다. 이를 위해 주로 ViewGroup을 상속받는 클래스를 사용하며, XML 레이아웃을 인플레이트(inflate)하여 커스텀 뷰의 구성 요소로 사용할 수 있습니다.

아래는 커스텀 뷰에서 레이아웃을 사용하는 방법을 단계별로 설명한 예제입니다.

1. XML 레이아웃 파일 만들기

먼저, 커스텀 뷰에서 사용할 레이아웃 XML 파일을 만듭니다. 예를 들어 custom_view_layout.xml이라는 파일을 만들어 보겠습니다.

<!-- res/layout/custom_view_layout.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/cvl_linearLayoutMainPanel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/custom_view_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="auto"
        android:text="Hello from Custom View"
        android:textSize="18sp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />


</LinearLayout>

2. 커스텀 뷰 클래스 만들기

이제 ViewGroup을 상속받는 커스텀 뷰 클래스를 생성하고, 위에서 만든 레이아웃을 인플레이트하여 사용합니다.

// MyCustomView.java
package com.gpjigi.myapp;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.KeyEvent;
import android.view.View;
import android.widget.LinearLayout;

public class MyCustomView extends LinearLayout {

    private String TAG = MyCustomView.class.getSimpleName();
    private LinearLayout mLinearLayout;

    public MyCustomView(Context context) {
        super(context);
        init(context, null);
    }

    public MyCustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public MyCustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        // 레이아웃 인플레이트
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.custom_view_layout, this, true);

        // 뷰 초기화
        mLinearLayout = view.findViewById(R.id.cvl_linearLayoutMainPanel);

        // 키 이벤트 처리
        mLinearLayout.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if (keyCode == 19) {
                    Log.d(TAG, "MyCustomView > keyCode: " + keyCode);
                    return true;
                } else if (keyCode == 20) {
                    Log.d(TAG, "MyCustomView > keyCode: " + keyCode);
                    return true;
                }
                return false;
            }
        });

    }
}

3. 레이아웃 XML 파일에 커스텀 뷰 추가

이제 activity_main.xml과 같은 레이아웃 파일에 커스텀 뷰를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <com.gpjigi.myapp.MyCustomView
        android:id="@+id/myCustomView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

4. 액티비티에서 커스텀 뷰 초기화 및 사용

MainActivity에서 커스텀 뷰를 초기화하고 사용할 수 있습니다.

package com.gpjigi.myapp;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.LinearLayout;

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 String TAG = MainActivity.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        MyCustomView myCustomView = findViewById(R.id.myCustomView);
        // 추가적인 설정이 필요한 경우 여기서 수행
        LinearLayout linearLayout = myCustomView.findViewById(R.id.cvl_linearLayoutMainPanel);
        linearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.d(TAG, "MainActivity > onClick()");
            }
        });

    }
}

요약

1. XML 레이아웃 파일 만들기: 커스텀 뷰에서 사용할 레이아웃을 정의합니다.
2. 커스텀 뷰 클래스 생성: ViewGroup을 상속받는 클래스를 만들고, LayoutInflater를 사용해 XML 레이아웃을 인플레이트합니다.
3. 레이아웃 XML 파일에 커스텀 뷰 추가: 커스텀 뷰를 XML 레이아웃 파일에 추가하여 사용합니다.
4. 액티비티에서 초기화 및 사용: findViewById를 사용해 커스텀 뷰를 초기화하고 필요에 따라 추가 설정을 합니다.

이 방법을 사용하면 커스텀 뷰 내부에서 레이아웃을 사용하여 다양한 뷰를 포함하고, 키 이벤트를 처리할 수 있습니다.