Skip to content

Commit 2800143

Browse files
bentrengrovebentrengrove
authored
Add new Compose text snippets (#210)
* Add text snippets * Add linebreak snippets * Apply Spotless * Fix incorrect tags
1 parent 9c71245 commit 2800143

File tree

1 file changed

+196
-1
lines changed
  • compose/snippets/src/main/java/com/example/compose/snippets/text

1 file changed

+196
-1
lines changed

‎compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt

+196-1
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,24 @@
1919
package com.example.compose.snippets.text
2020

2121
import android.util.Log
22+
import androidx.compose.foundation.BorderStroke
23+
import androidx.compose.foundation.ExperimentalFoundationApi
24+
import androidx.compose.foundation.background
25+
import androidx.compose.foundation.basicMarquee
26+
import androidx.compose.foundation.border
27+
import androidx.compose.foundation.layout.Arrangement
28+
import androidx.compose.foundation.layout.Box
2229
import androidx.compose.foundation.layout.Column
30+
import androidx.compose.foundation.layout.Row
31+
import androidx.compose.foundation.layout.fillMaxWidth
2332
import androidx.compose.foundation.layout.padding
2433
import androidx.compose.foundation.layout.width
2534
import androidx.compose.foundation.text.ClickableText
2635
import androidx.compose.foundation.text.KeyboardOptions
2736
import androidx.compose.foundation.text.selection.DisableSelection
2837
import androidx.compose.foundation.text.selection.SelectionContainer
2938
import androidx.compose.material3.LocalTextStyle
39+
import androidx.compose.material3.MaterialTheme
3040
import androidx.compose.material3.OutlinedTextField
3141
import androidx.compose.material3.Text
3242
import androidx.compose.material3.TextField
@@ -36,6 +46,7 @@ import androidx.compose.runtime.mutableStateOf
3646
import androidx.compose.runtime.remember
3747
import androidx.compose.runtime.saveable.rememberSaveable
3848
import androidx.compose.runtime.setValue
49+
import androidx.compose.ui.Alignment
3950
import androidx.compose.ui.Modifier
4051
import androidx.compose.ui.geometry.Offset
4152
import androidx.compose.ui.graphics.Brush
@@ -55,10 +66,13 @@ import androidx.compose.ui.text.font.FontStyle
5566
import androidx.compose.ui.text.font.FontWeight
5667
import androidx.compose.ui.text.input.KeyboardType
5768
import androidx.compose.ui.text.input.PasswordVisualTransformation
69+
import androidx.compose.ui.text.style.Hyphens
70+
import androidx.compose.ui.text.style.LineBreak
5871
import androidx.compose.ui.text.style.LineHeightStyle
5972
import androidx.compose.ui.text.style.TextAlign
6073
import androidx.compose.ui.text.style.TextOverflow
6174
import androidx.compose.ui.text.withStyle
75+
import androidx.compose.ui.tooling.preview.Preview
6276
import androidx.compose.ui.unit.dp
6377
import androidx.compose.ui.unit.em
6478
import androidx.compose.ui.unit.sp
@@ -577,7 +591,188 @@ private object TextEffectiveStateManagement2 {
577591
// [END android_compose_text_state_management]
578592
}
579593

580-
private val firaSansFamily = FontFamily()
594+
@Composable
595+
private fun TextSample(samples: Map<String, @Composable ()->Unit>) {
596+
MaterialTheme {
597+
Box(
598+
Modifier
599+
.background(MaterialTheme.colorScheme.background)
600+
.fillMaxWidth()
601+
) {
602+
Column(
603+
verticalArrangement = Arrangement.spacedBy(10.dp),
604+
modifier = Modifier.padding(10.dp)
605+
) {
606+
samples.forEach { (title, content) ->
607+
Row(Modifier.fillMaxWidth()) {
608+
content()
609+
Text(
610+
text = title,
611+
textAlign = TextAlign.Center,
612+
style = MaterialTheme.typography.titleLarge,
613+
modifier = Modifier
614+
.fillMaxWidth()
615+
.align(Alignment.CenterVertically)
616+
)
617+
}
618+
}
619+
}
620+
}
621+
}
622+
}
623+
624+
private const val SAMPLE_LONG_TEXT =
625+
"Jetpack Compose is Android’s modern toolkit for building native UI. " +
626+
"It simplifies and accelerates UI development on Android bringing your apps " +
627+
"to life with less code, powerful tools, and intuitive Kotlin APIs. " +
628+
"It makes building Android UI faster and easier."
629+
@Composable
630+
@Preview
631+
fun LineBreakSample() {
632+
// [START android_compose_text_line_break]
633+
TextSample(
634+
samples = mapOf(
635+
"Simple" to {
636+
Text(
637+
text = SAMPLE_LONG_TEXT,
638+
modifier = Modifier
639+
.width(130.dp)
640+
.border(BorderStroke(1.dp, Color.Gray)),
641+
fontSize = 14.sp,
642+
style = TextStyle.Default.copy(
643+
lineBreak = LineBreak.Simple
644+
)
645+
)
646+
},
647+
"Paragraph" to {
648+
Text(
649+
text = SAMPLE_LONG_TEXT,
650+
modifier = Modifier
651+
.width(130.dp)
652+
.border(BorderStroke(1.dp, Color.Gray)),
653+
fontSize = 14.sp,
654+
style = TextStyle.Default.copy(
655+
lineBreak = LineBreak.Paragraph
656+
)
657+
)
658+
}
659+
)
660+
)
661+
// [END android_compose_text_line_break]
662+
}
663+
664+
@Preview
665+
@Composable
666+
fun SmallScreenTextSnippet() {
667+
// [START android_compose_text_paragraph]
668+
TextSample(
669+
samples = mapOf(
670+
"Balanced" to {
671+
val smallScreenAdaptedParagraph =
672+
LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced)
673+
Text(
674+
text = SAMPLE_LONG_TEXT,
675+
modifier = Modifier
676+
.width(200.dp)
677+
.border(BorderStroke(1.dp, Color.Gray)),
678+
fontSize = 14.sp,
679+
style = TextStyle.Default.copy(
680+
lineBreak = smallScreenAdaptedParagraph
681+
)
682+
)
683+
},
684+
"Default" to {
685+
Text(
686+
text = SAMPLE_LONG_TEXT,
687+
modifier = Modifier
688+
.width(200.dp)
689+
.border(BorderStroke(1.dp, Color.Gray)),
690+
fontSize = 14.sp,
691+
style = TextStyle.Default
692+
)
693+
}
694+
)
695+
)
696+
// [END android_compose_text_paragraph]
697+
}
698+
699+
private object CJKTextSnippet {
700+
@Composable
701+
fun CJKSample() {
702+
// [START android_compose_text_cjk]
703+
val customTitleLineBreak = LineBreak(
704+
strategy = LineBreak.Strategy.HighQuality,
705+
strictness = LineBreak.Strictness.Strict,
706+
wordBreak = LineBreak.WordBreak.Phrase
707+
)
708+
Text(
709+
text = "あなたに寄り添う最先端のテクノロジー。",
710+
modifier = Modifier.width(250.dp),
711+
fontSize = 14.sp,
712+
style = TextStyle.Default.copy(
713+
lineBreak = customTitleLineBreak
714+
)
715+
)
716+
// [END android_compose_text_cjk]
717+
}
718+
}
719+
720+
@Preview
721+
@Composable
722+
fun HyphenateTextSnippet() {
723+
// [START android_compose_text_hyphen]
724+
TextSample(
725+
samples = mapOf(
726+
"Hyphens - None" to {
727+
Text(
728+
text = SAMPLE_LONG_TEXT,
729+
modifier = Modifier
730+
.width(130.dp)
731+
.border(BorderStroke(1.dp, Color.Gray)),
732+
fontSize = 14.sp,
733+
style = TextStyle.Default.copy(
734+
lineBreak = LineBreak.Paragraph,
735+
hyphens = Hyphens.None
736+
)
737+
)
738+
},
739+
"Hyphens - Auto" to {
740+
Text(
741+
text = SAMPLE_LONG_TEXT,
742+
modifier = Modifier
743+
.width(130.dp)
744+
.border(BorderStroke(1.dp, Color.Gray)),
745+
fontSize = 14.sp,
746+
style = TextStyle.Default.copy(
747+
lineBreak = LineBreak.Paragraph,
748+
hyphens = Hyphens.Auto
749+
)
750+
)
751+
}
752+
)
753+
)
754+
// [END android_compose_text_hyphen]
755+
}
756+
757+
@Preview(showBackground = true)
758+
// [START android_compose_text_marquee]
759+
@OptIn(ExperimentalFoundationApi::class)
760+
@Composable
761+
fun BasicMarqueeSample() {
762+
// Marquee only animates when the content doesn't fit in the max width.
763+
Column(Modifier.width(400.dp)) {
764+
Text(
765+
"Learn about why it's great to use Jetpack Compose",
766+
modifier = Modifier.basicMarquee(),
767+
fontSize = 50.sp
768+
)
769+
}
770+
}
771+
// [END android_compose_text_marquee]
772+
773+
// Using null just sets the font family to default, which is easier than supplying
774+
// the actual font file in the snippets repo. This fixes a build warning.
775+
private val firaSansFamily = null
581776

582777
val LightBlue = Color(0xFF0066FF)
583778
val Purple = Color(0xFF800080)

0 commit comments

Comments
 (0)