[Android/UI-UX] 텍스트의 일부에 스타일 및 터치 이벤트 설정하기

안드로이드 TextView에 적용하는 Text의 일부의 스타일을 바꾸고, 터치 이벤트도 주고 싶다면 어떻게 해야 할까?

 

Spannable Text로 이를 해결할 수 있다.

 

1. 적용하고자 하는 string을 toSpannable()을 사용해 Spannable로 만든다.

 

2. setSpan으로 적용할 Span을 필요한 만큼 설정한다.

 

 클릭 이벤트를 주고 싶다면 ClickableSpan을, 텍스트 스타일을 변경하려면 TextApperanceSpan을 사용한다.

 

3. 설정이 완료된 Spannable을 적용하고자 하는 TextView의 text에 설정하면 된다.

 

val textView: TextView

val sampleString = "Clickable and styleable"

val clickableSpan = object : ClickableSpan() {
    override fun onClick(widget: View) {
    		// span을 설정한 텍스트에 클릭이 일어날 때 수행할 액션을 정의한다.
    }

    override fun updateDrawState(ds: TextPaint) {
    		// span이 설정된 텍스트의 Text color를 정한다.
            ds.linkColor = textView.context.getColor(R.color.black)
    }
}

// 타겟 텍스트에 프로젝트가 사용하고 있는 style을 적용하고자 할 때 TextApperanceSpan을 쓰자.
val textApperanceSpan = TextAppearanceSpan(textView.context, R.style.MyStyle)
val endPosition = sampleString.indexOfFirst { it == ' ' }

textView.apply {
    // 밑줄을 제거하고자 한다면 TRANSPARENT로 색상을 지정하면 된다.
    highlightColor = Color.TRANSPARENT
}
        
sampleString.toSpannable().apply {
		setSpan(textApperanceSpan, 0, endPosition, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
		setSpan(clickableSpan, 0, endPosition, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
}.also {
	// TextView text에 span이 설정된 Spannable을 넣어준다.
	textView.text = it
}