[안드로이드] TextView 텍스트 문자열 일부 색상/크기/스타일 변경 설정 방법: Spannable

안드로이드에서 TextView 사용시,

TextView 내부의 텍스트 글자마다 서로 다른 스타일(색깔, 크기, 볼드체 등)을 적용해야 할 때가 있다.

물론 글자마다 각각 TextView를 생성해서 처리해 주어도 되긴 한다.

하지만 TextView를 하나만 사용하면서 내부의 각 문자열들을 따로 처리할 수 있다면 더욱 효율적일 것이다.

 

안드로이드는 SpannableStringBuilder를 통해 이런 기능을 지원해준다.

 

# SpannableStringBuilder 사용방법

1. TextView의 text를 SpannableStringBuilder로 변환

2. 스타일/크기/색상 Span 객체 생성

3. SpannableStringBuilder에 Span 적용

4. TextView의 text에 SpannableStringBuilder 설정

 

자세한 사용방법은 아래와 같다.

(코드로 보면 훨씬 간단하고 쉽다)

---

# TextView/EditText 의 내부 텍스트 일부 스타일 적용 방법

1.레이아웃 XML파일

- TextView 속성 추가( bufferType="spannabe" )

* bufferType을 "spannable"로 설정해주어야 SpannableStringBuilder를 통해 문자열의 스타일을 조정할 수 있다.

* TextView는 bufferType이 디폴트로 "normal"로 설정되어서 spannabe로 별도 설정해주어야 한다.

* EditText는 bufferType="editable"로 지정(spannable포함)되어 있어서 별도로 설정해주지 않아도 된다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SpannableActivity">

    <!-- android:bufferType="spannable" 속성을 추가 설정 -->
    <TextView
        android:id="@+id/textViewSpannable"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="012345"
        android:bufferType="spannable"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

2. 액티비티(Java/Kotlin) 파일

1) TextView 참조

- 레이아웃 XML에 생성한 TextView를 참조

 

2) TextView.text 취득

- TextView에 설정된 텍스트 문자열을 취득하여 String으로 변환한다.

 

3) TextView.text 를 SpannableStringBuilder 로 변환

- String으로 변환한 문자열을 SpannableStringBuilder로 변환한다.

 

4) Span 객체 생성 및 적용

- Span 객체 종류: StyleSpan(스타일), RelativeSizeSpan(사이즈 배수), ForegroundColorSpan(색상)

- SpannableStringBuilder에 span 적용: setSpan(Span객체, 시작Index, 종료Index, *Span적용설정상수)

 

5) TextView.text에 SpannableStringBuilder 적용

- Span을 통해 적용한 스타일/사이즈/색상이 TextView에 적용된다.

 

 

위의 순서대로 코드를 작성하여 주석을 달아 두었다.

class SpannableActivity : AppCompatActivity() {

    // TextView 변수
    lateinit var textView:TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_spannable)

        // 1. TextView 참조
        textView = findViewById(R.id.textViewSpannable)

        // 2. String 문자열 데이터 취득
        val textData: String = textView.text.toString()

        // 3. SpannableStringBuilder 타입으로 변환
        val builder = SpannableStringBuilder(textData)

        // 4-1. index=0 에 해당하는 문자열(0)에 볼드체적용
        val boldSpan = StyleSpan(Typeface.BOLD)
        builder.setSpan(boldSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

        // 4-2 index=2에 해당하는 문자열(2)에 글자크기 3배 적용
        val sizeBigSpan = RelativeSizeSpan(3.0f)
        builder.setSpan(sizeBigSpan, 2, 3, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

        // 4-3 index=4에 해당하는 문자열(4)에 빨간색 적용
        val colorBlueSpan = ForegroundColorSpan(Color.RED)
        builder.setSpan(colorBlueSpan, 4, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

        // 5. TextView에 적용
        textView.text = builder

    }
}

 

* setSpan() 함수의 마지막 매개변수는 Span이 적용된 좌우측에 문자열이 추가될 때 Span을 적용할 것지 설정하는 값이다.

- SPAN_EXCLUSIVE_EXCLUSIVE: 왼쪽X, 오른쪽X

- SPAN_EXCLUSIVE_INCLUSIVE: 왼쪽X, 오른쪽O

- SPAN_INCLUSIVE_EXCLUSIVE: 왼쪽O, 오른쪽X

- SPAN_INCLUSIVE_INCLUSIVE: 왼쪽O, 오른쪽O

 

Spannabe 에 대한 더 자세한 내용은 아래 가이드 레퍼런스를 참고

https://developer.android.com/guide/topics/text/spans

---

# 실행 결과

하나의 TextView만 사용하면서

0은 볼드체가 적용되었고,

2는 글자 사이즈가 3배가 되었고,

4는 글자색상이 빨간색이 되었다.