[Android] Text 부분 bold, color 커스텀 with Span

오늘의 포스팅 주제는 텍스트 부분 커스텀입니다!

지금 진행 중인 인스타그램 클론 프로젝트에서 댓글 화면을 만들고 있었고, 작성된 댓글이 나타나는 부분을 실제 인스타그램처럼 UI를 만들고 싶었습니다. 그러기 위해서는 댓글 작성자의 id와 댓글이 같이 나타나야 하고, 댓글 내용이 줄을 넘어가도 그 넘어간 줄의 시작점이 작성자의 id 바로 아래에 오게 위치하고 싶었습니다.

 

😕 하지만 인스타그램 UI에서는 작성자의 id는 bold 처리되어 있는데 어떻게 2개의 텍스트를 이어지게 만들 수 있을까?라는 고민..

💡  id와 댓글내용을 하나의 TextView에 넣고,  span을 사용하여 부분적으로 id만 bold 처리를 하자!

 

Span

스팬은 강력한 마크업 객체로 문자나 단락 수준에서 텍스트 스타일을 지정하는 데 사용할 수 있습니다. 텍스트 객체에 스팬을 연결하여 다양한 방식으로 텍스트를 변경할 수 있습니다. 예를 들면 색상 추가, 텍스트를 클릭 가능하게 만들기, 텍스트 크기 조정, 맞춤 설정 방식으로 텍스트 그리기 등이 있습니다. 

 

1. Span 만들기

• SpannedString : 만들고 나서 텍스트/마크업을 수정하지 않는 경우
• SpannableString : 적은 수의 span을 단일 텍스트 객체에 연결해야 하고 텍스트 자체가 읽기 전용인 경우
• SpannableStringBuilder : 만들고 나서 텍스트를 수정하고 span을 텍스트에 연결해야 하는 경우나 텍스트 자체의 읽기 전용 여부와 상관없이 많은 수의 span을 텍스트 객체에 연결해야 하는 경우

 

2. Span 적용하기

Spannable 객체의 setSpan(Object _what_, int _start_, int _end_, int _flags_)

• _what_ : 텍스트에 적용할 span
  • ForgroundColorSpan(Color.Red) - span 컬러 지정
  • StyleSpan(Typeface.Bold) - span 스타일 지정
• _start_ : span을 적용할 텍스트의 시작 인덱스
• _end_ : span을 적용할 텍스트의 끝 인덱스
• _flags_ : span이 확장되어 삽입된 텍스트를 포함해야 하는지 판단
  • Spannable.SPAN_EXCLUSIVE_INCLUSIVE : 삽입된 텍스트 포함
  • Spannable.SPAN_EXCLUSIVE_EXCLUSIVE : 삽입된 텍스트 제외

 

적용한 코드 >

• 시작부터 ${comments[position].userId} 까지를 span으로 범위 설정
• 해당 범위를 bold 처리 하기 위해 Typeface.Bold로 설정
• 삽입된 텍스트가 없기 때문에 SPAN_EXCLUSIVE_EXCLUSIVE로 설정

override fun onBindViewHolder(holder: CommentRecyclerViewAdapter.CommentViewHolder, position: Int) {
    ...
    var commentWithId = SpannableStringBuilder("${comments[position].userId} ${comments[position].comment}")
    commentWithId.setSpan(
        StyleSpan(Typeface.BOLD),0, comments[position].userId!!.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    )
    holder.commentText.text = commentWithId
    ...
}

 

---

reference >

[공식 문서] 스팬(Span)

스팬  |  Android 개발자  |  Android Developers