[안드로이드] 웹뷰(WebView) - 초간단 웹브라우저 예제 (with 로딩바(ProgressBar))

안드로이드 개발 예제

 

Android WebView

 

Android ProgressBar

 

Android EditText

 

초간단 웹브라우저 만들기

 

 

 

 

복잡한 설명은 다 생략하고 최대한 간단히 알아보자.

 

1. 웹뷰(WebView)란? 로딩바(ProgressBar)란?

2. 웹뷰(WebView)와 로딩바(ProgressBar) 사용 과정

3. 예제

 

 

 

1. 웹뷰(WebView)란? 로딩바(ProgressBar)란?

웹뷰: 안드로이드 앱 내에서 사용할 수 있는 인터넷 브라우저이다.

 

로딩바: 시각적으로 로딩 중 표시가 보이도록 구현해준다.

 

 

 

2. 웹뷰(WebView)와 로딩바(ProgressBar) 사용 과정

1) 퍼미션 추가 -> 2) 웹뷰 초기화 -> 3) 웹페이지 및 로딩바 호출

 

1) AndroidManifest.xml 파일에 Permission 추가

인터넷 사용을 허가하기 위해 매니페스트 파일에 퍼미션을 추가한다.

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

 

2) 변수 선언 및 초기화

변수 선언

WebView wView; // 웹뷰
ProgressBar pBar; // 로딩바

 

초기화

mView = findViewById(R.id.wView);
mView.setWebViewClient(new WebViewClient()); // 웹뷰클라이언트

pBar = findViewById(R.id.pBar);
pBar.setVisibility(View.GONE); // 로딩바 가려두기

 

3) 웹페이지 및 로딩바 호출

loadUrl() 함수를 사용하여 웹페이지를 호출한다.

mView.loadUrl("https://jhshjs.tistory.com/");

 

로딩바 보이기 (onPageStarted에 작성)

pBar.setVisibility(View.VISIBLE); // 보이기

 

로딩바 가리기 (onPageFinished에 작성)

pBar.setVisibility(View.GONE); // 가리기

 

 

 

 

3. 예제

 

예제에서는 주소입력창을 추가해서 만들어 보자.

주소입력창이 필요 없으면 없애도 돌아간다.

 

 

1) AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapplication">
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <application
        ...중략... 
    </application>
 
</manifest>

인터넷 허가 코드 삽입

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

 

 

2) activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:focusable="true"
    android:focusableInTouchMode="true">
 
    <!-- +추가> 주소 입력창 -->
    <EditText
        android:id="@+id/urlEt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="주소를 입력하세요."
        android:inputType="textUri"/>
 
    <!-- 웹뷰 및 로딩바 -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1">
        <WebView
            android:id="@+id/wView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <ProgressBar
            android:id="@+id/pBar"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />
    </FrameLayout>
 
</LinearLayout>

웹뷰(WebView)와 로딩바(ProgressBar)를 만들고

+ 상단에 주소입력창(EditText)을 추가했다.

 

최상단 LinearLayout을 보면

focusable과 focusableInTouchMode 가 설정되어 있다.

 

EditText는 기본적으로 시작할 때 자동으로 포커스가 지정되어 키보드가 올라온다.

자동 포커스를 막아주기 위해서 상위 레이아웃에 포커스를 준 것이다.

android:focusable="true"

android:focusableInTouchMode="true"

 

 

3) MainActivity.java

public class MainActivity extends AppCompatActivity {
 
    WebView wView;      // 웹뷰
    ProgressBar pBar;   // 로딩바
    EditText urlEt;     // +추가> 주소 입력창
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        wView = findViewById(R.id.wView);   // 웹뷰
        pBar =  findViewById(R.id.pBar);    // 로딩바
        pBar.setVisibility(View.GONE);      // 로딩바 가리기 (로딩때만 보여야 함)
 
        initWebView();                      // 웹뷰 초기화
 
        // +추가> 주소 입력창 (주소 입력 -> 키보드 엔터 -> 해당 웹사이트 접속)
        urlEt = findViewById(R.id.urlEt);
        urlEt.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if(actionId == EditorInfo.IME_ACTION_DONE){                  // 키보드의 엔터키를 눌러서
                    wView.loadUrl("https://"+urlEt.getText().toString()+""); // 입력한 주소 접속
                }
                return false;
            }
        });
    }
    
    // 웹뷰 초기화 함수
    public void initWebView(){
        // 1. 웹뷰클라이언트 연결 (로딩 시작/끝 받아오기)
        wView.setWebViewClient(new WebViewClient(){
            @Override                                   // 1) 로딩 시작
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                pBar.setVisibility(View.VISIBLE);       // 로딩이 시작되면 로딩바 보이기
            }
            @Override                                   // 2) 로딩 끝
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                pBar.setVisibility(View.GONE);          // 로딩이 끝나면 로딩바 없애기
            }
            @Override                                   // 3) 외부 브라우저가 아닌 웹뷰 자체에서 url 호출
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        // 2. WebSettings: 웹뷰의 각종 설정을 정할 수 있다.
        WebSettings ws = wView.getSettings();
        ws.setJavaScriptEnabled(true); // 자바스크립트 사용 허가
        // 3. 웹페이지 호출
        wView.loadUrl("https://jhshjs.tistory.com/");
    }
    
    // 뒤로가기 동작 컨트롤
    @Override
    public void onBackPressed() {
        if(wView.canGoBack()){      // 이전 페이지가 존재하면
            wView.goBack();         // 이전 페이지로 돌아가고
        }else{
            super.onBackPressed();  // 없으면 앱 종료
        }
    }
}

 

 

마지막에 onBackPressed() 부분을 확인하자.

뒤로가기 버튼 처리를 해주지 않으면 

웹페이지에서 뒤로가기가 안 되고 앱이 종료된다.

.canGoBack()

.goBack()

 

 

 

4) 사용 화면

 

처음 시작 화면

 

 

다른 사이트 이동 화면

 

주소 입력창도 정상적으로 작동되고

로드바가 빙글빙글 돌아가는 것을 확인할 수 있다.