みなさまこんにちは〜!
メモリアインクのすだです。
本日は、
KotlinのSpannableStringでテキストの一部をリンク化する方法を
実際のコードを利用して徹底解説していきます!
この記事を読んでわかること…
・SpannableStringとは?
・Kotlinでテキストの一部をリンク化する方法
・リンク化したテキストをタップして任意のページへ遷移する方法
環境
- Kotlin (ver 1.9.0)
- Android Studio (Giraffe | 2022.3.1 Patch 3)
SpannableStringとは
Androidアプリで特定のテキストをリンク化して、タップ時に特定の画面へ遷移させたいケースは多くあります。
例えば、「利用規約」というテキストをリンクとして設定し、タップすると利用規約のページへジャンプするような実装です。
Kotlinで テキストの一部をリンク化する際には、SpannableStringを使用します。
これは、テキストの特定の部分に装飾や動作を設定できるオブジェクトです。
SpannableStringを使えば、文字の一部に色をつけたり、クリックイベントを設定できます。
SpannableStringを使ってテキストの一部をリンク化するには、以下の3つのステップを踏みます。
- SpannableStringオブジェクトを生成
- ClickabkeSpanを作成(タップ時の挙動を定義)
- TextViewにセット
これを使うことで、任意の文字列に対してリンク風の動作を付与できます。
テキストの一部をリンク化する実装方法
それでは早速、実装していきましょう!
今回は、リンク化したテキストをタップすることで、任意のアプリ画面へ遷移するように実装してみます。
サンプルコード
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内でリンクタップを可能にするためのクラスです。
これを設定しないと、リンクが見えていてもクリックが反応しません。
それでは、ビルドしてみましょう!
リンク化されたテキストをタップして、WebViewを表示することができました!
まとめ
おつかれさまでした。いかがでしたでしょうか!
テキストの一部をリンク化することで、テキストの表現をより豊かにすることができます。
ぜひ活用してみてください!
技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
自分の市場価値をさらに向上させてみませんか?
それではまた次の記事でお会いしましょう!
コメント