안드로이드(Android) 에서 TextView 와 WebView 를 이용해 Html 표현하기

안드로이드(Android) 에서 TextView 와 WebView 를 이용해 Html 표현하기

 

개발환경 : window 7 32bit, eclipse indigo, android API 1.7, platform 4.2

 

안드로이드에서 html 을 표현하고자 할 때 두가지 방법이 있다.

TextView 와 WebView 를 사용하는 것이다. TextView는 Text 데이터를 표현하는데

Html 이 적용될수 있도록 함수가 제공되며 파싱클래스로 변환해서 넘겨야한다.

WebView는 웹브라우저 처럼 사용할수 있도록 만들어진 것이다.

 

1. TextView 에서 html 표현하기

 

TextView 에 Html 을 표현하기 위해서는 android.text.Html 클래스를 사용한다.

아래 소스처럼 Html 로 이루어진 문자열을 Html.fromHtml() 함수로 변환한뒤

TextView 의 text 셋팅값 파라미터로 넘기면 된다.

textView.setText(Html.fromHtml(source));

 

그리고 문자열에 사이트 링크로 사용되는 href 가 있다면 setMovementMethod()

함수를 사용해야 한다. 그렇게 해야 링크를 클릭해서 원하는 페이지로 이동할수

있다.

textView.setMovementMethod(LinkMovementMethod.getInstance());

 

전체 소스는 다음과 같다

// TextView 에 HTML 표현 하기 String source = "<b><font color=#ff0000> Html View using TextView" +             "</font></b><br><br><a href='http://m.naver.com'>naver.com</a>" +             "<br><br><a href='http://mainia.tistory.com'>mainia.tistory.com</a>";   TextView textView = (TextView) findViewById(R.id.message_window); textView.setText(Html.fromHtml(source)); textView.setMovementMethod(LinkMovementMethod.getInstance());

 

실행한 화면이다. 링크를 클릭하면 사이트로 이동하게 된다.

 

  

2. WebView 를 통해 Html 표현하기

 

Main layout xml 에 WebView 객체를 등록하자

<WebView     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:id="@+id/webapp"     android:screenOrientation="portrait" />

 

WebView 의 각종 셋팅값이 있는데 아래 소스에서는 자바스크립트 사용을 허용한다든지

스크롤바를 없애고, 바탕화면을 하얀색으로 셋팅한 값들이다.

// 자바스크립트 허용 web.getSettings().setJavaScriptEnabled(true);                      // 스크롤바 없애기 web.setHorizontalScrollBarEnabled(false); web.setVerticalScrollBarEnabled(false); web.setBackgroundColor(0);

 

표현하고자 하는 html 값을 loadData() 함수 파라미터로 넘기면 표현이 된다.

두번째 파라미터인 text/html 은 웹브라우저의 mineType 과 같고, 세번째 파라미터는

문자 encoding 타입이다.

web.loadData(source, "text/html", "UTF-8");

 

전체 소스는 다음과 같다.

WebView web = (WebView) findViewById(R.id.webapp); // 자바스크립트 허용 web.getSettings().setJavaScriptEnabled(true);   // 스크롤바 없애기 web.setHorizontalScrollBarEnabled(false); web.setVerticalScrollBarEnabled(false); web.setBackgroundColor(0);   String source = "<b><font color=#ff0000> Html View using TextView" +             "</font></b><br><br><a href='http://m.naver.com'>naver.com</a>" +             "<br><br><a href='http://mainia.tistory.com'>mainia.tistory.com</a>";   web.loadData(source, "text/html", "UTF-8");

 

실행한 화면인데 TextView 와 동일하다