Reimagining text fields in Compose (dcSF 23)

The Compose Text team is completely rethinking the text field APIs from scratch. Come learn why, how we're approaching the process, and get a sneak peak at what the future might look like.

Watch the talk here: https://www.droidcon.com/2023/07/20/reimagining-text-fields-in-compose/

Transcript

1. Reimagining text fields in Compose Zach Klippenstein (he/him), Google
2. refresher: TextField var text by remember { mutableStateOf("") } TextField( text, onValueChange = { text = it } )
3. refresher: BasicTextField var text by remember { mutableStateOf("") } BasicTextField( text, onValueChange = { text = it } )
4. refresher: BasicTextField BasicTextField( text, onValueChange = { text = it } )
5. refresher: BasicTextField var text by remember { mutableStateOf("") }
6. It’s got some bugs…
7. Tech debt
8. State management class ViewModel { val text = MutableStateFlow("") fun onTextUpdated(text: String) { // suspending call if (validate(text)) { text.value = text } } }
9. State mismanagement
10. VisualTransformation/ OffsetMapping state: "s u p e r l a t i v e" ^ mapped: "s u p e r⎩c a l i f r a g i⎭l a t i v e" offset: 0 1 2 3 4 4 4 4 4 4 4 4 4 4 5 6 7 8 9 10 cursorOffset = 4 // ????
11. Back to first principles…
12. week T-42 Plan to plan scoping & estimates
13. week T-18 Project kick-off brainstorming
14. week T-6 User study early validation diverse backgrounds
15. What did we want to learn? fundamentals
16. Prioritize features bare minimum API ✓ State management ✓ Filtering ⨯ User gestures ⨯ Styled text …
17. Professional researcher Pool of participants – Guides plan & goals – Executes study – Single-point-of- contact – Collects recordings & surveys – Summarizes results –
18. Interviews 16 participants 1 hour opening 1 hour closing
19. Take-home project four tasks ~4 hours, total
20. Sign up! goo.gle/AndroidDevUX
21. week T-0 Today iterate
22. week T+? Sneak peek feedback welcome!
23. caveat: Under construction! BasicTextField v2 State Filtering Line limits Scrolling Passwords Visual transformations
24. BasicTextField v2 BasicTextField( text, onValueChanged = { text = it } ) becomes BasicTextField(state)
25. BasicTextField v2 var text by remember { mutableStateOf("") } becomes val state = rememberTextFieldState("")
26. Using text in composition var text by remember { mutableStateOf("") } … Text("Hello $text!") becomes val state = rememberTextFieldState("") … Text("Hello ${state.text}!")
27. State hoisting currently class ViewModel { var textState by mutableStateOf("") }
28. State hoisting currently class ViewModel { private val textFlow = MutableStateFlow("") val text: String @Composable get() = textFlow.collectAsState().value fun updateText(text: String) { textFlow.value = text } }
29. State hoisting …becomes class ViewModel { val textState = TextFieldState("") } @Composable fun Screen(viewModel: ViewModel) { TextField(viewModel.textState) }
30. Observing changes currently class ViewModel { private var textState by mutableStateOf("") suspend fun run() { snapshotFlow { textState } .collectLateset { processText(it) } } }
31. Observing changes currently class ViewModel { private val textFlow = MutableStateFlow("") suspend fun run() { textFlow.collectLatest { processText(it) } } }
32. Observing changes becomes class ViewModel { val textState = TextFieldState("") suspend fun run() { textState.textAsFlow() .collectLatest { processText(it) } // or textState.forEachTextValue { processText(it) } } }
33. Observing changes example: debouncing textState.textAsFlow() .debounce(500) .collectLatest { runSearch(it) } // or textState.forEachTextValue { delay(500) runSearch(it) }
34. Setting text class ViewModel { private val textFlow = MutableStateFlow("") fun prefill(text: String) { textFlow.value = prefill } } becomes class ViewModel { val textState = TextFieldState("") fun clearText(text: String) { textState.setTextAndPlaceCursorAtEnd(text) } }
35. Inserting/deleting text currently text = text .removeRange(2, 6) .replace(10, 10, "foo") // insert or text = buildString { append(text) deleteRange(2, 6) insert(10, "foo") }
36. Inserting/deleting text becomes textState.edit { delete(2, 6) insert(10, "foo") }
37. TextFieldState @Composable fun rememberTextFieldState( initialText: String = "", initialSelection: TextRange = … ): TextFieldState @Stable class TextFieldState( initialText: String = "", initialSelection: TextRange = … ) { val text: CharSequence val selection: TextRange fun edit(block: TextFieldBuffer.() -> Unit) }
38. TextFieldBuffer aka “StringBuilder with selection” class TextFieldBuffer: CharSequence, Appendable { val length: Int var selection: TextRange fun append(text: CharSequence?) fun replace(start: Int, end: Int, text: CharSequence) fun insert(index: Int, text: CharSequence) fun delete(start: Int, end: Int) fun replace(regex: Regex, text: CharSequence) // lots more to come… }
39. State Snapshot-backed (@Stable) Observe via snapshots or flows Edit via mutable buffer Hoistable
40. Filtering currently BasicTextField( text, onValueChange = { // Actually a _lot_ more complicated than this if (it.isDigitsOnly()) { text = it } } )
41. Filtering …becomes BasicTextField( text, filter = TextFieldFilter { newText -> // Actually a _lot_ more complicated than this newText.replace("""\D""".toRegex(), "") } )
42. Filtering …or factored out object DigitsOnly : TextFieldFilter { override fun filter(text: TextFieldBuffer) { // Still simplified, but now encapsulated text.replace("""\D""".toRegex(), "") } }
43. Filtering built-in BasicTextField( state, filter = DigitsOnly )
44. Filtering chaining BasicTextField( state, filter = DigitsOnly then maxChars(10) )
45. Filtering keyboard BasicTextField( state, filter = DigitsOnly, keyboardOptions = KeyboardOptions( keyboardType = Number ) )
46. Filtering keyboard object DigitsOnly : TextFieldFilter { override val keyboardOptions = KeyboardOptions( keyboardType = Number ) override fun filter(text: TextFieldBuffer) { … } }
47. Line limits no more nonsense BasicTextField( …, singleLine = true, minLines = 5 )
48. Line limits BasicTextField( …, singleLine = true ) becomes BasicTextField( …, lineLimits = SingleLine )
49. Line limits BasicTextField( …, singleLine = false, maxLines = 10 ) becomes BasicTextField( …, lineLimits = MultiLine(maxHeightInLines = 10) )
50. Line limits SingleLine MultiLine(min, max) Never wraps – No newlines – Fixed height – Horizontal scrolling – Wraps long lines – Newlines allowed – Height shrinks and grows – Vertical scrolling –
51. ScrollState val state = rememberTextFieldState("") val scrollState = rememberScrollState() BasicTextField( state, scrollState = scrollState ) LaunchedEffect(scrollState) { scrollState.scrollTo(…) } Horizontal in SingleLine mode – Vertical in MultiLine mode –
52. BasicSecureTextField currently BasicTextField( password, onValueChange = { password = it }, visualTransformation = PasswordVisualTransformation(), )
53. BasicSecureTextField currently BasicTextField( password, onValueChange = { password = it }, visualTransformation = PasswordVisualTransformation(), modifier = Modifier.semantics { password() }, keyboardOptions = KeyboardOptions( keyboardType = Password ) )
54. BasicSecureTextField …becomes BasicSecureTextField(state) Obfuscated text (customizable) – No cut/copy/drag (paste allowed) – IME password mode – Autofill support –
55. Visual transformations TODO…
56. Visual transformations CodepointTransformation – 1:1 object PasswordTransformation : CodepointTransformation { override fun transform( codepointIndex: Int, codepoint: Int ): Int = if (showCharAt(codepointIndex)) { codepoint } else { '•'.toCodepoint() } }
57. Visual transformations ????? – n:m, m > 1 object FancyTransformation : ?????Transformation { override fun ?????.transform(text: CharSequence) { // text.insertVisualText(4, "…") } } ?????
58. Recap BasicTextField v2 TextFieldState + TextFieldBuffer Filtering LineLimits ScrollState BasicSecureTextField Visual transformations…???
59. One more thing…
61. Recap Right now: lots of bugs Redesign: Super experimental Available in 1.6.x alphas User studies are great! goo.gle/AndroidDevUX
62. Contact Kotlin Slack: # Socials: compose issuetracker.google.com – androiddev.social/@zachklipp – twitter.com/@halilozercan Slides bit.ly/3qyRmhZ