[ Android ] 안드로이드 개발에서 HtmlCompat.fromHtml을 이용한 HTML 태그 적용: CDATA와 이스케이프 문자 활용법

 

 

 

다음과 같이 텍스트의 색상이 달라지는 레이아웃을 구현을 해야 하는 상황이었다.

"비상 버튼을 3초이 눌러\n 발생 또는 해제"

위와 같은 한 문장의 레이아웃을 만들기 위해서 TextView를 세 개씩 사용하는 방식은 레이아웃구조를 지나치게 길어지게 만들어 비효율 적이라는 생각이 들었다.
레이아웃 구조를 늘리지 않고 텍스트의 색상을 바꿔줄 수 있는 방법이 없을 지 찾아 보았고,
HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_LEGACY);를 사용하여 코드상으로 구현을 할 수 있다는 것을 알아내었다.

사용 방법은 

private String unmodeDesHtmlText = "<font color='#688bff'>5회 연속 빠르게 탭</font>하여<br /> 시각 장애인 모드를 해제";
private String callSecurityDesHtmlText = "통화 버튼을 <font color='#688bff'>3초 이상 눌러</font> 호출";
private String emergencyDesHtmlText = "비상 버튼을 <font color='#688bff'>3초이상 눌러</font><br /> 발생 또는 해제";

 

다음과 같이 String 안에 html 태그를 넣어 작성 해 주고,

binding.tvUnmodeDes.setText(HtmlCompat.fromHtml(unmodeDesHtmlText, HtmlCompat.FROM_HTML_MODE_LEGACY));
binding.tvCallSecurityOfficeDes.setText(HtmlCompat.fromHtml(callSecurityDesHtmlText, HtmlCompat.FROM_HTML_MODE_LEGACY));
binding.tvEmergencyDes.setText(HtmlCompat.fromHtml(emergencyDesHtmlText, HtmlCompat.FROM_HTML_MODE_LEGACY));

 

HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_LEGACY);을 통해 적용을 해 주는 것이다.

그런데 여기서

정의 해 놓은 HtmlText를 좀 더 깔끔하게 정리 할 수 있는 방법이 있지 않을까 고민 해 보게 되었고,
String.xml에 파일에 정의 한 뒤 import해서 사용하는 방법을 생각했다.

 

그래서 

String.xml파일에

<string name="braille_html_text_unmode_des"><font color='#688bff'>5회 연속 빠르게 탭</font>하여<br /> 시각 장애인 모드를 해제</string>
<string name="braille_html_text_call_security_des">통화 버튼을 <font color='#688bff'>3초 이상 눌러</font> 호출</string>
<string name="braille_html_text_emergency_des">비상 버튼을 <font color='#688bff'>3초이상 눌러</font><br /> 발생 또는 해제</string>

 

다음과 같이 정의 해 두고 

 

클래스 파일에서

binding.tvUnmodeDes.setText(HtmlCompat.fromHtml(getString(R.string.braille_html_text_unmode_des), HtmlCompat.FROM_HTML_MODE_LEGACY));
binding.tvCallSecurityOfficeDes.setText(HtmlCompat.fromHtml(getString(R.string.braille_html_text_call_security_des), HtmlCompat.FROM_HTML_MODE_LEGACY));
binding.tvEmergencyDes.setText(HtmlCompat.fromHtml(getString(R.string.braille_html_text_emergency_des), HtmlCompat.FROM_HTML_MODE_LEGACY));

 

위와 같이 import 해서 사용을 해 주었는데, 예상과 다르게 html 태그가 전혀 적용이 되지 않았다.

 

두가지 방법을 찾아 내었는데,

첫 번째 방법으로는

<string name="braille_html_text_unmode_des">&lt;font color="#688bff"&gt;5회 연속 빠르게 탭&lt;/font&gt;하여&lt;br /&gt; 시각 장애인 모드를 해제</string>
<string name="braille_html_text_call_security_des">통화 버튼을 &lt;font color="#688bff"&gt;3초 이상 눌러&lt;/font&gt; 호출</string>
<string name="braille_html_text_emergency_des">비상 버튼을 &lt;font color="#688bff"&gt;3초이상 눌러&lt;/font&gt;&lt;br /&gt; 발생 또는 해제</string>

다음과 같이 이스케이스문자를 사용하여 태그를 정의 해 주는 방법이다.

이 방법은 html 태그를 정의 할 수 있지만 가독성이 떨어 질 수 있다.

 

두 번째 방법으로는

<string name="braille_html_text_unmode_des"><![CDATA[<font color="#688bff">5회 연속 빠르게 탭</font>하여<br /> 시각 장애인 모드를 해제]]></string>
<string name="braille_html_text_call_security_des">통화 버튼을 <![CDATA[<font color="#688bff">3초 이상 눌러</font> 호출]]></string>
<string name="braille_html_text_emergency_des">비상 버튼을 <![CDATA[<font color="#688bff">3초이상 눌러</font><br /> 발생 또는 해제]]></string>

다음과 같이 

CDATA 섹션을 사용하여 html태그를 감싸주는 것이다.

이 방법은 html태그를 가독성 좋게 정의 할 수 있어서, 유지 보수에 용이하며 코드르 읽기 쉽게 만들어 준다.

위 두 가지 방법을 통해 안드로이드 리소스 파일에서 문자열을 정의할 때 HTML 태그를 적용 할 수 있었고
가독성 측면에서 두번째 방법이 더 좋은 것 같다는 생각이 들었다.