[Android] Spannable를 사용해 특정 문자에 이벤트 적용하자

Spannable는 텍스트의 일부를 바꿀 수 있게 해줍니다.

 

 

 

<?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=".MainActivity">

    <TextView
        android:id="@+id/tv_sample"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="안녕하세요 라크라꾸입니다."
        android:bufferType="spannable"
        android:textSize="30dp"/>

</LinearLayout>

 

Spannable를 사용하기 위해서는 BufferType속성을 Spannable로 지정해주어야 합니다.

 

import android.content.Context;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Spannable;
import android.text.Spanned;
import android.text.style.ForegroundColorSpan;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private Context mContext;

    private TextView tv_sample;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = getApplicationContext();

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

        Spannable span = (Spannable) tv_sample.getText();
        span.setSpan(new ForegroundColorSpan(Color.RED), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
    }
}

지금부터 만지는 코드는 아래 코드만 수정해주시면 됩니다.

 

ForegroundColorSpan

 - 글자 색 지정

 

       Spannable span = (Spannable) tv_sample.getText();
        span.setSpan(new ForegroundColorSpan(Color.RED), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);

0번째 인덱스~ 5번째 인덱스의 문자(안녕하세요)부분만 빨간색을 입힌 예제입니다.

 

 

BackgroundColorSpan

 - 배경 색 지정

 

       Spannable span = (Spannable) tv_sample.getText();
        span.setSpan(new ForegroundColorSpan(Color.WHITE), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new BackgroundColorSpan(Color.RED), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);

0번째 인덱스~ 5번째 인덱스의 문자(안녕하세요)부분만 빨간색을 입힌 예제입니다.

 

 

AbsoluteSizeSpan

 - 글자크기 고정

 

Spannable span = (Spannable) tv_sample.getText();
        span.setSpan(new ForegroundColorSpan(Color.WHITE), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new BackgroundColorSpan(Color.RED), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new AbsoluteSizeSpan(100), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);

0번째 인덱스~ 5번째 인덱스의 문자(안녕하세요)부분만 글자 크기를 100으로 지정했습니다.

주변의 글자와 관계없이 크기가 100으로 고정되어있습니다.

 

 

RelativeSizeSpan

 - 주변 글자 크기에 따라 크기 변경

 

Spannable span = (Spannable) tv_sample.getText();
        span.setSpan(new ForegroundColorSpan(Color.WHITE), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new BackgroundColorSpan(Color.RED), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new RelativeSizeSpan(1.5f), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);

0번째 인덱스~ 5번째 인덱스의 문자(안녕하세요)부분만 글자 크기를 주변 글자크기의 1.5배로 지정했습니다.

주변의 글자의 크기에 따라 "안녕하세요"문자의 크기도 변경됩니다.

 

 

UnderlineSpan

 - 밑줄 표시

 

        Spannable span = (Spannable) tv_sample.getText();
        span.setSpan(new ForegroundColorSpan(Color.WHITE), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new BackgroundColorSpan(Color.RED), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new RelativeSizeSpan(1.5f), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new UnderlineSpan(), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);

0번째 인덱스~ 5번째 인덱스의 문자(안녕하세요)부분만 밑줄을 적용했습니다.

 

 

ImageSpan

 - 글자 사이 이미지 적용

 

        Drawable image = getResources().getDrawable(R.drawable.best);
        image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());

        Spannable span = (Spannable) tv_sample.getText();
        span.setSpan(new ImageSpan(image), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);

0~5번째 인덱스에 넣고 싶은 이미지로 대체할 수 있습니다.

 

 

 

StyleSpan

 - 글자 스타일 지정

 

        Spannable span = (Spannable) tv_sample.getText();
        span.setSpan(new ForegroundColorSpan(Color.WHITE), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new BackgroundColorSpan(Color.RED), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new RelativeSizeSpan(1.5f), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new UnderlineSpan(), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        span.setSpan(new StyleSpan(Typeface.BOLD), 0, 5, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);

0번째 인덱스~ 5번째 인덱스의 문자(안녕하세요)부분만 Bold글씨체를 적용했습니다.

 

 

URLSpan

 - URL링크 바로가기

 

        Spannable span = (Spannable) tv_sample.getText();
        String url = "https://lakue.tistory.com/4";
        span.setSpan(new URLSpan(url), 6, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        tv_sample.setMovementMethod(LinkMovementMethod.getInstance());

 

6~10번째 인덱스(라크라꾸)를 클릭하게 되면 해당 URL로 이동하게 적용하였습니다.

 

ClickableSpan

 - 클릭 효과 지정

 

        Spannable span = (Spannable) tv_sample.getText();
        tv_sample.setMovementMethod(LinkMovementMethod.getInstance());
        span.setSpan(new ClickableSpan() {

            @Override
            public void onClick(View widget) {
                Toast.makeText(mContext, "라크라꾸~~", Toast.LENGTH_SHORT).show();
            }
        }, 6, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        tv_sample.setMovementMethod(LinkMovementMethod.getInstance());

 

6~10번째 인덱스(라크라꾸)를 클릭하게 되면 Toast메시지가 뜨도록 적용하였습니다.