テキスト中のタグで画面遷移する実装に使える「ClickableSpan」のデザインを調整する

Instagram、Twitterなどでは、「#」から始まるテキストがハッシュタグとして扱われます。
タグの部分は色が変わり、画面遷移することができるようになっています。

今回これを実装するのですが、デフォルトのスタイルではHTMLの<a>のデフォルトスタイルのように青色、下線が入ってしまいます。

以下では、このClickableSpanのデザインを、自分の意図したものへ変える方法を紹介します。

やりがちな実装

ハッシュタグや、メンションの実装の何がすごいかといえば、
クリックできるテキストが、ひとつのTextViewに、複数入っているところにあります。
一般的には、

TextView textView;

textView = (TextView) findViewById(R.id.text);
textView.setOnClickListener(this);

とかやるもんだから、TextView全体にリスナーがついちゃいます。
一つ一つの文字列に対してonClickListenerをつけるなんて考えません。
……でも、Instaはできている。

ClickableSpanの実装例

簡単です。SpannableStringBuilder (Reference) を使いますよ！
以下、実装例です。ちょっと長いけど、簡単なはず。

// まずはSpannableStringBuilderを用意します
// これに、テキストをappendしながら、ClickableSpanをくっつけていきます
SpannableStringBuilder builder = new SpannableStringBuilder();

// 流れとしては、文字をappendして、その範囲にSpanをsetするを繰り返す感じです
// 大事なのは、setSpan(Object what, int start, int end, int flags)です。
builder.append("#ハッシュタグ");
builder.setSpan(new ClickableSpan() {
    // テキストをタップした時に実行するonClick
    @Override
    public void onClick(View widget) {
        // 画面遷移などの処理
        context.getApplicationContext();
        Intent intent = new Intent(context, NextActivty.class);
        context.startActivity(intentOtherUserProfile);
    }

    // 見た目のデザインを調整するupdateDrawState
    @Override
    public void updateDrawState(TextPaint ds) {
        // 色と下線を変更
        ds.setColor(getContext().getResources().getColor(R.color.gray));
        ds.setUnderlineText(false);
    },
    0, "#ハッシュタグ".length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
// 最後に変更するindexを指定します
// 一番最後の引数では、指定したindexを選択範囲に含めるか含めないかなどを設定しています

builder.append("後ろに続くコメント");

// 通常通り、textViewにセット
textView.setText(builder);

// これを忘れない。リンクなどで画面遷移するよ宣言
textView.setMovementMethod(LinkMovementMethod.getInstance());

勝手についてしまう「下線」「色」を変えるには

上の実装例にもあったように、updateDrawStateをオーバーライドします。
TextPaintに対して、Textの様々な見た目を設定してあげることでデザインを変更します。
下線がつかないだけで、ずいぶんとスマートになりますよ！

参考：
ひきだしのナカミ Android - ClickableSpanのアンダーラインを消す
Y.A.Mの雑記帳 Android Spannable を使って文字列の一部を装飾する