android 웹브라우저 만들기

 

Web Browser 예제

 

스마트 폰에 기본적으로 웹브라우저가 내장이 되어있습니다만, 어플을 만들다보면 웹브라우저를 어플안에 

 

넣을때도 있습니다.

 

물론 성능좋고 기능많은 브라우저가 있지만, 이건 어디까지나 어플안에 서비스 차원에서 넣는 것이니깐요^^

저도 최근 산모진통측정기 V3 를 업데이트 하면서 웹브라우저를 추가하였습니다.

 

 

요런식으로 말이죠

 

주소창 위쪽은 다른기능으로 가기위한 탭버튼 입니다. 그아래는 웹브라우저.

 

일단 코드는 간단합니다.

 

1.     <LinearLayout
2.        android:layout_width="match_parent"
3.        android:layout_height="0dp"
4.        android:layout_weight="1"
5.        android:orientation="horizontal">
6.        
7.         <ImageButton
8.            android:layout_width="0dp"
9.            android:layout_height="match_parent"
10.            android:layout_weight="1"
11.            android:id="@+id/btnBack"
12.            android:scaleType="centerCrop"
13.            android:src="@drawable/back"/>
14.         <ImageButton
15.            android:layout_width="0dp"
16.            android:layout_height="match_parent"
17.            android:layout_weight="1"
18.            android:id="@+id/btnForward"
19.            android:scaleType="centerCrop"
20.            android:src="@drawable/forward"/>
21.         <EditText
22.            android:layout_width="0dp"
23.            android:layout_height="match_parent"
24.            android:layout_weight="7"
25.            android:id="@+id/address"
26.            android:singleLine="true"           
27.            /> 
28.         <ImageButton
29.            android:id="@+id/btnRefresh"
30.            android:layout_width="0dp"
31.            android:layout_height="match_parent"
32.            android:layout_weight="1"
33.            android:scaleType="centerCrop"
34.            android:src="@drawable/refresh"/>
35.  
36.     </LinearLayout>
37.     <WebView
38.        android:layout_width="match_parent"
39.        android:layout_height="0dp"
40.        android:layout_weight="10"
41.        android:id="@+id/internet"
42.        />

위 그림과 비교해 보면 

Line 7의 imagebutton은 뒤로가기버튼, 

Line 14의 imagebutton은 앞으로 가기버튼

Line 21의 EditText는 주소표시줄

Line 28의 imagebutton은 새로고침

Line 37의 webview는 웹브라우저 화면입니다.

layout은 간단하죠?

이제 java코드를 볼께요.~

먼저 web browser에서 javascript를 사용하기 위해 다음의 코드를 추가해 줍니다.

1.         final WebSettings webSetting = internet.getSettings();
2.         webSetting.setJavaScriptEnabled(true);
3.         webSetting.setLoadWithOverviewMode(true);
4.         webSetting.setUseWideViewPort(true);

각 버튼에 대한 설정입니다.

1.         @Override
2.     public void onClick(View v) {
3.         switch(v.getId()){
4.        
5.         case R.id.btnBack:
6.              
7.             internet.goBack();
8.                
9.             break;
10.         case R.id.btnForward:
11.             internet.goForward();
12.                
13.             break;
14.         case R.id.btnRefresh:
15.             String add=address.getText().toString();
16.             if(!add.contains("http://"))
17.                 add="http://"+add;
18.             internet.loadUrl(add);
19.             break;
20.         }
21.        
22.     }

internet은 WebView를 의미하는데 back 버튼 눌렀을때 간단히 internet.goBack(); 메소드를 쓰면

자동으로 이전페이지로 이동합니다.

forward버튼도 역시 internet.goForward(); 메소드를 쓰면됩니다.

한가지 주위할 점은 webview에서 앞의 http://를 추가해줘야되는데, 보통은 잘 적질 않으니, 새로고침(refresh)

버튼에 주소창을 검사해서 없으면 자동으로 넣어주도록 하였습니다.

이렇게만 하면 기본적인 웹브라우저가 됩니다.

추가적으로 

1.         internet.setWebViewClient(new WebViewClient(){
2.  
3.             @Override
4.             public void onPageFinished(WebView view, String url) {
5.                 address.setText(url);
6.                 super.onPageFinished(view, url);
7.             }
8.            
9.         });

이 부분은 웹서핑을 하다보면 페이지가 바뀔때 주소창에 주소도 다시 뿌려주는 역할을 합니다.

그리고 주소창에 주소쓸때 가상키보드가 올라오면서 화면이 일그러지는것을 방지해주는 코드입니다.

 

1.     @Override
2.     public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
3.         if((actionId==EditorInfo.IME_ACTION_NEXT)||(event !=null &&event.getKeyCode()==KeyEvent.KEYCODE_ENTER)){
4.             String add=address.getText().toString();
5.             if(!add.contains("http://"))
6.                 add="http://"+add;
7.             internet.loadUrl(add);
8.         }
9.         return false;
10.     }

예제 코드를 실행하면 위와같이 실행됩니다.^^