【正社員】還元率83%【フリーランス】マージン一律5万円で案件をご紹介させていただきます。 詳細はこちら

【Android】<kotlin>SpannableStringでテキストの一部をリンク化する方法を徹底解説!

すだ

みなさまこんにちは〜!
メモリアインクのすだです。

本日は、
KotlinのSpannableStringでテキストの一部をリンク化する方法を
実際のコードを利用して徹底解説していきます!

この記事を読んでわかること…
・SpannableStringとは?
・Kotlinでテキストの一部をリンク化する方法
・リンク化したテキストをタップして任意のページへ遷移する方法

目次

環境

  • Kotlin (ver 1.9.0)
  • Android Studio (Giraffe | 2022.3.1 Patch 3)

SpannableStringとは

Androidアプリで特定のテキストをリンク化して、タップ時に特定の画面へ遷移させたいケースは多くあります。
例えば、「利用規約」というテキストをリンクとして設定し、タップすると利用規約のページへジャンプするような実装です。

Kotlinで テキストの一部をリンク化する際には、SpannableStringを使用します。
これは、テキストの特定の部分に装飾や動作を設定できるオブジェクトです。

SpannableStringを使えば、文字の一部に色をつけたり、クリックイベントを設定できます。

SpannableStringを使ってテキストの一部をリンク化するには、以下の3つのステップを踏みます。

  1. SpannableStringオブジェクトを生成
  2. ClickabkeSpanを作成(タップ時の挙動を定義)
  3. TextViewにセット

ClickabkeSpanは、タップ時に特定の処理を実行するためのクラスです。
これを使うことで、任意の文字列に対してリンク風の動作を付与できます。

テキストの一部をリンク化する実装方法

それでは早速、実装していきましょう!
今回は、リンク化したテキストをタップすることで、任意のアプリ画面へ遷移するように実装してみます。

サンプルコード

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView: TextView = findViewById(R.id.textView)
        val fullText = textView.text.toString() // TextViewからテキストを取得
        val spannable = SpannableString(fullText)

        val clickableSpan = object : ClickableSpan() {
            override fun onClick(widget: View) {
                // WebViewへ遷移
                val intent = Intent(widget.context, WebViewActivity::class.java)
                intent.putExtra("url", "https://memoriainc.com/")
                widget.context.startActivity(intent)
            }
        }

        val startIndex = fullText.indexOf("こちら")
        if (startIndex != -1) { // 「こちら」が見つかった場合のみ
            val endIndex = startIndex + "こちら".length
            spannable.setSpan(clickableSpan, startIndex, endIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        }

        textView.text = spannable
        textView.movementMethod = LinkMovementMethod.getInstance() // タップ可能にする
    }
}

サンプルコードの解説

val spannable = SpannableString(fullText)

→ ここで、TextViewに表示されているテキスト全文を取得してSpannableStringの引数にセットしています。
SpannableStringはString型の引数を受け取って生成され、
これによりfullTextの内容がSpannableStringオブジェクトとなります。

val clickableSpan = object : ClickableSpan() {

→ ここで、リンク化したテキストをタップした時の挙動(クリックイベント)をセットします。

val startIndex = fullText.indexOf("こちら")
val endIndex = startIndex + "こちら".length

→ startIndexは、リンク化したいテキスト(「こちら」)の開始位置、
endIndexはリンク化するテキストの終了位置です。

endIndexは、「開始位置」 + 「テキストの長さ」で計算されます。


spannable.setSpan(clickableSpan, startIndex, endIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

setSpanメソッドは、SpannableStringのstartIndexからendIndexまでの範囲に対して、特定の効果を設定するメソッドです。
ここで、clickableSpanを設定して「こちら」の部分だけがタップ可能になります。

SPAN_EXCLUSIVE_EXCLUSIVEは、設定する装飾の有効範囲を指定する定数の一つで、
「範囲の先頭、末尾には装飾がつかない」を意味します。

textView.text = spannable

→ ここで、リンクのついたテキストをTextViewにセットしています。

textView.movementMethod = LinkMovementMethod.getInstance()

LinkMovementMethodは、TextView内でリンクタップを可能にするためのクラスです。
これを設定しないと、リンクが見えていてもクリックが反応しません。

それでは、ビルドしてみましょう!

【Android】<kotlin>SpannableStringでテキストの一部をリンク化する方法を徹底解説!

リンク化されたテキストをタップして、WebViewを表示することができました!

まとめ

おつかれさまでした。いかがでしたでしょうか!

テキストの一部をリンク化することで、テキストの表現をより豊かにすることができます。
ぜひ活用してみてください!

すだ

技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか?

それではまた次の記事でお会いしましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

弊社テックブログをご愛読いただきありがとうございます。
当テックブログを運用している株式会社メモリアインクは、
【正社員】還元率83%
【フリーランス】マージン一律5万円で案件のご紹介
と、エンジニアの皆様に分かりやすい形で稼げる仕組みを構築し提供させていただいております。詳しくは弊社お問い合わせページ、プロフィールのQRコードを読み取り、LINEメッセージでお問い合わせいただけますと幸いです。

コメント

コメントする

目次