안드로이드 TextView 글자 꾸미기 효과 주기

안녕하세요. 개발자 드리머즈입니다.

이번 포스트에서는 TextView의 글자 꾸미는 방법에 대해 알아보겠습니다.

기본 지식

안드로이드 개발을 하다보면 위의 TextView의 setText함수처럼 인자로 CharSequence를 받는 것을 종종 볼 수 있습니다. 그런데 이 함수에 String의 객체를 넣어도 문제가 없습니다. 왜냐하면 String 클래스는 ChartSequence의 자손(SubClass)이기 때문이죠.

위 표에서 그 사실을 확인할 수 있습니다.(https://developer.android.com/reference/java/lang/CharSequence.html)

Spannable은 동사 span에서 왔는데 span은 아래의 뜻을 가지고 있습니다.

[기억·상상·사건 등이] [연월 등에] 걸치다, 미치다; [나라 등이] [지역에] 걸치다, 미치다; [공백 등을] 메우다

제 추측으로 전체 스트링에서 부분을 나눠서, 원하는 부분(portion)에 글자 꾸미기 효과를 미치게(span) 한다는 뜻에서 span을 쓰는 것 같습니다. 

코드 사용법

지금까지는 TextView의 setText에 단순히 String 객체를 넣었지만 글자에 효과를 주기위해 SpannableString을 사용해보겠습니다.

xml파일은 <TextView> 1개가 있는 아주 간단한 구조입니다.

*activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.dreamaz.charsequence.MainActivity">
 
    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</android.support.constraint.ConstraintLayout>
 

핵심이 되는 java코드입니다.

*MainActivity.java

public class MainActivity extends AppCompatActivity {
    TextView textView;
 
    Typeface mTfRegular;
    Typeface mTfLight;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        textView = findViewById(R.id.text_view);
 
        SpannableString s = new SpannableString("CharSequence Test!\ndeveloped by Dreamaz");
 
        s.setSpan(new RelativeSizeSpan(2.7f), 0, 18, 0);
        s.setSpan(new ForegroundColorSpan(Color.BLACK), 0, 18, 0);
 
        s.setSpan(new StyleSpan(Typeface.NORMAL), 18, s.length() - 20, 0);
        s.setSpan(new ForegroundColorSpan(Color.GRAY), 18, s.length() - 20, 0);
        s.setSpan(new RelativeSizeSpan(.8f), 18, s.length() - 20, 0);
 
        s.setSpan(new StyleSpan(Typeface.ITALIC), s.length() - 7, s.length(), 0);
        s.setSpan(new ForegroundColorSpan(Color.BLUE), s.length() - 7, s.length(), 0);
 
        textView.setText(s);
    }
}

14번째 코드에서 s라는 SpannableString의 객체를 생성합니다. 생성자에 표현할 문자열을 넣었습니다.

그리고 그 이후의 16~24번째 줄의 코드에서 setSpan()함수를 통해 문자열에 효과를 줍니다.

이 함수의 인자는 4개입니다.

위 그림에서 보듯이 1번째 인자에서 주고자하는 효과를 지정하고, 2~3번째 인자에서 시작index와 종료index(효과를 미칠 범위)를 지정합니다. 4번째 인자는 flag인데 사용하지 않았습니다.

실행 결과

실행결과는 위 사진과 같습니다. 크게 3부분으로 나눠서 효과를 줬습니다.

참고

MPAndroidChart(안드로이드 차트 라이브러리) : https://github.com/PhilJay/MPAndroidChart/blob/23e0178dbbf873f4dcc99f94a77b8fa2af7aa224/MPChartExample/src/com/xxmassdeveloper/mpchartexample/PiePolylineChartActivity.java