From 2800143cd4547f4c9273251a18769283105337fa Mon Sep 17 00:00:00 2001 From: Ben Trengrove Date: Fri, 9 Feb 2024 06:42:57 +0800 Subject: [PATCH] Add new Compose text snippets (#210) * Add text snippets * Add linebreak snippets * Apply Spotless * Fix incorrect tags --- .../compose/snippets/text/TextSnippets.kt | 197 +++++++++++++++++- 1 file changed, 196 insertions(+), 1 deletion(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt index bfb8b837..dd5cf5a6 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt @@ -19,7 +19,16 @@ package com.example.compose.snippets.text import android.util.Log +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.background +import androidx.compose.foundation.basicMarquee +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.ClickableText @@ -27,6 +36,7 @@ import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.text.selection.DisableSelection import androidx.compose.foundation.text.selection.SelectionContainer import androidx.compose.material3.LocalTextStyle +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Text import androidx.compose.material3.TextField @@ -36,6 +46,7 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush @@ -55,10 +66,13 @@ import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.PasswordVisualTransformation +import androidx.compose.ui.text.style.Hyphens +import androidx.compose.ui.text.style.LineBreak import androidx.compose.ui.text.style.LineHeightStyle import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.withStyle +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.em import androidx.compose.ui.unit.sp @@ -577,7 +591,188 @@ private object TextEffectiveStateManagement2 { // [END android_compose_text_state_management] } -private val firaSansFamily = FontFamily() +@Composable +private fun TextSample(samples: MapUnit>) { + MaterialTheme { + Box( + Modifier + .background(MaterialTheme.colorScheme.background) + .fillMaxWidth() + ) { + Column( + verticalArrangement = Arrangement.spacedBy(10.dp), + modifier = Modifier.padding(10.dp) + ) { + samples.forEach { (title, content) -> + Row(Modifier.fillMaxWidth()) { + content() + Text( + text = title, + textAlign = TextAlign.Center, + style = MaterialTheme.typography.titleLarge, + modifier = Modifier + .fillMaxWidth() + .align(Alignment.CenterVertically) + ) + } + } + } + } + } +} + +private const val SAMPLE_LONG_TEXT = + "Jetpack Compose is Android’s modern toolkit for building native UI. " + + "It simplifies and accelerates UI development on Android bringing your apps " + + "to life with less code, powerful tools, and intuitive Kotlin APIs. " + + "It makes building Android UI faster and easier." +@Composable +@Preview +fun LineBreakSample() { + // [START android_compose_text_line_break] + TextSample( + samples = mapOf( + "Simple" to { + Text( + text = SAMPLE_LONG_TEXT, + modifier = Modifier + .width(130.dp) + .border(BorderStroke(1.dp, Color.Gray)), + fontSize = 14.sp, + style = TextStyle.Default.copy( + lineBreak = LineBreak.Simple + ) + ) + }, + "Paragraph" to { + Text( + text = SAMPLE_LONG_TEXT, + modifier = Modifier + .width(130.dp) + .border(BorderStroke(1.dp, Color.Gray)), + fontSize = 14.sp, + style = TextStyle.Default.copy( + lineBreak = LineBreak.Paragraph + ) + ) + } + ) + ) + // [END android_compose_text_line_break] +} + +@Preview +@Composable +fun SmallScreenTextSnippet() { + // [START android_compose_text_paragraph] + TextSample( + samples = mapOf( + "Balanced" to { + val smallScreenAdaptedParagraph = + LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced) + Text( + text = SAMPLE_LONG_TEXT, + modifier = Modifier + .width(200.dp) + .border(BorderStroke(1.dp, Color.Gray)), + fontSize = 14.sp, + style = TextStyle.Default.copy( + lineBreak = smallScreenAdaptedParagraph + ) + ) + }, + "Default" to { + Text( + text = SAMPLE_LONG_TEXT, + modifier = Modifier + .width(200.dp) + .border(BorderStroke(1.dp, Color.Gray)), + fontSize = 14.sp, + style = TextStyle.Default + ) + } + ) + ) + // [END android_compose_text_paragraph] +} + +private object CJKTextSnippet { + @Composable + fun CJKSample() { + // [START android_compose_text_cjk] + val customTitleLineBreak = LineBreak( + strategy = LineBreak.Strategy.HighQuality, + strictness = LineBreak.Strictness.Strict, + wordBreak = LineBreak.WordBreak.Phrase + ) + Text( + text = "あなたに寄り添う最先端のテクノロジー。", + modifier = Modifier.width(250.dp), + fontSize = 14.sp, + style = TextStyle.Default.copy( + lineBreak = customTitleLineBreak + ) + ) + // [END android_compose_text_cjk] + } +} + +@Preview +@Composable +fun HyphenateTextSnippet() { + // [START android_compose_text_hyphen] + TextSample( + samples = mapOf( + "Hyphens - None" to { + Text( + text = SAMPLE_LONG_TEXT, + modifier = Modifier + .width(130.dp) + .border(BorderStroke(1.dp, Color.Gray)), + fontSize = 14.sp, + style = TextStyle.Default.copy( + lineBreak = LineBreak.Paragraph, + hyphens = Hyphens.None + ) + ) + }, + "Hyphens - Auto" to { + Text( + text = SAMPLE_LONG_TEXT, + modifier = Modifier + .width(130.dp) + .border(BorderStroke(1.dp, Color.Gray)), + fontSize = 14.sp, + style = TextStyle.Default.copy( + lineBreak = LineBreak.Paragraph, + hyphens = Hyphens.Auto + ) + ) + } + ) + ) + // [END android_compose_text_hyphen] +} + +@Preview(showBackground = true) +// [START android_compose_text_marquee] +@OptIn(ExperimentalFoundationApi::class) +@Composable +fun BasicMarqueeSample() { + // Marquee only animates when the content doesn't fit in the max width. + Column(Modifier.width(400.dp)) { + Text( + "Learn about why it's great to use Jetpack Compose", + modifier = Modifier.basicMarquee(), + fontSize = 50.sp + ) + } +} +// [END android_compose_text_marquee] + +// Using null just sets the font family to default, which is easier than supplying +// the actual font file in the snippets repo. This fixes a build warning. +private val firaSansFamily = null val LightBlue = Color(0xFF0066FF) val Purple = Color(0xFF800080)