どうも。どっことです。今回はTextViewの一部にだけ、外部リンクを表示したい時の実装方法を解説します。
TextViewのテキストの一部にリンクをつける
例えばお知らせの記事にある「詳しい内容はこちら」のこちらだけ別ページへのリンクにしたいとき、TextViewを横並びにすれば実現できますが、そのテキストが二行以上になったり、他のテキスト間に含まれた箇所にあるとこの方法では実現できません。これを解決する実装方法を2種類解説していきたいと思います。
実装方法
外部のWebページに遷移する場合であれば簡単です。以下の2種類を解説していきます。
-
TextViewのautoLinkにwebを設定する方法 HtmlCompat.fromHtmlを利用する方法
TextViewのautoLink属性にwebを設定する方法
TextViewを配置しているレイアウトXML内で、autoLink="web"を設定するだけです。仕込むリンクが単純なURLであれば、それをテキストとして設定するだけでそれっぽい表示になります。
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="https://www.google.co.jp/ とテキストを仕込むとGoogleページのリンクになります。"
android:autoLink="web"
/>実際に表示した時のイメージは以下です。https://...のURL部分がリンクになっていると思います。タップするとURLのページに遷移します。
HtmlCompat.fromHtmlを利用する方法
こちらは上記の例で挙げたような「こちら」という文言をリンクにする方法です。AndroidにはSpanというクラスがあります。HTMLを使ってホームページを作ったことがある方ならspanというタグを使うことも頻繁にあると思いますが、Androidでもこの概念を使ってテキストの一部を装飾することができます。こちらを使って外部リンクをつけます。
HtmlCompat.fromHtml
に、HTMLのテキストを渡すとWebページのようにテキストを表示してくれるSpannedを生成してくれるので、これを表示したいTextViewに設定してください。
val textView = findViewById(R.id.text_view)
val span = HtmlCompat.fromHtml("詳しい内容は<a href='url'>こちら</a>")
textView.setText(span)
textView.movementMethod = LinkMovementMethod()
実際に表示した時のイメージは以下です。こちらの部分がリンクになっていると思います。タップするとurlで指定したページに遷移します。
まとめ
今回はテキストの一部にだけリンクをつけたい時の実装方法について解説しました。実際に使うケースはかなり限定的になりますが、こういったポイントをおさえることで、アプリ全体の見栄えを良くしていければ嬉しいですね。
