[Android] 글자에 옷을 입혀보자 (Spannable 사용하기)

이번에 포스팅 할 내용은 Spannable 입니다.

텍스트의 '일부' 에만 색을 입히거나, 크기를 늘리거나 등등 효과를 넣을 수 있게 해주는 녀석입니다.

어떤 효과들이 있는지 살펴보도록 하겠습니다.

---

Spannable 사용하기

우선, 레이아웃부터 만들겠습니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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"

    android:gravity="center"

    tools:context="rebuild.com.spannable.MainActivity">

    <TextView

        android:id="@+id/txt_example"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:bufferType="spannable"

        android:text="여기는 티스토리 입니다."

        android:textSize="30dp" />

</LinearLayout>

간단하게 TextView 한 개만 배치하였습니다.

중요한 부분은 BufferType 속성을 Spannable로 지정해주어야 합니다.

실행 시에 보여지는 아무 효과도 주지 않은 상태입니다.

각각 변화를 주어 어떻게 변하는지 보겠습니다.

MainActivity.java

package rebuild.com.spannable;

import android.content.Context;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.text.Spannable;

import android.text.Spanned;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private Context mContext;

    private TextView txt_example;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mContext = getApplicationContext();

        txt_example = (TextView) findViewById(R.id.txt_example);

        Spannable span = (Spannable) txt_example.getText();

        span.setSpan(Object what, int start, int end, int flags)

    }

}

위의 코드에서처럼 Spannable 객체의 setSpan() 메소드를 통해 효과를 주시면 되는데요,

첫번째 매개변수(Object what)에는 적용하고자 하는 효과가 무엇인지 지정합니다

두번째와 세번째 매개변수(int start, int end)는 효과를 주고자 하는 위치의 시작점과 끝점을 지정합니다.

네번째 매개변수(int flags)는 Span의 포인트 또는 마크에 대한 제어를 위한 플래그를 지정합니다.

플래그 속성에는 INCLUSIVE와 EXCLUSIVE가 있는데요, INCLUSIVE는 확장을 뜻하며, EXCLUSIVE는 단절을 뜻합니다.

예를 들어, SPAN_INCLUSIVE_EXCLUSIVE 라는 플래그를 보시면, 앞부분에 확장성을 열어두고, 뒷부분에는 확장을 사용하지 않겠다는 뜻입니다. 반대로 SPAN_EXCLUSIVE_INCLUSIVE 라는 플래그는 앞부분은 확장을 하지 않고, 뒷부분에 확장성을 열겠다는 뜻입니다.

중요한 점은 플래그에 대한 설정은 고정적이지 않은, 변경될 수 있는 유동적인 값에만 적용된다는 점입니다. 쉽게 확인 해보기 위해서는 EditText를 이용하여 앞이나 뒷부분에 글자를 추가해보시면서 두 속성의 차이를 비교해보실 수 있습니다.

이외에도 다른 속성들이 존재하나 자세한 내용은 디벨로퍼 문서나 Spanned 인터페이스의 주석을 참고하시면 될 듯 합니다.

# ForegroundColorSpan

     - 글자색을 지정할 수 있습니다.

span.setSpan(new ForegroundColorSpan(글자색), 시작지점, 끝지점, 옵션);

ex) span.setSpan(new ForegroundColorSpan(Color.RED), 4, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

span을 여러개 붙여 각 글자마다 색상을 다르게 구현하실 수도 있습니다.

# BackgroundColorSpan

     - 배경색을 지정할 수 있습니다.

span.setSpan(new BackgroundColorSpan(배경색), 시작지점, 끝지점, 옵션);

ex) span.setSpan(new BackgroundColorSpan(Color.RED), 4, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

# UnderlineSpan

     - 밑줄을 표시할 수 있습니다.

span.setSpan(new UnderlineSpan(), 시작지점, 끝지점, 옵션);

ex) span.setSpan(new UnderlineSpan(), 4, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

# AbsoluteSizeSpan

     - 절대적인 글자크기를 지정할 수 있습니다.

span.setSpan(new AbsoluteSizeSpan(글자크기), 시작지점, 끝지점, 옵션);

ex) span.setSpan(new AbsoluteSizeSpan(100), 4, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

# RelativeSizeSpan

     - 상대적인 글자크기를 지정할 수 있습니다.

span.setSpan(new RelativeSizeSpan(글자크기), 시작지점, 끝지점, 옵션);

ex) span.setSpan(new RelativeSizeSpan(1.5f), 4, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

두 가지 모두 글자크기를 지정할 수 있지만, 차이가 있습니다. AbsoluteSizeSpan의 경우, 절대적인 값을 사용하여 글자 크기를 지정하는 반면에, RelativeSizeSpan의 경우는 기존 글자와의 상대적인 글자크기를 지정할 수 있습니다.

# StyleSpan

     - 스타일을 지정할 수 있습니다.

span.setSpan(new StyleSpan(스타일), 시작지점, 끝지점, 옵션);

ex) span.setSpan(new StyleSpan(Typeface.ITALIC), 4, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

스타일 종류에는 NORMAL, ITALIC, BOLD, BOLD_ITALIC 이 있습니다.

글만 봐도 어떤 스타일인지는 다들 아시겠죠?

# ImageSpan

     - 이미지를 추가할 수 있습니다.

span.setSpan(new ImageSpan(이미지), 시작지점, 끝지점, 옵션);

ex) Drawable image = getResources().getDrawable(R.drawable.tistory);

     image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());

     span.setSpan(new ImageSpan(d), 4, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

예제에서는 샘플용 이미지를 리소스에서 불러와 사용하였지만, 이외의 방법으로 세팅하셔도 무방합니다.

# ClickableSpan

     - 클릭효과를 지정할 수 있습니다.

span.setSpan(new ClickableSpan() {...}, 시작지점, 끝지점, 옵션);

ex) span.setSpan(new ClickableSpan() {

          @Override

          public void onClick(View widget) {

               Toast.makeText(mContext, "ClickableSpan-!", Toast.LENGTH_SHORT).show();

          }

     }, 4, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

     txt_example.setMovementMethod(LinkMovementMethod.getInstance());

ClickableSpan을 사용할 때 가장 주의해야 하는 점은 setMovemnetMethod()를 설정해주는 일입니다. MovementMethod를 설정함으로 써, 텍스트 뷰는 키에 대한 리스너나 이동 메소드를 수행할 수 있게 됩니다.

# URLSpan

     - 링크효과를 지정할 수 있습니다.

span.setSpan(new URLSpan(링크주소), 시작지점, 끝지점, 옵션);

ex) String url = "http://re-build.tistory.com";

     span.setSpan(new URLSpan(url), 4, 8, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

     txt_example.setMovementMethod(LinkMovementMethod.getInstance());

URL span도 마찬가지로 setMovementMethod()를 설정해주어야 정상적으로 동작합니다.

---

이번 포스팅에서는 CharacterStyle 부분 만을 다뤘지만, 이 외에도 ParagraphStyle, TextWatcher, SpanWatcher 등 여러 효과들이 있습니다. 

사용법은 비슷하니 간단히 사용하실 수 있으실 거라 생각합니다.

이상으로 포스팅을 마치겠습니다.

문의사항이나 수정사항에 대해서는 댓글로 작성 부탁드립니다.