TextField theme in Compose

Slide 1

Slide 1 text

5FYU'JFMEUIFNFJO$PNQPTF 3ZP.BLJZBNBSNBLJZBNB 3BEJPUBML*OD .PCJMFษڧձ8BOUFEMZºνʔϜϥϘ

Slide 2

Slide 2 text

5FYU'JFMEDPMPSUIFNF JO$PNQPTF 3ZP.BLJZBNBSNBLJZBNB 3BEJPUBML*OD .PCJMFษڧձ8BOUFEMZºνʔϜϥϘ

Slide 3

Slide 3 text

w ຀ࢁྎ w 3BEJPUBMLגࣜձࣾ w "OESPJEΤϯδχΞ w!@SNBLJZBNB wSNBLJZBNB ࣗݾ঺հ

Slide 4

Slide 4 text

w ຀ࢁྎ w 3BEJPUBMLגࣜձࣾ w "OESPJEΤϯδχΞ w!@SNBLJZBNB wSNBLJZBNB ࣗݾ঺հ +FUQBDL$PNQPTFੵۃಋೖத🚀

Slide 5

Slide 5 text

5FYU'JFMEͷಋೖ w WͰ͸͍͔ͭ͘ෆ۩߹͕͋ͬͨ w #BDLTQBDFΩʔ௕ԡ͠Ͱจࣈ͕࿈ଓͰফ͑ͳ͍ w ςΩετબ୒࣌ͷڍಈ͕ෆ҆ఆ w WͰ͸ෆ۩߹͕ղফ͞Εͨ👏 w طଘσβΠϯʹ߹Θͤͯಋೖ։࢝

Slide 6

Slide 6 text

BOESPJEYDPNQPTFNBUFSJBM5FYU'JFMELU @Composable fun TextField( value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = LocalTextStyle.current, label: @Composable (() -> Unit)? = null, placeholder: @Composable (() -> Unit)? = null, leadingIcon: @Composable (() -> Unit)? = null, trailingIcon: @Composable (() -> Unit)? = null, isError: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions(), singleLine: Boolean = false, maxLines: Int = Int.MAX_VALUE, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, shape: Shape = MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize), colors: TextFieldColors = TextFieldDefaults.textFieldColors() ) {…}

Slide 7

Slide 7 text

Slide 8

Slide 8 text

BOESPJEYDPNQPTFNBUFSJBM5FYU'JFME%FGBVMUTLU @Stable interface TextFieldColors { @Composable fun textColor(enabled: Boolean): State @Composable fun backgroundColor(enabled: Boolean): State @Composable fun placeholderColor(enabled: Boolean): State @Composable fun labelColor(…): State @Composable fun leadingIconColor(enabled: Boolean, isError: Boolean): State @Composable fun trailingIconColor(enabled: Boolean, isError: Boolean): State @Composable fun indicatorColor(…): State @Composable fun cursorColor(isError: Boolean): State }

Slide 9

Slide 9 text

5FYU'JFMEͷ৭ͷछྨ ᶃ UFYU$PMPS ᶄ CBDLHSPVOE$PMPS ᶅ QMBDFIPMEFS$PMPS ᶆ MBCFM$PMPS ᶇ MFBEJOH*DPO$PMPS ᶈ USBJMJOH*DPO$PMPS ᶉ JOEJDBUPS$PMPS ᶊ DVSTPS$PMPS

Slide 10

Slide 10 text

5FYU'JFMEͷ৭ͷछྨ ᶃ UFYU$PMPS ᶄ CBDLHSPVOE$PMPS ᶅ QMBDFIPMEFS$PMPS ᶆ MBCFM$PMPS ᶇ MFBEJOH*DPO$PMPS ᶈ USBJMJOH*DPO$PMPS ᶉ JOEJDBUPS$PMPS ᶊ DVSTPS$PMPS ᶃUFYU$PMPS ᶄCBDLHSPVOE$PMPS ᶆMBCFM$PMPS ᶉJOEJDBUPS$PMPS ᶊDVSTPS$PMPS

Slide 11

Slide 11 text

5FYU'JFMEͷ৭ͷछྨ ᶃ UFYU$PMPS ᶄ CBDLHSPVOE$PMPS ᶅ QMBDFIPMEFS$PMPS ᶆ MBCFM$PMPS ᶇ MFBEJOH*DPO$PMPS ᶈ USBJMJOH*DPO$PMPS ᶉ JOEJDBUPS$PMPS ᶊ DVSTPS$PMPS ᶅQMBDFIPMEFS$PMPS

Slide 12

Slide 12 text

5FYU'JFMEͷ৭ͷछྨ ᶃ UFYU$PMPS ᶄ CBDLHSPVOE$PMPS ᶅ QMBDFIPMEFS$PMPS ᶆ MBCFM$PMPS ᶇ MFBEJOH*DPO$PMPS ᶈ USBJMJOH*DPO$PMPS ᶉ JOEJDBUPS$PMPS ᶊ DVSTPS$PMPS ᶇMFBEJOH*DPO$PMPS ᶈUSBJMJOH*DPO$PMPS

Slide 13

Slide 13 text

BOESPJEYDPNQPTFNBUFSJBM5FYU'JFMELU @Composable fun TextField( … colors: TextFieldColors = TextFieldDefaults.textFieldColors() ) {…}

Slide 14

Slide 14 text

BOESPJEYDPNQPTFNBUFSJBM5FYU'JFME%FGBVMUTLUUFYU'JFME$PMPST @Composable fun textFieldColors( textColor: Color = LocalContentColor.current.copy(LocalContentAlpha.current), disabledTextColor: Color = textColor.copy(ContentAlpha.disabled), backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = BackgroundOpacity), cursorColor: Color = MaterialTheme.colors.primary, errorCursorColor: Color = MaterialTheme.colors.error, focusedIndicatorColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high), unfocusedIndicatorColor: Color = MaterialTheme.colors.onSurface.copy(alpha = UnfocusedIndicatorLineOpacity), disabledIndicatorColor: Color = unfocusedIndicatorColor.copy(alpha = ContentAlpha.disabled), errorIndicatorColor: Color = MaterialTheme.colors.error, leadingIconColor: Color = MaterialTheme.colors.onSurface.copy(alpha = IconOpacity), disabledLeadingIconColor: Color = leadingIconColor.copy(alpha = ContentAlpha.disabled), errorLeadingIconColor: Color = leadingIconColor, trailingIconColor: Color = MaterialTheme.colors.onSurface.copy(alpha = IconOpacity), disabledTrailingIconColor: Color = trailingIconColor.copy(alpha = ContentAlpha.disabled), errorTrailingIconColor: Color = MaterialTheme.colors.error, focusedLabelColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high), unfocusedLabelColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium), disabledLabelColor: Color = unfocusedLabelColor.copy(ContentAlpha.disabled), errorLabelColor: Color = MaterialTheme.colors.error, placeholderColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium), disabledPlaceholderColor: Color = placeholderColor.copy(ContentAlpha.disabled) ): TextFieldColors = …

Slide 15

Slide 15 text

Slide 16

Slide 16 text

5FYU'JFME΁ͷ৭ࢦఆ TextField( value = value, onValueChange = onValueChange, colors = TextFieldDefaults.textFieldColors( textColor = Color.Yellow, disabledTextColor = Color.Magenta, ) ) &OBCMFE %JTBCMFE

Slide 17

Slide 17 text

΄΅Ϛελʔ🎉

Slide 18

Slide 18 text

ಥવͷ🕵ΫΠζλΠϜ

Slide 19

Slide 19 text

25FYU4UZMFDPMPS5FYU'JFME$PMPSTUFYU$PMPS TextField( value = value, onValueChange = onValueChange, textStyle = TextStyle(color = Color.Blue), colors = TextFieldDefaults.textFieldColors( textColor = Color.Yellow, disabledTextColor = Color.Magenta, ) ) 🤔

Slide 20

Slide 20 text

"5FYU4UZMFDPMPS5FYU'JFME$PMPSTUFYU$PMPS TextField( value = value, onValueChange = onValueChange, textStyle = TextStyle(color = Color.Blue), colors = TextFieldDefaults.textFieldColors( textColor = Color.Yellow, disabledTextColor = Color.Magenta, ) ) &OBCMFE %JTBCMFE

Slide 21

Slide 21 text

5FYU'JFME΁ͷઃఆ @Composable fun TextField( …, textStyle: TextStyle = LocalTextStyle.current, …, colors: TextFieldColors = TextFieldDefaults.textFieldColors() ) { // If color is not provided via the text style, use content color as a default val textColor = textStyle.color.takeOrElse { colors.textColor(enabled).value } … } BOESPJEYDPNQPTFNBUFSJBM5FYU'JFMELU

Slide 22

Slide 22 text

2DVSTPS$PMPSͷద༻ൣғ TextField( value = value, onValueChange = onValueChange, colors = TextFieldDefaults.textFieldColors( cursorColor = Color.Magenta, ) ) 🤔

Slide 23

Slide 23 text

"DVSTPS$PMPSͷద༻ൣғ TextField( value = value, onValueChange = onValueChange, colors = TextFieldDefaults.textFieldColors( cursorColor = Color.Magenta, ) )

Slide 24

Slide 24 text

"DVSTPS$PMPSͷద༻ൣғ TextField( value = value, onValueChange = onValueChange, colors = TextFieldDefaults.textFieldColors( cursorColor = Color.Magenta, ) ) 🤔

Slide 25

Slide 25 text

5FYU4FMFDUJPO$PMPSTͰఏڙ @Immutable class TextSelectionColors( val handleColor: Color, val backgroundColor: Color ) {…} val LocalTextSelectionColors = compositionLocalOf { DefaultTextSelectionColors } private val DefaultSelectionColor = Color(0xFF4286F4) @Stable private val DefaultTextSelectionColors = TextSelectionColors( handleColor = DefaultSelectionColor, backgroundColor = DefaultSelectionColor.copy(alpha = 0.4f) ) BOESPJEYDPNQPTFGPVOEBUJPOUFYUTFMFDUJPO5FYU4FMFDUJPO$PMPSTLU

Slide 26

Slide 26 text

5FYU4FMFDUJPO$PMPSTΛΧελϚΠζ val tsColors = remember { TextSelectionColors( handleColor = Color.Magenta, backgroundColor = Color.Green, ) } CompositionLocalProvider( LocalTextSelectionColors provides tsColors ) { TextField( value = value, onValueChange = onValueChange, ) }

Slide 27

Slide 27 text

·ͱΊ w 5FYU'JFMEͷ৭ࢦఆ͸   5FYU'JFME%FGBVMUTUFYU'JFME$PMPSTΛ࢖͓͏ w 5FYU4UZMFͷ৭Λࢦఆ͍ͯ͠Δ৔߹͸஫ҙ w 5FYU4FMFDUJPO$PMPST͸ผͰࢦఆͷඞཁ͋Γ w ྑ͍$PNQPTFϥΠϑΛ👋

Slide 28

Slide 28 text

"QQFOEJYFT w IUUQTEFWFMPQFSBOESPJEDPNKFUQBDLDPNQPTFUFYU IMKB w IUUQTEFWFMPQFSBOESPJEDPNKFUQBDLDPNQPTFUIFNFTDVTUPN IMKB@KQJNQMFNFOUJOHGVMMZ DVTUPN w IUUQTDTBOESPJEDPNBOESPJEYQMBUGPSNGSBNFXPSLTTVQQPSUBOESPJEYNBJODPNQPTF GPVOEBUJPOGPVOEBUJPOTSDDPNNPO.BJOLPUMJOBOESPJEYDPNQPTFGPVOEBUJPOUFYU $PSF5FYU'JFMELUM RDPSFUFYU fi F w IUUQTDTBOESPJEDPNBOESPJEYQMBUGPSNGSBNFXPSLTTVQQPSUBOESPJEYNBJODPNQPTF GPVOEBUJPOGPVOEBUJPOTSDBOESPJE.BJOLPUMJOBOESPJEYDPNQPTFGPVOEBUJPOUFYU "OESPJE$VSTPS)BOEMFBOESPJELUM R"OESPJE$VSTPS)BOEMFTR