ReplacementSpanでTextViewの一部を装飾する

例えばTextViewの一部をリンクにしたり、一部を強調したい、などの時にTextViewの一部に装飾したいときってありますよね？
実はTextViewはSpannableStringを使うことにより、一部を装飾したり、リンクにしたりといったことは簡単にできます。

詳しい内容は @wasabeef_jp さんの投稿 [Android Advanced TextView](Android Advanced TextView) にまとまっているのでそちらを参照してください。

今回は、その中で ReplacementSpan を使って背景や点線の下線の描画などをやりたいと思います。

といってもとても簡単で、 ReplacementSpan を継承したクラスを作り、 draw メソッドをオーバーライドして上げてそこで Canvas に描画してあげるだけです。
ね、簡単でしょう？

サンプル

文章だけでもいいかな、と思ったんですがてきとーに実装もしたんで紹介します。
手順としては、先に下線や背景を描画したあとに、Textを描画してあげます。

スクリーンショット

上から、順に

• 点線の下線
• 背景色と角丸のborder
• drawable の背景画像

サンプルコード

今回実装したものは以下のようになります。

public class BackgroundSpan extends ReplacementSpan {

    public static final int TYPE_DASH_UNDERLINE = 1;

    public static final int TYPE_BORDER_RECT = 2;

    public static final int TYPE_BACKGROUND_IMAGE = 3;

    private int type;

    private Bitmap bitmap;

    public BackgroundSpan(int type) {
        this.type = type;
    }

    public BackgroundSpan(int type, Bitmap bitmap) {
        this.type = type;
        this.bitmap = bitmap;
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        return (int) paint.measureText(text, start, end);
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        RectF rectF = new RectF(x, top, x + measureText(paint, text, start, end), bottom - 5);
        paint.setStrokeWidth(2.0f);

        switch (type) {
            case TYPE_DASH_UNDERLINE:
                drawDashUnderline(canvas, paint, rectF);
                break;
            case TYPE_BORDER_RECT:
                drawBorderRect(canvas, paint, rectF);
                break;
            case TYPE_BACKGROUND_IMAGE:
                drawBackgourdImage(canvas, paint, rectF);
                break;
        }

        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLACK);
        canvas.drawText(text, start, end, x, y, paint);
    }

    // 点線の下線を描画するメソッド
    private void drawDashUnderline(Canvas canvas, Paint paint, RectF rectF) {
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLACK);
        float interval = 10;
        paint.setPathEffect(new DashPathEffect(new float[]{interval, interval}, 0));
        canvas.drawLine(rectF.left, rectF.bottom, rectF.right, rectF.bottom, paint);
    }

    // 背景色と角丸のborderを描画するメソッド
    private void drawBorderRect(Canvas canvas, Paint paint, RectF rectF) {
        int cornerRadius = 10;
        paint.setColor(Color.LTGRAY);
        canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);

        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLACK);
        paint.setAntiAlias(true);
        canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);
    }

    // 背景画像を描画するメソッド
    private void drawBackgourdImage(Canvas canvas, Paint paint, RectF rectF) {
        Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        canvas.drawBitmap(bitmap, rect, rectF, paint);
    }

    private float measureText(Paint paint, CharSequence text, int start, int end) {
        return paint.measureText(text, start, end);
    }
}

ここで実装したクラスを以下のように TextView にセットしてあげると適応されます。

final String DUMMY_TEXT = "これはダミーテキストです。";
SpannableStringBuilder builder = new SpannableStringBuilder();

builder.append(DUMMY_TEXT);
builder.setSpan(new BackgroundSpan(BackgroundSpan.TYPE_DASH_UNDERLINE), 3, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
binding.textView1.setText(builder);
binding.textView1.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

builder = new SpannableStringBuilder();
builder.append(DUMMY_TEXT);
builder.setSpan(new BackgroundSpan(BackgroundSpan.TYPE_BORDER_RECT), 3, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
binding.textView2.setText(builder);

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), android.R.drawable.sym_def_app_icon);
builder = new SpannableStringBuilder();
builder.append(DUMMY_TEXT);
builder.setSpan(new BackgroundSpan(BackgroundSpan.TYPE_BACKGROUND_IMAGE, bitmap), 3, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
binding.textView3.setText(builder);

以上です。なにか他にわからない点や、間違っている点があれば、気軽にコメントしていただけると幸いです。

参考

[Android Advanced TextView](Android Advanced TextView)