Computer >> 컴퓨터 >  >> 프로그래밍 >> Android

안드로이드 WebView에서 onClick 이벤트 감지하는 방법 (예제 코드 포함)

이 튜토리얼에서는 안드로이드 앱에서 WebView 내부의 클릭(onClick) 이벤트를 감지하고 처리하는 방법을 단계별로 알아봅니다. WebView는 기본적으로 웹 콘텐츠를 표시하는 뷰이기 때문에 일반 View처럼 setOnClickListener()를 직접 사용하기 어렵습니다. 따라서 Handler와 OnTouchListener, 그리고 WebViewClient를 조합하여 클릭 이벤트를 구현해야 합니다.

구현 원리

핵심 아이디어는 다음과 같습니다.

  • WebView에 OnTouchListener를 등록하여 터치 다운(ACTION_DOWN) 발생 시 지연 메시지를 전송합니다.
  • URL 로딩이 시작되면(shouldOverrideUrlLoading) 링크 클릭으로 판단하여 WebView 클릭 메시지를 제거합니다.
  • 일정 시간(500ms) 내에 URL 클릭 메시지가 오지 않으면 WebView 자체가 클릭된 것으로 간주합니다.

Step 1 — 새 프로젝트 생성

Android Studio를 열고 File → New Project를 선택한 후, 필요한 정보를 모두 입력하여 새 프로젝트를 생성합니다.

Step 2 — activity_main.xml 레이아웃 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</LinearLayout>

Step 3 — MainActivity.java 구현

src/MainActivity.java 파일에 아래 코드를 작성합니다. 여기서 핵심은 Handler.Callback 인터페이스를 활용해 클릭 유형(WebView 클릭 / URL 클릭)을 구분하는 것입니다.

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnTouchListener,
        Handler.Callback {

    private static final int CLICK_ON_WEBVIEW = 1;
    private static final int CLICK_ON_URL = 2;

    private final Handler handler = new Handler(this);
    WebView webView;
    WebViewClient client;

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

        webView = findViewById(R.id.webView);
        webView.setOnTouchListener(this);

        client = new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                handler.sendEmptyMessage(CLICK_ON_URL);
                return false;
            }
        };
        webView.setWebViewClient(client);
        webView.setVerticalScrollBarEnabled(false);
        webView.loadUrl("https://www.google.com");
    }

    @Override
    public boolean handleMessage(Message msg) {
        if (msg.what == CLICK_ON_URL) {
            handler.removeMessages(CLICK_ON_WEBVIEW);
            return true;
        }
        if (msg.what == CLICK_ON_WEBVIEW) {
            Toast.makeText(this, "WebView clicked", Toast.LENGTH_SHORT).show();
            return true;
        }
        return false;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (v.getId() == R.id.webView && event.getAction() == MotionEvent.ACTION_DOWN) {
            handler.sendEmptyMessageDelayed(CLICK_ON_WEBVIEW, 500);
        }
        return false;
    }
}

코드 설명

  • CLICK_ON_WEBVIEW / CLICK_ON_URL: 두 가지 클릭 상황을 구분하기 위한 메시지 상수입니다.
  • onTouch(): WebView를 터치하면 500ms 뒤에 CLICK_ON_WEBVIEW 메시지를 예약 전송합니다.
  • shouldOverrideUrlLoading(): 링크(URL)가 클릭되어 페이지 로딩이 시작되면 CLICK_ON_URL 메시지를 보내고, 예약된 CLICK_ON_WEBVIEW 메시지를 제거합니다.
  • handleMessage(): 최종적으로 어떤 클릭이 발생했는지 판단합니다. WebView 자체가 클릭되면 Toast 메시지를 표시합니다.

Step 4 — AndroidManifest.xml 설정

WebView에서 외부 웹사이트를 불러오려면 인터넷 권한이 반드시 필요합니다. androidManifest.xml에 아래와 같이 INTERNET 권한을 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run ▶ 버튼을 클릭하세요. 목록에서 본인의 모바일 기기를 선택하면, 기기 화면에 아래와 같이 Google 페이지가 로드된 WebView가 표시됩니다.

안드로이드 WebView에서 onClick 이벤트 감지하는 방법 (예제 코드 포함)

이후 WebView의 빈 영역을 탭하면 "WebView clicked"라는 토스트 메시지가 나타나고, 링크를 클릭하면 해당 URL로 정상적으로 이동하면서 WebView 클릭으로 잘못 인식되지 않는 것을 확인할 수 있습니다.

마무리

이렇게 Handler의 지연 메시지 메커니즘을 활용하면 WebView 위에서 발생하는 일반 클릭과 링크 클릭을 정확하게 구분할 수 있습니다. 이 기법은 WebView 기반 하이브리드 앱에서 광고 클릭 추적, 사용자 인터랙션 분석 등 다양한 용도로 응용할 수 있습니다.