[JAVA][Android] TouchDelegate로 터치 영역 확장하기

안녕하세요! 이번 글에서는 안드로이드 TouchDelegate 기능에 대해 알아보겠습니다.

문제: 작은 버튼이 주는 불편함
앱을 사용할 때 크기가 작은 버튼이나 UI 요소를 클릭해야 했던 경험이 있으신가요? 
예를 들어, 작은 체크박스를 누르려고 했는데 계속 다른 곳을 터치하거나 클릭에 실패했던 상황이 떠오를 겁니다. 
특히, 화면 크기가 작은 기기나 손가락이 크신 분들에게 이런 불편함이 있었습니다.

 

이러한 문제를 안드로이드 기능을 사용해 TouchDelegate는 버튼의 실제 터치 영역을 확장하여
사용자가 보다 쉽게 버튼을 누를 수 있도록 도와줍니다.

즉, 디자인의 제약을 유지하면서도 사용자가 쉽게 버튼을 클릭 할 수 있게 도와 줄 수 있습니다.

 

 

• 작은 UI 요소: 체크박스, 라디오 버튼, 스위치 등.
• 커스텀 디자인: UI 디자인 상 버튼 크기를 줄여야 하지만 터치 영역은 넓게 유지하고 싶을 때.
• 실수 방지: 버튼 주변의 터치 가능한 영역을 늘려 클릭 실패를 줄이고 싶을 때.

 

예제

MainActivity_2

 

import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Rect;
import android.os.Bundle;
import android.view.TouchDelegate;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity_2 extends AppCompatActivity {

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

        Button button = findViewById(R.id.my_button);

        // 뷰의 부모 레이아웃
        View parent = (View) button.getParent();

        // 레이아웃이 그려지고 나서 TouchDelegate를 설정
        parent.post(() -> {
            // 터치 영역을 확장할 Rect 정의
            Rect delegateArea = new Rect();
            button.getHitRect(delegateArea);

            // 영역 확장: 각 방향으로 50px 확장
            delegateArea.top -= 200;
            delegateArea.bottom += 200;
            delegateArea.left -= 200;
            delegateArea.right += 200;

            // TouchDelegate를 부모에 설정
            TouchDelegate touchDelegate = new TouchDelegate(delegateArea, button);
            parent.setTouchDelegate(touchDelegate);
        });

        // 버튼 클릭 리스너
        button.setOnClickListener(v ->
                Toast.makeText(MainActivity_2.this, "Button clicked!", Toast.LENGTH_SHORT).show()
        );
    }
}

activity_main_2.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <Button
        android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

시연 영상