[Android] fromHtml Bullet 속성 변경하기

안녕하세요 점냥입니다 :)

 

Android에서 리스트 형태를 표현할 때, RecyclerView를 사용하는 것이 아닌 Html 파싱해서 화면에 보여줄 수 있습니다

Html 문서를 보면 API 1 때부터 Android에서 공식으로 제공해주는 클래스예요!

 

<ul>
	<li>
		<font color='#999999'>첫번째 리스트 아이탬</font>
	</li>
	<li>
		<font color='#999999'>두번째 리스트 아이탬</font>
	</li>
</ul>

 

본론으로 돌아와서 위와 Html을 볼까요?

ui 태그로 리스트임을 명시하고 있으며, li 태그로 2개의 아이템을 가지고 있다는 것을 알 수 있네요.

 

리스트 형태로 텍스트를 표현할 때 위와 같이 Html로 내려주면 정말 편하더라고요. 

현재 Html에는 color만 지정되어 있지만, Url Link와 다양한 글자 색상, 글자 스타일이 있다면 더욱 Html을 파싱 해서 사용하는 것이 좋겠죠?

 

Html Defulat 속성으로 파싱 하기

val html = "<ui><li><ul><li><font color='#999999'>첫번째 리스트 아이탬</font></li><li><font color='#999999'>두번째 리스트 아이탬</font></li></ul></li></ui>"

// Deprecated Html.fromHtml(html, 0)
content.text = HtmlCompat.fromHtml(html, flags = 0)

참고로 frags는 Html을 파싱 할 때 어떤 기준으로 라인을 분리할지 정하는 것입니다

파싱된 결과

 

짜잔! 2개의 리스트가 화면에 그려졌네요. 자세히 보시면 각 리스트 아이템 앞에 점 모양의 아이콘이 있죠. 이것이 Bullet입니다!

그런데 점의 크기가 상당히 작고, 텍스트와 공간도 매우 좁아서 답답해 보이죠.. 

그래서 이번 포스팅의 주제는 이 Bullet의 속성을 변경하는 것입니다!!

 

 

BulletSpan

public class BulletSpan implements LeadingMarginSpan, ParcelableSpan {
    // Bullet is slightly bigger to avoid aliasing artifacts on mdpi devices.
    private static final int STANDARD_BULLET_RADIUS = 4;
    public static final int STANDARD_GAP_WIDTH = 2;
    private static final int STANDARD_COLOR = 0;

 

Buillet은 3가지 속성을 설정할 수 있습니다. Bullet 반지름, Bullet 색상, 텍스트 사이의 거리를 설정할 수 있어요. 

기본 값은 위에서 확인할 수 있습니다.

 

API 1부터 나온 Calss라서 Java로 되어 있네요. (불편 -_-) 

중요한 것은 각 속성이 변경 불가능한 final로 설정되어 있다는 점입니다.  그래서 생성된 BulletSpan의 속성을 변경하는 것이 아니라 새로 적용해야 합니다.

 

 

BulletSpan 수정하기

val html = "<ul><li><font color='#999999'>첫번째 리스트 아이탬</font></li><li><font color='#999999'>두번째 리스트 아이탬</font></li></ul>"

val htmlSpanned = HtmlCompat.fromHtml(html, 0)
val bulletSize = resources.getDimension(R.dimen.bullet_padding);
val modifierBulletSpanned = SpannableString(htmlSpanned).apply {
    for (span in htmlSpanned.getSpans(0, htmlSpanned.length, BulletSpan::class.java)) {
            val start = getSpanStart(span)
            val end = getSpanEnd(span)

            setSpan(BulletSpan(60), start, end, 0)
            removeSpan(span)
        }
    }

binding.sampleText.text = modifierBulletSpanned

 

위에서 언급을 한 것처럼 이미 생성된 객체의 속성을 수정할 수 없기 때문에 setSpan을 사용해서 새로운 Bullet을 적용합니다.

단, Span을 적용하는 시작 위치와 마지막 위치를 가져와서 동일한 위치에 사용하고 이전 BulletSpan을 지워야합니다!

 

텍스트와 거리가 멀어진 Bullet