Android strings.xml에 HTML 코드 넣기

의료기 개발을 하면서 측정 결과를 공유하기 위해 

XML 형태로 전송하거나 

HTML 형태로 전송하거나 

혹은 PDF로 전송하는 등 다양한 형태의 파일로 

공유하는 작업을 하는 중에 

HTML형태의 파일로 저장하는 작업을 하면서 소스 코드 상에서 복잡한 HTML 코드를 집어 넣기에는 뭐시기해서 strings.xml을 이용하기 했다.

근데 문제는...


Android의 strings.xml에 HTML 코드를 그대로 넣으면 컴파일 단계에서 에러가 발생한다.


<string name="HtmlCSS">

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Meditab Results</title>

<style type="text/css">

body {

font-family: Arial, Verdana, sans-serif;

font-size: 90%;

color: #666;

background-color: #f8f8f8;}

table {

border-spacing: 0px; }

... 이하 생략 ...


이 문제를 해결할려면 다음과 같이 바꿔 주어야 된다.


   &lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

...이하 생략...


보통 번거로운일이 아니다. ;;;

이런 문제를 한방에 해결할수 있는 방법이 있다. 다음과 같이


<![CDATA[

  이 안에 HTML 코드를 있는 그대로 넣어주면 해결된다.

]]>


이때 string 항목에 속성을 하나 추가해 주어야 하는데 formatted="false"이다.

아래는 전체 예제이다.


<string name="HtmlCSS" formatted="false">

   <![CDATA[

   <!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Meditab Results</title>

<style type="text/css">

body {

font-family: Arial, Verdana, sans-serif;

font-size: 90%;

color: #666;

background-color: #f8f8f8;}

table {

border-spacing: 0px; }

th, td {

padding: 5px 30px 5px 10px;

border-spacing: 0px;

font-size: 90%;

margin: 0px;

}

th, td {

text-align: left;

background-color: #e0e9f0;

border-top: 1px solid #f1f8fe;

border-bottom: 1px solid #cbd2d8;

border-right: 1px solid #cbd2d8;}

tr.head th {

color: #fff;

background-color: #90b4d6;

border-bottom: 2px solid #547ca0;

border-right: 1px solid #749abe;

border-top: 1px solid #90b4d6;

text-align: center;

text-shadow: -1px -1px 1px #666666;

letter-spacing: 0.15em;}

td {

text-shadow: 1px 1px 1px #ffffff;

}

tr.even td, tr.even th {

background-color: #e8eff5;}

tr.head th:first-child {

-webkit-border-top-left-radius: 8px;

-moz-border-radius-topleft: 8px;

border-top-left-radius: 8px;}

tr.head th:last-child {

-webkit-border-top-right-radius: 8px;

-moz-border-radius-topright: 8px;

border-top-right-radius: 8px;}

fieldset {

width: 310px;

margin-top: 20px;

border: 1px solid #d6d6d6;

background-color: #ffffff;

line-height: 1.6em;}

legend {

font-style: italic;

color: #666666;}

.title {

float: left;

width: 160px;

clear: left;}

.submit {

width: 310px;

text-align: right;}

.results {

float: left;

}

</style>

</head>

<body>

<h1>Meditab Test Results</h1>

<h2>&nbsp;</h2>

<h2>개인정보 </h2>

<table>

<tr class="head">

<th>이름</th>

<th>측정일시</th>

<th>생년월일</th>

<th>성별</th>

<th>E-mail</th>

<th>진료담당</th>

</tr>

<tr> 

<th>홍길동</th>

<td>2016. 3. 5</td>

<td>1978. 5. 17</td>

<td>남</td>

<td>aslsd@naver.com</td>

<td>Dr. Park</td>

</tr>

</table>

<p />

<h2>&nbsp;</h2>

<h2>측정결과</h2>

<div >

<table class="results"> 

<tr class="head">

<th>ECG(심전도)</th>

<th>측정결과</th>

</tr>

<tr>

<td>Heart Rate</td>

<td>84</td>

</tr>

<tr>

<td>Respiratory Rate</td>

<td>19</td>

</tr>

<tr>

<td>ST Level(mV)</td>

<td>18</td>

</tr>

<tr>

<td>Arrythmia</td>

<td>Normal</td>

</tr>

</table>

<p />

<table class="results differ" > 

<tr class="head">

<th>NIBP(혈압)</th>

<th>측정결과</th>

</tr>

<tr>

<td>Systolic</td>

<td>120</td>

</tr>

<tr>

<td>Diastolic</td>

<td>84</td>

</tr>

<tr>

<td>Mean</td>

<td>96</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

<p />

<table class="results"> <!-- SPO2 -->

<tr class="head">

<th>SPO2(혈중 산소포화도)</th>

<th>측정결과</th>

</tr>

<tr>

<td>Saturation Value</td>

<td>100</td>

</tr>

<tr>

<td>Pulse Rate</td>

<td>84</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

<p />

<table class="results differ"> <!-- Temp -->

<tr class="head">

<th>Temp(체온)</th>

<th>측정결과</th>

</tr>

<tr>

<td>Temperature</td>

<td>36.3</td>


</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

</div>

<p/>

</body>

</html>

   ]]>

</string>





CSS div의 크기 조정에 대해(div의 width, height 속성에 대해)


웹 페이지를 구성함에 있어서 보이지 않는 box 형태로 다양한 레이아웃을 구성할수 있게 도와주는 div의 가로의 넓이를 지정하는 속성이 width, 세로의 높이를 지정하는 속성이 height이다.

이들 속성에 값을 지정할 때의 가장 대표적인 단위가 pixel이다.


만일 percentage로 지정하면 div의 크기는 브라우저의 창 크기에 상대적인 크기로 설정되고

em단위로 지정하면 div 안에 있는 글자(text)의 크기에 기반해서 dive의 크기를 설정한다.

요즘은 화면의 크기가 다양한 기기들에 대응하기 위해 percentage나 em 단위를 많이 사용하는 추세이다.

아래는 HTML 코드 조각이다.


<div>

   <p>'그들이 움직인다'…어나니머스, IS에 '선전포고'

         "전세계 회원들이 너희를 추적할 것이다. 당신들을 찾아내 도망가지 

         못하게 할 것이라는 걸 알아야만 한다."</p>

</div>



아래는 CSS 코드 조각이다.


div.box {

height: 300px;

width: 300px;

background-color: #99ccff;}


p {

height: 75%;

width: 75%;

background-color: #ccff66;}


위의 코드에서 div의 가로 길이가 300pixel, 세로 높이가 300pixel이고

div 안에 있는 paragraph가 75%인데 이는 paragraph가 속해 있는 div의 크기 300pixel에 대한 75%이다.

따라서 paragraph의 크기는 225pixel에 해당된다.




프로그램을 개발하다 보면 


글자 색깔이나 배경색 등 


컬러 값을 16진수 값으로 설정해야 할 때가 있다.


컬러 값을 미세하게 조정해야 한다거나 등등...


이때 자주 사용하는 사이트이다.


http://www.w3schools.com/tags/ref_colorpicker.asp






HTML에 있는 링크(a 태그의 링크)를 새로운 창에서 여는 법이다.


링크를 클릭했을 때 브라우저의 현재 창에서 링크가 열리지 않고

새로운 창에서 열리도록 해야 할때가 있다.



새로운 창에서 열기 위해서는 <a> 태그의 target 속성을 이용하면 된다.


이때 target속성의 값(value)은 반드시 _blank이어야 한다.


새 창에서 열도록 할때의 잇점은 방문자로 하여금 자신의 사이트에 머물도록 하는 방편이 될 것이다.


아래는 코드 조각이다.



<a href="http://uljavajoe.blogspot.kr">구글에 개설한 블로그</a> (현재 창에서 열기)

<p>

<a href="http://uljavajoe.blogspot.kr" target="_blank">구글에 개설한 블로그</a> (새 창에서 열기)





요즘 틈틈이 읽고 있는 책인데 상당히 괜찮은 것 같아서 소개합니다.

단순히 HTML과 CSS의 기능만 소개하는 정도가 아니라 보다 근원적인 뒷 배경 

이야기들과 각종 노하우들과 팁들이 소개되고 있는 책입니다.


책의 편집 형태도 장황한 산문식 설명이 아니라 보기 쉽고 가독성있게 핵심적인 설명으로 유익하게 보고 있는 책입니다.

단지 영문 자료라는 약간의 무거움은 있겠네요.



Jon Duckett, 「HTML & CSS - Design and Build Websites 」, John Wiley & Sons, Inc.


아래 사이트에 관련 소스들과 더 많은 자료들이 있습니다.


http://www.htmlandcssbook.com/


PDF 자료는 검색해 보면 나올 겁니다^^





안드로이드 WebView의 lodaData() 에서 한글 깨짐 방지


Load할 data가 "UTF-8" 일때,


WebView mWebView = (WebView)findViewById(R.id.webView1);

mWebView.getSettings().setDefaultTextEncodingName("UTF-8");


StringBuilder sb = new StringBuilder();
sb.append("<html><head></head><body><table cellpadding=\"3\"             
                                                                   cellsapcing=\"10\" width=\"750\">");
sb.append("<tr align=\"left\" bgcolor=\"#E5CC7F\">");
sb.append("<th>번 호</th>");
sb.append("<th>이 름</th>");
sb.append("<th>나 이</th>");
sb.append("</tr>");

... 중간 생략 ...

sb.append("</table></body></html>");


// Android 4.0 이하 버전

mWebView.loadData(sb.toString(),  "text/html", "UTF-8");  


// Android 4.1 이상 버전

mWebView.loadData(sb.toString(),  "text/html; charset=UTF-8", null);  


assets 폴더에 있는 HTML 파일을 WebView에 표시하는 방식도 있는데

본 소스는 메모리 상의 HTML을 막바로 WebView에 표시하는 방식이다.




HTML의 th와 td의 개념


<th>내용</th> : table head 약자로, 표의 제목을 쓰는 역할. bold체로 표시됨

<tr>내용</tr> : table row 약자로 가로줄을 만드는 역할

<td>내용</td> : table data 약자로 셀을 만드는 역할


<table border="1" width="350" >

   <tr align="center" >

        <th>Number</th>

        <th>Name</th>

   </tr>

   <tr align="center">

        <td>111</td>

        <td>Kim. S. Y</td>

   </tr>

   <tr align="center">

        <td>222</td>

        <td>Lee. K. H</td>

   </tr>

</table>



+ Recent posts