Jetpack Compose により、Text
でのきめ細かい操作が可能となり、テキストをコンポーザブル レイアウト全体でより柔軟に選択できるようになりました。テキストでのユーザー操作では、他のコンポーザブル レイアウトとは異なり、Text
コンポーザブルの一部に修飾子を追加することができません。このページでは、主な API について説明します。
構築できます
テキストを選択
コンポーザブルはデフォルトでは選択不可であるため、ユーザーがアプリからテキストを選択してコピーすることはできません。テキストの選択を有効にするには、テキスト要素を SelectionContainer
コンポーザブルでラップします。
@Composable fun SelectableText() { SelectionContainer { Text("This text is selectable") } }
選択可能な領域の特定の部分で選択を無効にすることもできます。それには、選択不可にする部分を DisableSelection
コンポーザブルでラップする必要があります。
@Composable fun PartiallySelectableText() { SelectionContainer { Column { Text("This text is selectable") Text("This one too") Text("This one as well") DisableSelection { Text("But not this one") Text("Neither this one") } Text("But again, you can select this one") Text("And this one too") } } }
LinkAnnotation
でクリック可能なテキストのセクションを作成する
Text
のクリックをリッスンするには、clickable
修飾子を追加します。ただし、ページの特定の部分に追加情報を
Text
値。たとえば、特定の単語に付けられた URL を
できます。このような場合は、LinkAnnotation
を使用する必要があります。これは、
テキストのクリック可能な部分を表すアノテーション。
LinkAnnotation
を使用すると、Text
コンポーザブルの一部に URL をアタッチできます。
クリックすると自動的に開きます。以下のスニペットをご覧ください。
@Composable fun AnnotatedStringWithLinkSample() { // Display a link in the text Text( buildAnnotatedString { append("Build better apps faster with ") withLink( LinkAnnotation.Url( "https://developer.android.com/jetpack/compose", TextLinkStyles(style = SpanStyle(color = Color.Blue)) ) ) { append("Jetpack Compose") } } ) }
また、スペースの一部分をユーザーがクリックしたときの
Text
コンポーザブル。次のスニペットでは、ユーザーが Google Chat の
「Jetpack Compose」というリンクが表示され、ユーザーが
次のリンクをクリックします。
@Composable fun AnnotatedStringWithListenerSample() { // Display a link in the text and log metrics whenever user clicks on it. In that case we handle // the link using openUri method of the LocalUriHandler val uriHandler = LocalUriHandler.current Text( buildAnnotatedString { append("Build better apps faster with ") val link = LinkAnnotation.Url( "https://developer.android.com/jetpack/compose", TextLinkStyles(SpanStyle(color = Color.Blue)) ) { val url = (it as LinkAnnotation.Url).url // log some metrics uriHandler.openUri(url) } withLink(link) { append("Jetpack Compose") } } ) }
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- Compose のセマンティクス
- Compose のユーザー補助
- Compose のマテリアル デザイン 2