Jetpack Compose는 Text
에서 세분화된 상호작용을 사용 설정합니다. 이제 여러 컴포저블 레이아웃에서 더 유연하게 텍스트를 선택할 수 있습니다. Text
컴포저블의 부분에 수정자를 추가할 수 없으므로 텍스트의 사용자 상호작용은 다른 컴포저블 레이아웃과 다릅니다. 이 페이지에서는
사용자 상호작용을 가능하게 합니다
텍스트 선택
기본적으로 컴포저블은 선택할 수 없습니다. 즉, 사용자는
앱에서 텍스트를 선택하고 복사합니다 텍스트 선택을 사용 설정하려면 줄바꿈
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
컴포저블의 일부를 클릭할 때 응답하여 맞춤 작업을 구성할 수도 있습니다. 다음 스니펫에서 사용자가
'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의 Material Design 2