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

안드로이드 WebView에서 내부 페이지 간 이동 구현하는 방법 (goBack·goForward)

이 예제는 안드로이드 WebView에서 내부 페이지 사이를 자유롭게 이동할 수 있도록 구현하는 방법을 단계별로 소개합니다. 핵심은 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 돌아가고, 더 이상 이전 페이지가 없을 때만 앱이 종료되도록 처리하는 것입니다.

1단계: 새 프로젝트 생성

Android Studio에서 File → New Project를 차례로 선택한 뒤, 프로젝트 생성에 필요한 정보를 모두 입력하여 새 프로젝트를 만듭니다.

2단계: 레이아웃 파일 작성 (res/layout/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:app = "https://schemas.android.com/apk/res-auto"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:gravity = "center"
   android:layout_height = "match_parent"
   tools:context = ".MainActivity"
   android:orientation = "vertical">
   <WebView
      android:id = "@+id/web_view"
      android:layout_width = "match_parent"
      android:layout_height = "match_parent" />
</LinearLayout>

위 코드에서는 facebook.com 페이지를 표시하기 위해 화면 전체를 채우는 WebView 하나를 배치했습니다.

3단계: 메인 액티비티 구현 (src/MainActivity.java)

아래 코드를 src/MainActivity.java에 추가합니다.

package com.example.myapplication;
import android.app.ProgressDialog;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.CookieManager;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity {
    WebView web_view;
    @RequiresApi(api = Build.VERSION_CODES.P)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ProgressDialog progressDialog = new ProgressDialog(this);
        progressDialog.setMessage("Loading Data...");
        progressDialog.setCancelable(false);
        web_view = findViewById(R.id.web_view);
        web_view.setVerticalScrollBarEnabled(true);
        web_view.requestFocus();
        web_view.canGoForward();
        web_view.getSettings().setDefaultTextEncodingName("utf-8");
        web_view.getSettings().setJavaScriptEnabled(true);
        web_view.loadUrl("https://touch.facebook.com/");
        web_view.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        web_view.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                if (progress < 100) {
                    progressDialog.show();
                }
                if (progress == 100) {
                    progressDialog.dismiss();
                }
            }
        });
    }
    @Override
    public void onBackPressed() {
        if(web_view!= null && web_view.canGoBack())
            web_view.goBack(); // 이전 페이지가 있으면 해당 페이지를 엶
        else
            super.onBackPressed(); // 이전 페이지가 없으면 앱을 종료
    }
}

핵심 포인트 정리

  • setJavaScriptEnabled(true) — 대부분의 최신 웹사이트는 자바스크립트에 의존하므로 반드시 활성화해야 합니다.
  • shouldOverrideUrlLoading() — 링크 클릭 시 외부 브라우저가 아니라 WebView가 직접 URL을 로딩하도록 처리합니다. 이 부분이 없으면 페이지 이동 시 기본 브라우저가 열려버립니다.
  • onProgressChanged() — 로딩 진행률이 100% 미만일 때는 로딩 다이얼로그를 표시하고, 100%가 되면 닫아 사용자에게 진행 상황을 알려줍니다.
  • onBackPressed() — 하드웨어 뒤로 가기 버튼을 눌렀을 때 canGoBack()이 true이면 goBack()으로 이전 페이지를 열고, 그렇지 않으면 기본 동작(앱 종료)을 수행합니다.

참고로 위 예제의 canGoForward() 호출은 그 자체로는 아무 동작도 하지 않습니다. '다음 페이지'로 이동하려면 버튼 등을 배치하고 web_view.goForward()를 명시적으로 호출해야 하며, canGoForward()의 반환값으로 다음 페이지의 존재 여부를 확인할 수 있습니다.

팁: 위 코드는 구버전 support 라이브러리(android.support.*)를 사용합니다. 최신 Android Studio에서 프로젝트를 생성했다면 import 문을 androidx.appcompat.app.AppCompatActivity 등 AndroidX 계열로 교체해야 정상적으로 빌드됩니다.

4단계: 매니페스트 설정 (AndroidManifest.xml)

외부 웹페이지에 접속해야 하므로 INTERNET 권한 선언이 필수입니다. 아래 코드를 AndroidManifest.xml에 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<manifest xmlns:android = "https://schemas.android.com/apk/res/android"
    package = "com.example.myapplication">
    <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 아이콘을 클릭하고, 기기 선택 목록에서 본인의 모바일 기기를 고르세요. 그러면 아래 화면과 같이 facebook.com이 WebView를 통해 표시되며, 페이지를 여러 번 이동한 후 뒤로 가기 버튼을 누르면 이전 페이지로 돌아가는 것을 확인할 수 있습니다.

안드로이드 WebView에서 내부 페이지 간 이동 구현하는 방법 (goBack·goForward)