2015년 4월 5일 일요일

android webview를 이용해서 html 내용 나타내기

안드로이드에서 WebView 를 이용해서 로컬에 가지고 있는 html string을 view 화면에 나타내어 보도록 합니다.

webview이 xml에 먼저 필요합니다.
detail.xml 파일로 만듭니다.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <WebView 
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    />

</LinearLayout>

그리고 코드는 아래와 같은 형태로 작성합니다.
Hello world 쪽에 원하는 html 코그가 들어가도록 제작합니다.


 WebView mWebView;
 Context mContext;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.detail);
  
        String content = 
                "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>"+
                "<html><head>"+
                "<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />"+
                "<head><body>";
       
  content += "<H1>Hello world</H1>" + "</body></html>";
  
        mWebView = (WebView) findViewById(R.id.webview); 
        mWebView.loadData(content, "text/html; charset=utf-8", "UTF-8");
        mWebView.setWebViewClient(new HelloWebViewClient());
  
 ....
 
    private class HelloWebViewClient extends WebViewClient { 
        @Override 
        public boolean shouldOverrideUrlLoading(WebView view, String url) { 
            view.loadUrl(url); 
            return true; 
        } 
    }



아래 코드는 실제 사용하는 코드의 일부입니다.
table을 만들고 특정 조건일때 색을 넣는등의 처리가 들어있는 코드입니다.



import java.util.ArrayList;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class DetailActivity extends Activity{
 WebView mWebView;
 Context mContext;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.detail);
        
        String myContentIn = 
             "  <table cellSpacing=0 cellPadding=0 width=731 border=1>"
            +"   <tbody>"
            +"    <tr>"
            +"     <td style='BACKGROUND-COLOR: #000000' height=20 rowSpan=3 width=33>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>1111</span></p>"
            +"     </td>"
            +"     <td style='BACKGROUND-COLOR: #000000' height=20 rowSpan=3 width=98>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>2222</span></p>"
            +"     </td>"
            +"     <td style='BACKGROUND-COLOR: #000000' height=20 rowSpan=3 width=85>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>3333</span></p>"
            +"     </td>"
            +"     <td style='BACKGROUND-COLOR: #000000' height=20 rowSpan=3 width=83>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>4444</span></p>"
            +"     </td>"
            +"     <td style='BACKGROUND-COLOR: #000000' height=20 rowSpan=3 width=86>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>5555</span></p>"
            +"     </td>"
            +"     <td style='BACKGROUND-COLOR: #000000' height=20 rowSpan=3 width=46>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>66</span></p>"
            +"     </td>"
            +"     <td style='BACKGROUND-COLOR: #000000' height=20 rowSpan=3 width=42>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>77</span></p>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>88</span></p>"
            +"     </td>"
            +"     <td style='BACKGROUND-COLOR: #000000' height=20 rowSpan=3 width=53>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>99</span></p>"
            +"     </td>"
            +"     <td style='BACKGROUND-COLOR: #000000' height=11 width=192 colSpan=5>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>1111</span></p>"
            +"     </td>"
            +"    </tr>"
            +"    <tr>"
            +"     <td style='TEXT-DECORATION: ; BACKGROUND-COLOR: #000000' height=41 rowSpan=2 width=37>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>tttt</span></p>"
            +"     </td>"
            +"     <td style='TEXT-DECORATION: ; BACKGROUND-COLOR: #000000' height=41 rowSpan=2 width=34>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>ccc</span></p>"
            +"     </td>"
            +"     <td style='TEXT-DECORATION: ; BACKGROUND-COLOR: #000000' height=15 width=3 colSpan=3>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>oooo</span></p>"
            +"     </td>"
            +"    </tr>"
            +"    <tr>"
            +"     <td style='TEXT-DECORATION: ; BACKGROUND-COLOR: #000000' height=13 width=41>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>tttt</span></p>"
            +"     </td>"
            +"     <td style='TEXT-DECORATION: ; BACKGROUND-COLOR: #000000' height=13 width=41>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>mmmm</span></p>"
            +"     </td>"
            +"     <td style='TEXT-DECORATION: ; BACKGROUND-COLOR: #000000' height=13 width=38>"
            +"      <p align=center><span style='COLOR: #ffffe0; BACKGROUND-COLOR: #000000'>nnnn</span></p>"
            +"     </td>"
            +"    </tr>";

        String myContentOut =
             "    </tbody>"
            +"    </table>";

        
        String myTable =
         "    <tr>"
        +"     <td style='%s' width=33>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=98>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=85>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=83>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=86>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=46>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=42>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=53>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=37>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=34>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=41>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=41>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"     <td style='%s' width=38>"
        +"      <p align=center>%s</p>"
        +"     </td>"
        +"    </tr>";

        
        String content = 
                "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>"+
                "<html><head>"+
                "<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />"+
                "<head><body>";

        String myAllTable = "";
        
        Intent intent = getIntent();
        
        int idnew = intent.getExtras().getInt("idnew");
        int idold = intent.getExtras().getInt("idold");
        

        mContext = this;
        Core core = new Core(mContext);
        ArrayList<ArrayList> aa_new = core.getSavedDataListFormat(idnew);
        ArrayList<ArrayList> aa_old = core.getSavedDataListFormat(idold);
        Parser parser = new Parser();
        ArrayList<ArrayList> drawdata = parser.diff(aa_old, aa_new);
        
        if ( drawdata == null ){
         createDialog("오류","오류 발생하였습니다.");
         return;
        }
        
        int i,j;
        
        for(i = 0 ; i < drawdata.size() ; i++ ){
         String color[]={"","","","","","","","","","","","","","",""};
         ArrayList data = drawdata.get(i);
         
         if( "변경".equals(data.get(0)) ){
          color[0] = "COLOR: #ff0000;";
         }else if("추가".equals(data.get(0)) ){
          color[0] = "COLOR: #00ff00;";
         }else{
          color[0] = "COLOR: #0000ff;";
         }
         
         for(j=1;j<=12;j++){
          if( ((String)data.get(j)).contains(">") ){
           color[j]="COLOR: #ff0000;";
          }
         }
         
         myAllTable += String.format(myTable,
           color[0],
           data.get(0),
           color[1],
           data.get(1),
           color[2],
           data.get(2),
           color[3],
           data.get(3),
           color[4],
           data.get(4),
           color[5],
           data.get(5),
           color[6],
           data.get(6),
           color[7],
           data.get(7),
           color[8],
           data.get(8),
           color[9],
           data.get(9),
           color[10],
           data.get(10),
           color[11],
           data.get(11),
           color[12],
           data.get(12)
           );
        }
        
  content += myContentIn + myAllTable + myContentOut + "</body></html>";
  
        mWebView = (WebView) findViewById(R.id.webview); 
        mWebView.loadData(content, "text/html; charset=utf-8", "UTF-8");
        mWebView.setWebViewClient(new HelloWebViewClient());
    }
    
    private class HelloWebViewClient extends WebViewClient { 
        @Override 
        public boolean shouldOverrideUrlLoading(WebView view, String url) { 
            view.loadUrl(url); 
            return true; 
        } 
    }
    
 private void createDialog(String title,String text) {
        AlertDialog.Builder ab = new AlertDialog.Builder(this);
        ab.setTitle(title);
        ab.setMessage(text);
        ab.setCancelable(true);
        ab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        ab.create();
        ab.show();
    }
}


XML로 webview를 만들고,
핵심이 되는 코드는 아래 부분이 됩니다.
content변수는 webview에 load할 html이 됩니다.

        mWebView = (WebView) findViewById(R.id.webview); 
        mWebView.loadData(content, "text/html; charset=utf-8", "UTF-8");
        mWebView.setWebViewClient(new HelloWebViewClient());


추가로 Zoom 조절이 가능하게 하려면 아래 코드를 넣어줍니다.

mWebView.getSettings().setBuiltInZoomControls(true);


댓글 없음:

댓글 쓰기