Add new Compose text snippets (#210)

* Add text snippets * Add linebreak snippets * Apply Spotless * Fix incorrect tags
android · Feb 8, 2024 · 2800143 · 2800143
1 parent 9c71245
commit 2800143
Showing 1 changed file with 196 additions and 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
@@ -19,14 +19,24 @@
 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
 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: Map<String, @Composable ()->Unit>) {
+    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)