안드로이드 웹뷰(WebView)를 이용한 예제 프로그램 (1)

이 글에서는 이전 Hello World (http://zeany.net/3) 소스를 수정하여 Title Bar 및 Padding 없이 전체 화면으로 웹 페이지를 보여주는 안드로이드 앱을 만들어보도록 하겠습니다. (화면 전환, Back 버튼, 팝업 등의 처리는 (2)에서 처리)

1. app/src/main/res/layout/activity_main.xml 수정

 

화면을 구성하는 activity_main.xml에 웹페이지를 보여주는 WebView를 추가합니다.

10~14: TextView를 지우고 WebView를 추가합니다.

7: RelativeLayout의 padding을 0dp로 맞춰 WebView의 주변에 여백이 없도록 수정합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="0dp" tools:context="net.zeany.myapplication.MainActivity"> <WebView android:id="@+id/activity_main_webview" android:layout_width="match_parent" android:layout_height="match_parent" android:fadingEdge="none" /> </RelativeLayout>

 

2. app/src/main/java/net/zeany/myapplicaiton/MainActivity.java 수정

1) WebView 변수 생성 후 findViewById()로 activity_main.xml에서 생성한 WebView와 연결합니다.

2) WebSettings에 setJavaScriptEnabled(true) 해서 자바스크립트 실행 가능하도록 설정합니다. (기본은 false)

3) WebViewClient의 shouldOverrideUrlLoading() 메소드를 override해서 새 창으로 띄우지 않도록 설정합니다.

※ 아래 코드 추가 후 발생하는 import 에러는 Alt + Enter를 눌러서 해결하도록 합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

public class MainActivity extends AppCompatActivity { private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.activity_main_webview); WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }); mWebView.loadUrl("http://zeany.tistory.com"); } }

3. app/src/main/AndroidManifest.xml 수정

1) Title Bar를 없애기 위해 android:theme를 @style/Theme.AppCompat.NoActionBar 로 수정합니다.

2) 인터넷으로 연결되어야 하기 때문에 <uses-permission android:name="android.permission.INTERNET" /> 추가해서 앱에서 인터넷으로 연결할 수 있도록 합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="net.zeany.tistory"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/Theme.AppCompat.NoActionBar"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> <uses-permission android:name="android.permission.INTERNET" /> </manifest>

실행해보면 그럭저럭 동작하는 듯 하지만, 조금만 테스트 해봐도 아래와 같은 문제들이 있음을 알 수 있습니다.

1) Alert이나 Confirm과 같은 Popup이 전혀 보이지 않음

2) 안드로이드의 Back 버튼을 누르면 바로 앱이 종료됨 (이전 페이지가 있으면 그 곳으로 이동하는 것이 일반적인 기대)

3) 화면을 가로/세로 모드로 변환하면 다시 페이지를 로딩함

위 이슈들은 안드로이드 웹뷰(WebView)를 이용한 예제 프로그램 (2)에서 해결하도록 합니다.

※ 이 프로젝트는 https://github.com/zeany/webview 에 있으며 아래 명령으로 소스를 가져올 수 있습니다.

(이미 git clone 으로 프로젝트를 내려 받은 경우에는 프로젝트 홈 디렉토리에서 git checkout 만 하면 됩니다.)

git clone https://github.com/zeany/webview.git

cd webview

git checkout -f step-2