WebView 안드로이드 웹뷰 생성하기

안녕하세요.

오늘은 하이브리드 앱으로 많이 사용하고있는 웹뷰를 제작해보도록 하겠습니다.

웹뷰란? 간단하게 설명을 드리겠습니다.

어플리케이션 화면상에 내가 만든 웹페이지 혹은 내가 띄우고싶은 웹페이지를 어플리케이션 안에서 보여주는 프레임을 말합니다.

보통은 웹페이지로 앱상 UI나 기능을 구현을 해놓은 뒤, IOS나 안드로이드 모두 웹뷰를통해 띄우면 별도의 앱작업이 필요없이 어플리케이션을 완성시킬수 있습니다.

오늘은 간단하게 안드로이드로 웹뷰를 생성하는 방법을 포스팅 해보도록 하겠습니다.

안드로이드 프로젝트 생성하기

안드로이드 프로젝트 생성은 많이 해보셨을꺼라 생각하고 간단하게 진행 하겠습니다.

먼저 도메인과 경로 앱이름등 설정해주시고 N눌러주세요.

저는 API23 마시멜로우로 생성하겠습니다.

설정하신뒤 'Next' 눌러주세요.

빈 액티비티로 생성을 하겠습니다.

선택후 'Next'를 눌러주세요.

액티비티 이름이나 레이아웃 이름을 정해주실분은 정해주세요.

저는 기본(Default)로 진행 하겠습니다.

마지막으로 'Finish'눌러주시면 프로젝트가 생성이 완료 됩니다.

간단하게 웹뷰 띄우기!

1. 매니페스트 설정

매니페스트는 간단하기 퍼미션허용 한줄만 추가해주면 됩니다.

인터넷관련 퍼미션을 열어줘야 웹뷰상 인터넷 동작이 가능합니다.

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

2. 레이아웃 설정

레이아웃 설정도 기본 XML에 <WebView> 태그만 추가하여주었습니다.

크기는 "match_parent" 설정해주었습니다.

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

3. Main 코드 설정

기본적인 웹뷰 선언과, 웹뷰 셋팅 선언 하였습니다.

여기서 웹뷰 셋팅은 굉장히 많은데요.

웹페이지상 자바스크립트와 기타 기능들을 모두 동작하게 하려면 허용해줘야하는 설정이 많습니다.

(위 사진상 주석을 보고 설정값을 확인하시면될것 같습니다.)

package webview.test.myapplication;
 
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
public class MainActivity extends AppCompatActivity {
    private WebView mWebView; // 웹뷰 선언
    private WebSettings mWebSettings; //웹뷰세팅
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // 웹뷰 시작
        mWebView = (WebView) findViewById(R.id.webView);
 
        mWebView.setWebViewClient(new WebViewClient()); // 클릭시 새창 안뜨게
        mWebSettings = mWebView.getSettings(); //세부 세팅 등록
        mWebSettings.setJavaScriptEnabled(true); // 웹페이지 자바스클비트 허용 여부
        mWebSettings.setSupportMultipleWindows(false); // 새창 띄우기 허용 여부
        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(false); // 자바스크립트 새창 띄우기(멀티뷰) 허용 여부
        mWebSettings.setLoadWithOverviewMode(true); // 메타태그 허용 여부
        mWebSettings.setUseWideViewPort(true); // 화면 사이즈 맞추기 허용 여부
        mWebSettings.setSupportZoom(false); // 화면 줌 허용 여부
        mWebSettings.setBuiltInZoomControls(false); // 화면 확대 축소 허용 여부
        mWebSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); // 컨텐츠 사이즈 맞추기
        mWebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 브라우저 캐시 허용 여부
        mWebSettings.setDomStorageEnabled(true); // 로컬저장소 허용 여부
 
        mWebView.loadUrl("http://web-inf.tistory.com"); // 웹뷰에 표시할 웹사이트 주소, 웹뷰 시작
    }
}
 

에뮬레이터로 간단히 실행을 해본결과 제 블로그가 정상적으로 로드되었고, 정상 작동하는것을 확인 할 수 있었습니다.

이상 간단한 웹뷰 생성 포스팅을 마치겠습니다.