$30 off During Our Annual Pro Sale. View Details »

Material3 with Jetpack Compose

Yuki Anzai
October 05, 2022

Material3 with Jetpack Compose

Yuki Anzai

October 05, 2022
Tweet

More Decks by Yuki Anzai

Other Decks in Technology

Transcript

  1. :VLJ"O[BJ !ZBO[N  %SPJE,BJHJ +FUQBDL$PNQPTFͰ .BUFSJBM

  2. :VLJ"O[BJ w (PPHMF%FWFMPQFS&YQFSUGPS"OESPJE w UXJUUFS!ZBO[N w CMPHZBO[NCMPHTQPUDPN w גࣜձࣾ΢ϑΟΧ

  3. .BUFSJBM%FTJHOͱ͸

  4. .BUFSJBM%FTJHOͱ͸ w 6*ઃܭͷϕετϓϥΫςΟεΛαϙʔτ͢ΔΨΠυϥΠϯɺίϯϙʔωϯ τɺ͓Αͼπʔϧ܈ .BUFSJBM%FTJHO . ೥ʙ .BUFSJBM%FTJHO . ೥ʙ

    .BUFSJBM5IFNJOHͱ.BUFSJBM $PNQPOFOUTͷίʔυ͕௥Ճ͞Εͨ .BUFSJBM%FTJHO . ೥ʙ EZOBNJDDPMPSͷΑ͏ͳ.BUFSJBM :PVͷػೳ͕௥Ճ͞Εͨ
  5. .ͷ໰୊఺ w 5ZQPHSBQIZ w ໊લ͔Β࢖༻Օॴ͕૝૾͠ʹ͍͘ w ྫʣ"MFSU%JBMPHͷλΠτϧ͸TVCUJUMF w $PMPS w

    QSJNBSZ4VSGBDFͷΑ͏ͳத్൒୺ͳఆ͕ٛ૿͖͑ͯͨ w ৭ΛબͿͷ͕೉͍͠ʢTFDPOEBSZɺEBSLUIFNF༻ʣ w EZOBNJDDPMPSରԠͰ͖ͳ͍ʢDPOUSBTUΛอূͰ͖ͳ͍ʣ
  6. .BUFSJBMͰมΘͬͨ͜ͱ

  7. %FTJHO5PLFOT

  8. %FTJHO5PLFOTͬͯͳʹʁ w σβΠϯͷ஋ʹ໊લΛ͚ͭͯఆٛͨ͠΋ͷσβΠϯͷ஋Λอ࣋͢Δม਺ w σβΠϯɺίʔυɺπʔϧɺϓϥοτϑΥʔϜશମͰ%FTJHO5PLFOΛ࢖͏ w ϓϥοτϑΥʔϜʹґΒͳ͍ܗࣜ w Ұ؏ͯ͠ద༻Ͱ͖Δ w

    ಉ͡%FTJHO5PLFOΛࢀর͍ͯ͠Δͱ͜Ζ͸ಉ͡஋ʹͳΔ
  9. %FTJHO5PLFOTͷ໊લ w "σβΠϯγεςϜ໊ w #%FTJHO5PLFOͷछྨ w $τʔΫϯͷ໾ׂΛ఻͑Δ ͨΊͷΘ͔Γ΍໊͍͢લ w ۠੾Γ

    w ࠨˠӈҰൠతͳ৘ใˠ۩ମతͳ৘ใ
  10. %FTJHO5PLFOTͷछྨ w 3FGFSFODF5PLFO w 4ZTUFN5PLFO w $PNQPOFOU5PLFO

  11. 3FGFSFODF5PLFO w ؔ࿈͢ΔσβΠϯͷ஋Λ࣋ͭ w NESFG w DPOUFYUTʹΑͬͯมΘΒͳ͍ w DPOUFYUͷྫʣEFWJDFGPSN GBDUPST

    EBSLUIFNF EQJ
  12. 4ZTUFN5PLFO w σβΠϯγεςϜͰͷ໾ׂ ʢ3PMFʣʹରԠ͢ΔUPLFO w NETZT w DPOUFYUTʹԠͯ͡ҟͳΔ 3FGFSFODF5PLFOΛࢦ͢

  13. DPOUFYUTʹԠͨ͡UPLFO w MJHIUͰ΋EBSLͰ΋ը໘ͷഎܠ͸ಉ͡4ZTUFN5PLFOΛࢦ͢ w MJHIU͔EBSLʹԠͯ͡4ZTUFN5PLFO͕ࢦ͢3FGFSFODF5PLFO͕มΘΔ

  14. $PNQPOFOU5PLFO w DPNQPOFOU಺ͷཁૉͷଐੑʹର Ԡ͢ΔUPLFO w ྫʣ'"#ʢDPNQPOFOUʣͷ $POUBJOFSʢཁૉʣͷ৭ʢଐ ੑʣ w NEDPNQ

  15. %FTJHO5PLFOTҰཡ

  16. TIBQFͷ%FTJHO5PLFOT w IUUQTNNBUFSJBMJPTUZMFTTIBQFTIBQFTDBMFUPLFOTGCB CFBCDGDD ff GF

  17. UZQPHSBQIZͷ%FTJHO5PLFOT w IUUQTNNBUFSJBMJPTUZMFTUZQPHSBQIZUZQFTDBMF UPLFOTECDBDEDCBGE

  18. DPMPSͷ%FTJHO5PLFOT w IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFN UPLFOTGEFEGCBC ff 

  19. $PNQPOFOU͕ࢀর͢ΔσϑΥϧτ%FTJHOUPLFOT w ֤DPNQPOFOUͷΨΠυϥΠϯͷ4QFDTηΫγϣϯ w ྫʣ'"#IUUQTNNBUFSJBMJPDPNQPOFOUT fl PBUJOHBDUJPOCVUUPO TQFDT

  20. 3PMF

  21. 3PMF w %FTJHO4ZTUFN಺ͷ%FTJHO5PLFOͷ໨తΛදݱ͢Δ୹͍χοΫωʔϜ w 4ZTUFN5PLFO͸3PMFʹରԠʣNETZT<3PMFͷछྨ><3PMF໊> w ྫʣ$PMPS3PMFͷ1SJNBSZNETZTDPMPSQSJNBSZ

  22. 3PMFͷछྨ w $PMPS3PMFT w 5ZQPHSBQIZʢ5ZQF4DBMFʣ3PMFT w 4IBQF3PMFT

  23. 4IBQF

  24. .ͷ4IBQFTUZMF w .͸DPNQPOFOUͷେ͖͞ʹΑΔάϧʔϓ w -BSHF .FEJVN 4NBMM w .͸TIBQFͷTDBMFʢؙ֯ͷେ͖͞ͳͲʣ ʹԠͨ͡ஈ֊

    w /POF &YUSBTNBMM 4NBMM .FEJVN  -BSHF &YUSBMBSHF 'VMM
  25. IUUQTNNBUFSJBMJPTUZMFTTIBQFTIBQFTDBMFUPLFOTGCBCFBCDGDD ff GF 3PMF WBMVF /POF EQ 3FDUBOHMF &YUSB4NBMM EQ

    3PVOE$PSOFS 5PQ EQ EQ EQ EQ 3PVOE$PSOFS 4NBMM EQ 3PVOE$PSOFS .FEJVN EQ 3PVOE$PSOFS -BSHF EQ 3PVOE$PSOFS &OE EQ EQ EQ EQ 3PVOE$PSOFS 5PQ EQ EQ EQ EQ 3PVOE$PSOFS &YUSB-BSHF EQ 3PVOE$PSOFS 5PQ EQ EQ EQ EQ 3PVOE$PSOFS 'VMM  $JSDMF
  26. 3PMF ࢖༻Օॴ /POF EQ #BOOFST #PUUPNBQQCBST 'VMMTDSFFOEJBMPHT -JTUT  /BWJHBUJPOCBST

    /BWJHBUJPOSBJMT 1SPHSFTTJOEJDBUPST  4FBSDIWJFX GVMMTDSFFO 4JEFTIFFUT EPDLFE 5BCT 5PQBQQCBST &YUSB4NBMM EQ "VUPDPNQMFUFNFOV 4FMFDUNFOV 4OBDLCBST 4UBOEBSENFOV 5FYU fi FMET 4NBMM EQ $IJQT 3JDIUPPMUJQ .FEJVN EQ $BSET 4NBMM'"#T -BSHF EQ &YUFOEFE'"#T '"#T /BWJHBUJPOESBXFST &YUSB-BSHF EQ #PUUPNTIFFUT EPDLFE %JBMPHT 'MPBUJOHTIFFUT -BSHF'"#T  4FBSDIWJFX EPDLFE 5JNFQJDLFS 5JNFJOQVU 'VMM  #BEHF #VUUPOT *DPOCVUUPOT 4MJEFST 4XJUDIFT 4FBSDICBS IUUQTNNBUFSJBMJPTUZMFTTIBQFTIBQFTDBMFUPLFOTCGCGDFBEFBGBEED
  27. 5ZQPHSBQIZ

  28. .ͷUZQPHSBQIZ w ͭͷ3PMF w %JTQMBZ w )FBEMJOF w 5JUMF w

    #PEZ w -BCFM w 3PMF͝ͱʹͭͷTDBMF w -BSHF w .FEJVN w 4NBMM
  29. 3PMF 4DBMF MJOFIFJHIU GPOUTJ[F USBDLJOH XFJHIU %JTQMBZ -BSHF  

      .FEJVN     4NBMM     )FBEMJOF -BSHF     .FEJVN     4NBMM     5JUMF -BSHF     .FEJVN     4NBMM     #PEZ -BSHF     .FEJVN     4NBMM     -BCFM -BSHF     .FEJVN     4NBMM     ˎBOESPJEYDPNQPTFNBUFSJBMNBUFSJBMͰఆٛ͞Ε͍ͯΔ஋ɻҰ෦IUUQTNNBUFSJBMJPTUZMFTUZQPHSBQIZUZQFTDBMFUPLFOTͱҟͳΔɻ
  30. 3PMF 4DBMF ࢖༻Օॴ %JTQMBZ ͳ͠ )FBEMJOF -BSHF ͳ͠ .FEJVN -BSHF5PQ"QQ#BSͷUJUMF

    4NBMM "MFSU%JBMPHͷUJUMF  .FEJVN5PQ"QQ#BSͷUJUMF 5JUMF -BSHF 5PQ"QQ#BSͷUJUMF  $FOUFS"MJHOFE5PQ"QQ#BSͷUJUMF  .FEJVN5PQ"QQ#BSͷখ͘͞ͳͬͨͱ͖ͷUJUMF  -BSHF5PQ"QQ#BSͷখ͘͞ͳͬͨͱ͖ͷUJUMF .FEJVN ͳ͠ 4NBMM 5BCͷUFYU
  31. 3PMF 4DBMF ࢖༻Օॴ #PEZ -BSHF -JTU*UFNͷIFBEMJOF5FYU  5FYU'JFMEͷMBCFMʢେ͖͍ͱ͖ʣͱQMBDFIPMEFS .FEJVN -JTU*UFNͷTVQQPSUJOH5FYU

     "MFSU%JBMPHͷUFYU  4OBDLCBSͷUFYU 4NBMM 5FYU'JFMEͷMBCFMʢখ͍͞ͱ͖ʣ -BCFM -BSHF #VUUPOͷUFYU 'MPBUJOH"DUJPO#VUUPOͷUFYU "MFSU%JBMPHͷCVUUPOUFYU  $IJQͷMBCFM %SPQ%PXO.FOV*UFNͷUFYU  4OBDLCBSͷBDUJPO .FEJVN /BWJHBUJPO3BJMͷMBCFM  /BWJHBUJPO#BSͷMBCFM 4NBMM -JTU*UFNͷPWFSMJOF5FYUͱUSBJMJOH$POUFOU  #BEHFͷUFYU
  32. $PMPS

  33. .ͷDPMPS w .DPMPSಛఆͷ৭ͷ૊Έ߹Θͤ w .DPMPSDPMPSTDIFNFಛఆͷ৭ͷUPOBMQBMFUUFͷ૊Έ߹Θͤ

  34. ,FZDPMPST w ͭͷLFZDPMPS

  35. ,FZDPMPST w ͭͷLFZDPMPS .ͷQSJNBSZ .ͷTFDPOEBSZ .ͷ QSJNBSZ7BSJBOU OFX OFX

  36. UPOBMQBMFUUF w ৭૬ͱ࠼౓͕ಉ͡Ͱɺ ໌౓͕ҟͳΔछྨ ͷΧϥʔόϦΤʔγϣϯ w ໌౓#MBDL w ໌౓8IJUF

  37. LFZDPMPSͷUPOBMQBMFUUF IUUQTNNBUFSJBMJPUIFNFCVJMEFSDVTUPN

  38. UPOBMQBMFUUF͔Β3PMFT΁ͷׂΓ౰ͯ w 1SJNBSZ,FZDPMPSͷUPOBMQBMFUUFˠ1SJNBSZͷ$PMPS3PMFT΁ׂΓ౰ͯ 1SJNBSZ 0O1SJNBSZ 1SJNBSZ$POUBJOFS 0O1SJNBSZ$POUBJOFS

  39. BDDFOUSPMFT

  40. OFVUSBMSPMFT

  41. FSSPSSPMFT w &SSPS 0O&SSPS &SSPS$POUBJOFS 0O&SSPS$POUBJOFS

  42. $PMPS3PMFT BDDFOU SPMFT QSJNBSZSPMFT 1SJNBSZ 0O1SJNBSZ 1SJNBSZ $POUBJOFS 0O1SJNBSZ $POUBJOFS

    TFDPOEBSZSPMFT 4FDPOEBSZ 0O4FDPOEBSZ 4FDPOEBSZ $POUBJOFS 0O4FDPOEBSZ $POUBJOFS UFSUJBSZSPMFT 5FSUJBSZ 0O5FSUJBSZ 5FSUJBSZ $POUBJOFS 0O5FSUJBSZ $POUBJOFS OFVUSBM SPMFT #BDLHSPVOE 0O#BDLHSPVOE 4VSGBDF 0O4VSGBDF 4VSGBDF7BSJBOU 0O4VSGBDF 7BSJBOU 0VUMJOF 0VUMJOF7BSJBOU FSSPS SPMFT &SSPS 0O&SSPS &SSPS$POUBJOFS 0O&SSPS $POUBJOFS
  43. ͦͷଞͷ$PMPS3PMFT w *OWFSTF1SJNBSZ1SJNBSZ MJHIU 1SJNBSZ EBSL  w *OWFSTF4VSGBDF/FVUSBM MJHIU

    /FVUSBM EBSL  w *OWFSTF0O4VSGBDF/FVUSBM MJHIU /FVUSBM EBSL  w 4VSGBDF5JOU1SJNBSZ1SJNBSZ MJHIU 1SJNBSZ EBSL  w 4DSJN/FVUSBM IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFNUPLFOTʹ͸TIBEPX΋͋Γ·͕͢ MJCSBSZʹ͸ఆٛ͞Ε͍ͯ·ͤΜ
  44. DVTUPNDPMPS

  45. .BUFSJBMGPSDPNQPTF

  46. DPNQPTFNBUFSJBMMJCSBSZ androidx.compose.material3:material3:1.0.0-beta03

  47. import androidx.compose.material3.* @Composable fun MyAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), dynamicColor:

    Boolean = true, content: @Composable () -> Unit ) { val colorScheme = if (dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) { val context = LocalContext.current if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) } else { if (darkTheme) DarkColorScheme else LightColorScheme } MaterialTheme( colorScheme = colorScheme, typography = Typography, shapes = Shapes, content = content ) }
  48. import androidx.compose.material3.* @Composable fun MyAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), dynamicColor:

    Boolean = true, content: @Composable () -> Unit ) { val colorScheme = if (dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) { val context = LocalContext.current if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) } else { if (darkTheme) DarkColorScheme else LightColorScheme } MaterialTheme( colorScheme = colorScheme, typography = Typography, shapes = Shapes, content = content ) }
  49. %BZdBU$BSET import androidx.compose.material3.* @Composable fun MyAppTheme( darkTheme: Boolean = isSystemInDarkTheme(),

    dynamicColor: Boolean = true, content: @Composable () -> Unit ) { val colorScheme = if (dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) { val context = LocalContext.current if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) } else { if (darkTheme) DarkColorScheme else LightColorScheme } MaterialTheme( colorScheme = colorScheme, typography = Typography, shapes = Shapes, content = content ) }
  50. 4IBQF

  51. 4IBQFT @Immutable class Shapes( // Shapes None and Full are

    omitted as None is a RectangleShape and Full is a CircleShape. val extraSmall: CornerBasedShape = ShapeDefaults.ExtraSmall, val small: CornerBasedShape = ShapeDefaults.Small, val medium: CornerBasedShape = ShapeDefaults.Medium, val large: CornerBasedShape = ShapeDefaults.Large, val extraLarge: CornerBasedShape = ShapeDefaults.ExtraLarge, ) {
  52. 4IBQFT @Immutable class Shapes( // Shapes None and Full are

    omitted as None is a RectangleShape and Full is a CircleShape. val extraSmall: CornerBasedShape = ShapeDefaults.ExtraSmall, val small: CornerBasedShape = ShapeDefaults.Small, val medium: CornerBasedShape = ShapeDefaults.Medium, val large: CornerBasedShape = ShapeDefaults.Large, val extraLarge: CornerBasedShape = ShapeDefaults.ExtraLarge, ) { object ShapeDefaults { /** Extra small sized corner shape */ val ExtraSmall: CornerBasedShape = ShapeTokens.CornerExtraSmall /** Small sized corner shape */ val Small: CornerBasedShape = ShapeTokens.CornerSmall … }
  53. 4IBQF4ZTUFN5PLFOͷ࣮૷ internal object ShapeTokens { … val CornerExtraSmall = RoundedCornerShape(4.0.dp)

    val CornerExtraSmallTop = RoundedCornerShape( topStart = 4.0.dp, topEnd = 4.0.dp, bottomEnd = 0.0.dp, bottomStart = 0.0.dp ) … val CornerNone = RectangleShape val CornerSmall = RoundedCornerShape(8.0.dp) }
  54. 5ZQPHSBQIZ

  55. 5ZQPHSBQIZ @Immutable class Typography( val displayLarge: TextStyle = TypographyTokens.DisplayLarge, val

    displayMedium: TextStyle = TypographyTokens.DisplayMedium, val displaySmall: TextStyle = TypographyTokens.DisplaySmall, val headlineLarge: TextStyle = TypographyTokens.HeadlineLarge, val headlineMedium: TextStyle = TypographyTokens.HeadlineMedium, val headlineSmall: TextStyle = TypographyTokens.HeadlineSmall, val titleLarge: TextStyle = TypographyTokens.TitleLarge, val titleMedium: TextStyle = TypographyTokens.TitleMedium, val titleSmall: TextStyle = TypographyTokens.TitleSmall, val bodyLarge: TextStyle = TypographyTokens.BodyLarge, val bodyMedium: TextStyle = TypographyTokens.BodyMedium, val bodySmall: TextStyle = TypographyTokens.BodySmall, val labelLarge: TextStyle = TypographyTokens.LabelLarge, val labelMedium: TextStyle = TypographyTokens.LabelMedium, val labelSmall: TextStyle = TypographyTokens.LabelSmall, ) {
  56. $PMPS

  57. $PMPS4DIFNF @Stable class ColorScheme( primary: Color, onPrimary: Color, primaryContainer: Color,

    onPrimaryContainer: Color, inversePrimary: Color, secondary: Color, onSecondary: Color, secondaryContainer: Color, onSecondaryContainer: Color, tertiary: Color, onTertiary: Color, … scrim: Color, ) {
  58. $PMPS4DIFNF fun lightColorScheme( primary: Color = ColorLightTokens.Primary, onPrimary: Color =

    ColorLightTokens.OnPrimary, primaryContainer: Color = ColorLightTokens.PrimaryContainer, onPrimaryContainer: Color = ColorLightTokens.OnPrimaryContainer, inversePrimary: Color = ColorLightTokens.InversePrimary, secondary: Color = ColorLightTokens.Secondary, onSecondary: Color = ColorLightTokens.OnSecondary, secondaryContainer: Color = ColorLightTokens.SecondaryContainer, onSecondaryContainer: Color = ColorLightTokens.OnSecondaryContainer, tertiary: Color = ColorLightTokens.Tertiary, onTertiary: Color = ColorLightTokens.OnTertiary, … scrim: Color = ColorLightTokens.Scrim, ): ColorScheme =
  59. .BUFSJBM5IFNF#VJMEFS IUUQTNNBUFSJBMJPUIFNFCVJMEFSDVTUPN

  60. None
  61. None
  62. val md_theme_light_primary = Color(0xFF006399) val md_theme_light_onPrimary = Color(0xFFFFFFFF) … val

    md_theme_dark_primary = Color(0xFF95CCFF) val md_theme_dark_onPrimary = Color(0xFF003352) … val seed = Color(0xFF1DA1F2) private val LightColors = lightColorScheme( primary = md_theme_light_primary, onPrimary = md_theme_light_onPrimary, … ) private val DarkColors = darkColorScheme( primary = md_theme_dark_primary, onPrimary = md_theme_dark_onPrimary, … ) …
  63. .JHSBUJPO

  64. .JHSBUJPOͷ৺ಘ w .ͱಉ͡ݟͨ໨ʹ͠Α͏ͱ͠ͳ͍

  65. .JHSBUJPOͷ৺ಘ w .ͱಉ͡ݟͨ໨ʹ͠Α͏ͱ͠ͳ͍ w ద౰ͳ໌౓Λ৭Λ࢖Θͳ͍

  66. .JHSBUJPOͷઓུ w Ұ౓ʹશͯΛ.ʹ͢Δ w ը໘͝ͱʹ.ʹ͢Δ w ίϯϙʔωϯτ͝ͱʹ.ʹ͢Δ

  67. Ұ౓ʹશͯΛ .ʹ͢Δ w ΞϓϦશମͷݟͨ ໨͕มΘΔ w ֬ೝՕॴ͕ଟͯ͘ େม w JNQPSUઌͷؒҧ͍

    ͕ى͜Βͳ͍
  68. w ֬ೝՕॴ͕ͦͷը໘͚ͩ w .ͱ.྆ํͷϥΠ ϒϥϦʹґଘ w JNQPSUઌΛؒҧ͑ΔՄ ೳੑ͕͋Δ w ΞϓϦ༻ͷ

    $PNQPTBCMF͕.ͱ .޲͚྆ํඞཁ Ұ౓ʹશͯΛ .ʹ͢Δ ը໘͝ͱʹ .ʹ͢Δ w ΞϓϦશମͷݟͨ ໨͕มΘΔ w ֬ೝՕॴ͕ଟͯ͘ େม w JNQPSUઌͷؒҧ͍ ͕ى͜Βͳ͍
  69. w ֬ೝՕॴ͕ͦͷը໘͚ͩ w .ͱ.྆ํͷϥΠ ϒϥϦʹґଘ w JNQPSUઌΛؒҧ͑ΔՄ ೳੑ͕͋Δ w ΞϓϦ༻ͷ

    $PNQPTBCMF͕.ͱ .޲͚྆ํඞཁ w ֬ೝՕॴ͕ͦͷίϯ ϙʔωϯτ͚ͩ w .ͱ.྆ํͷϥΠ ϒϥϦʹґଘ w ը໘಺ʹ.ͱ. ͷݟͨ໨͕ࠞࡏͯ͠͠ ·͏ Ұ౓ʹશͯΛ .ʹ͢Δ ը໘͝ͱʹ .ʹ͢Δ ίϯϙʔωϯτ͝ͱʹ .ʹ͢Δ w ΞϓϦશମͷݟͨ ໨͕มΘΔ w ֬ೝՕॴ͕ଟͯ͘ େม w JNQPSUઌͷؒҧ͍ ͕ى͜Βͳ͍
  70. w ֬ೝՕॴ͕ͦͷը໘͚ͩ w .ͱ.྆ํͷϥΠ ϒϥϦʹґଘ w JNQPSUઌΛؒҧ͑ΔՄ ೳੑ͕͋Δ w ΞϓϦ༻ͷ

    $PNQPTBCMF͕.ͱ .޲͚྆ํඞཁ w ֬ೝՕॴ͕ͦͷίϯ ϙʔωϯτ͚ͩ w .ͱ.྆ํͷϥΠ ϒϥϦʹґଘ w ը໘಺ʹ.ͱ. ͷݟͨ໨͕ࠞࡏͯ͠͠ ·͏ Ұ౓ʹશͯΛ .ʹ͢Δ ը໘͝ͱʹ .ʹ͢Δ ίϯϙʔωϯτ͝ͱʹ .ʹ͢Δ w ΞϓϦશମͷݟͨ ໨͕มΘΔ w ֬ೝՕॴ͕ଟͯ͘ େม w JNQPSUઌͷؒҧ͍ ͕ى͜Βͳ͍ খن໛ΞϓϦʹ͓͢͢Ί େن໛ΞϓϦʹ͓͢͢Ί
  71. .JHSBUJPO4UFQT Ұ౓ʹશͯΛ.ʹ͢Δ

  72. 4UFQMJCSBSZΛஔ͖׵͑Δ "androidx.compose.material:material:$compose_version" "androidx.compose.material3:material3:1.0.0-beta03"

  73. 4UFQJNQPSUจΛஔ͖׵͑Δ import androidx.compose.material.* import androidx.compose.material3.* w DNE TIJGU 3 w

    ஫ҙʣJNQPSUBOESPJEYDPNQPTFNBUFSJBMJDPOT͸ର৅֎
  74. 4UFQDPMPSఆٛΛ.ʹ͢Δ lightColors(), darkColors() lightColorScheme(), darkColorScheme() w .BUFSJBM5IFNF#VJMEFSͰFYQPSUͨ͠ίʔυΛ࢖͏

  75. 4UFQUZQPHSBQIZ TIBQFఆٛΛ.ʹ͢Δ import androidx.compose.material3.Typography val Typography = Typography() import androidx.compose.material3.Shapes

    val Shapes = Shapes()
  76. 4UFQ.BUFSJBM5IFNFDPMPSΛஔ͖׵͑Δ MaterialTheme.colors.* MaterialTheme.colorScheme.* w DNE TIJGU 3

  77. 4UFQ.BUFSJBM5IFNFUZQPHSBQIZ Λஔ͖׵͑Δ MaterialTheme.typography.subtitle1 MaterialTheme.typography.titleMedium w DNE TIJGU 3

  78. . GPOU TJ[F . GPOU TJ[F EJTQMBZ EJTQMBZ-BSHF  EJTQMBZ

    EJTQMBZ.FEJVN  IFBEMJOF  EJTQMBZ4NBMM  IFBEMJOF  IFBEMJOF-BSHF  IFBEMJOF  IFBEMJOF.FEJVN  IFBEMJOF  IFBEMJOF4NBMM  IFBEMJOF  UJUMF-BSHF  IFBEMJOF  /" .BUFSJBM5IFNFUZQPHSBQIZ ͷରԠදʢଠࣈ͸ಉ͡GPOUTJ[Fʣ . GPOU TJ[F . GPOU TJ[F TVCUJUMF  UJUMF.FEJVN  TVCUJUMF  UJUMF4NBMM  CPEZ  CPEZ-BSHF  CPEZ  CPEZ.FEJVN  DBQUJPO  CPEZ4NBMM  CVUUPO  MBCFM-BSHF  PWFSMJOF  MBCFM.FEJVN  /" MBCFM4NBMM  IUUQTNBUFSJBMJPCMPHNJHSBUJOHNBUFSJBM
  79. 4UFQ.BUFSJBM5IFNFTIBQFT Λஔ͖׵͑Δ MaterialTheme.shapes.* MaterialTheme.shapes.* w DNE TIJGU 3 TNBMM EQ

    NFEJVN EQ MBSHF EQ FYUSB4NBMM EQ TNBMM EQ  NFEJVN EQ MBSHF EQ  FYUSB-BSHF EQ
  80. 4UFQίϯϙʔωϯτͷมߋʹରԠ͢Δ w ίϯϙʔωϯτͷ໊લ͕มΘͬͨ w ྫʣ#PUUPN/BWJHBUJPOˠ/BWJHBUJPO#BS w ίϯϙʔωϯτͷҾ਺͕มΘͬͨ w ྫʣ-JTU*UFNͷUFYUˠIFBEMJOF5FYU w

    ࢓૊Έ͕ͳ͘ͳͬͨ w ྫʣ$POUFOU"MQIB 4DB ff PME4UBUF
  81. .JHSBUJPO4UFQT ίϯϙʔωϯτ͝ͱʹ.ʹ͢Δ

  82. 4UFQMJCSBSZΛ௥Ճ͢Δ "androidx.compose.material:material:$compose_version" "androidx.compose.material3:material3:1.0.0-beta03"

  83. 4UFQ.༻ͷDPMPS UZQPHSBQIZ TIBQFΛ༻ҙ͢Δ import androidx.compose.material3.darkColorScheme import androidx.compose.material3.lightColorScheme import androidx.compose.material3.Shapes import

    androidx.compose.material3.Typography val LightColors = lightColorScheme( … ) val DarkColors = darkColorScheme( … ) val Typography3 = Typography() val Shapes3 = Shapes()
  84. 4UFQ.ͷ.BUFSJBM5IFNFͰXSBQ͢Δ @Composable fun MyTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable

    () -> Unit ) { androidx.compose.material3.MaterialTheme( colorScheme = if (!darkTheme) LightColors else DarkColors, typography = Typography3, shapes = Shapes3, ) { MaterialTheme( colors = if (!darkTheme) LightColorPalette else DarkColorPalette, typography = Typography, shapes = Shapes, content = content ) } }
  85. @Composable fun MaterialTheme( … ) { … CompositionLocalProvider( LocalColors provides

    rememberedColors, LocalContentAlpha provides ContentAlpha.high, LocalIndication provides rippleIndication, LocalRippleTheme provides MaterialRippleTheme, LocalShapes provides shapes, LocalTextSelectionColors provides selectionColors, LocalTypography provides typography ) { ProvideTextStyle(value = typography.body1) { PlatformMaterialTheme(content) } } } . .Ͱผͷ஋Λ ઃఆ .Ͱ΋ಉ͡஋Λ ઃఆ
  86. @Composable fun MyTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable ()

    -> Unit ) { androidx.compose.material3.MaterialTheme( colorScheme = if (!darkTheme) LightColors else DarkColors, typography = Typography3, shapes = Shapes3, ) { MaterialTheme( colors = if (!darkTheme) LightColorPalette else DarkColorPalette, typography = Typography, shapes = Shapes, content = content ) } } -PDBM3JQQMF5IFNF  -PDBM5FYU4FMFDUJPO$PMPST͸ .ͷ.BUFSJBM5IFNFʹΑΔઃఆ஋
  87. val colors = if (!darkTheme) LightColorPalette else DarkColorPalette val colorScheme

    = if (!darkTheme) { LightColors.copy( surface = colors.surface, onSurface = colors.onSurface, background = colors.background, onBackground = colors.onBackground, ) } else { DarkColors.copy( surface = colors.surface, onSurface = colors.onSurface, background = colors.background, onBackground = colors.onBackground, ) } androidx.compose.material3.MaterialTheme( colorScheme = colorScheme, … ) { MaterialTheme( colors = colors, … ) }
  88. 4UFQDVTUPNDPNQPTBCMFΛ༻ҙ͢Δ @OptIn(ExperimentalMaterialApi::class) @Composable fun MyListItem( modifier: Modifier = Modifier, …

    ) { ListItem( modifier = modifier, … ) } .ʹҠߦ͍ͨ͠.ͷίϯϙʔωϯτ
  89. 4UFQDVTUPNDPNQPTBCMFʹஔ͖׵͑Δ @Composable fun SettingList( … ) { ListItem( modifier =

    modifier, … ) } @Composable fun SettingList( … ) { MyListItem( modifier = modifier, … ) }
  90. 4UFQDVTUPNDPNQPTBCMF಺ͷJNQPSUจΛஔ͖׵͑Δ import androidx.compose.material.ListItem @OptIn(ExperimentalMaterialApi::class) @Composable fun MyListItem( modifier: Modifier =

    Modifier, … ) { ListItem( modifier = modifier, … ) } import androidx.compose.material3.ListItem @OptIn(ExperimentalMaterialApi::class) @Composable fun MyListItem( modifier: Modifier = Modifier, … ) { ListItem( modifier = modifier, … ) }
  91. 4UFQDVTUPNDPNQPTBCMF಺ͷ.BUFSJBM5IFNFΛஔ͖׵͑Δ MaterialTheme.colors.* MaterialTheme.colorScheme.* MaterialTheme.typography.subtitle1 MaterialTheme.typography.titleMedium

  92. 4UFQίϯϙʔωϯτͷมߋʹରԠ͢Δ @OptIn(ExperimentalMaterialApi::class) @Composable fun MyListItem( modifier: Modifier = Modifier, …

    ) { ListItem( text = …, … ) } @OptIn(ExperimentalMaterial3Api::class) @Composable fun MyListItem( modifier: Modifier = Modifier, … ) { ListItem( headlineText = …, … ) }
  93. 4UFQ.΁ͷґଘΛফ͢ w 4UFQʙ4UFQΛ܁Γฦ͢ w ͢΂ͯͷίϯϙʔωϯτΛҠߦͨ͠Β w ΞϓϦͷ5IFNFDPNQPTBCMF಺ͷ.ͷ.BUFSJBM5IFNFΛফ͢ w .ͷMJCSBSZΛফ͢

  94. .ˠ.ͰඞཁʹͳΔ Α͋͘Δमਖ਼఺

  95. -PDBM$POUFOU"MQIB͕ͳ͘ͳͬͨ Text("Hello Android") CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) { Text("Hello Android") }

    .
  96. -PDBM$POUFOU"MQIB͕ͳ͘ͳͬͨ Text("Hello Android") CompositionLocalProvider( LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant ) { Text("Hello

    Android") } Text("Hello Android", color = MaterialTheme.colorScheme.onSurfaceVariant) .
  97. EJTBCMFETUBUF val contentAlpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled CompositionLocalProvider(LocalContentAlpha

    provides contentAlpha, content = content) %JTBCMFETUBUFTIUUQTNNBUFSJBMJPGPVOEBUJPOTJOUFSBDUJPOTUBUFT . w DPOUFOUPO4VSGBDF BMQIB w DPOUBJOFSPO4VSGBDF BMQIB val contentColor = colors.contentColor(enabled).value CompositionLocalProvider(LocalContentColor provides contentColor, content = content) .
  98. ListItem( headlineText = { Text("Hello Android") }, supportingText = {

    Text("Hello Android") }, colors = ListItemDefaults.colors( headlineColor = if (enabled) { MaterialTheme.colorScheme.onSurface } else { MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f) }, supportingColor = if (enabled) { MaterialTheme.colorScheme.onSurfaceVariant } else { MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.38f) } ) ) -JTU*UFN%FGBVMUTDPMPST Ͱ͸EJTBCMF࣌ͷ৭͕ࢦఆͰ͖ΔͷͰɺ ࠓޙFOBCMFEΛࢦఆͰ͖ΔΑ͏ʹͳΔ͔΋ʜ
  99. &MFWBUJPOͷදݱ w .TIBEPXʹΑΔදݱ w .4VSGBDFUPOFTʹΑΔදݱDPMPSPWFSMBZʹΑΔදݱ w FMFWBUJPO͕ߴ͍ˠDPMPSPWFSMBZͷෆಁ໌౓͕ߴ͍ w -PDBM&MFWBUJPO0WFSMBZ͸ແ͘ͳͬͨ IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFNDPMPSSPMFT

    . . TIBEPX TIBEPX ͳ͠
  100. DPOUFOUͷσϑΥϧτΧϥʔ͕มΘͬͨ w $IFDLCPYTFDPOEBSZˠQSJNBSZ w 3BEJP#VUUPOTFDPOEBSZˠQSJNBSZ w 4XJUDITFDPOEBSZ7BSJBOUˠQSJNBSZ w '"#TFDPOEBSZˠQSJNBSZ .

    .
  101. 4DBGGPMETDBGGPME4UBUF͕ͳ͘ͳͬͨ val scaffoldState = rememberScaffoldState() if (showSnackbar) { val message

    = … LaunchedEffect(Unit) { scaffoldState.snackbarHostState.showSnackbar(message) onSnackbarShown() } } Scaffold( scaffoldState = scaffoldState, … ) { .
  102. 4DBGGPMETDBGGPME4UBUF͕ͳ͘ͳͬͨ . val snackbarHostState = remember { SnackbarHostState() } if

    (showSnackbar) { val message = … LaunchedEffect(Unit) { snackbarHostState.showSnackbar(message) onSnackbarShown() } } Scaffold( snackbarHost = { SnackbarHost(hostState = snackbarHostState) }, … ) {
  103. 5PQ"QQ#BS TopAppBar( …, content = { … } ) .

    . ͳ͠
  104. 5PQ"QQ#BS TopAppBar( …, backgroundColor = MaterialTheme.colors.onBackground, contentColor = MaterialTheme.colors.background )

    . . TopAppBar( …, colors = TopAppBarDefaults.smallTopAppBarColors( containerColor = MaterialTheme.colorScheme.inverseSurface, navigationIconContentColor = MaterialTheme.colorScheme.inverseOnSurface, titleContentColor = MaterialTheme.colorScheme.inverseOnSurface, actionIconContentColor = MaterialTheme.colorScheme.inverseOnSurface, ) )
  105. %SPQEPXO.FOV*UFN w DPOUFOUˠUFYU w 3PX4DPQF͡Όͳ͘ͳͬͨ w ࠷ޙͷҾ਺͡Όͳ͘ͳͬͨ DropdownMenuItem( onClick =

    { … } ) { Text(it) } DropdownMenuItem( text = { Text(it) }, onClick = { … } ) . .
  106. -JTU*UFN w UFYUˠIFBEMJOF5FYU w TFDPOEBSZ5FYUˠTVQQPSUJOH5FYU w JDPOˠMFBEJOH$POUFOU w USBJMJOHˠUSBJMJOH$POUFOU w

    TJOHMF-JOF4FDPOEBSZ5FYUˠͳ͠ w DPMPST-JTU*UFN$PMPST௥Ճ w UPOBM&MFWBUJPO%Q TIBEPX&MFWBUJPO%Q௥Ճʢॳظ஋͸EQʣ ListItem( headlineText = { Text("Hello Android") } ) . . ListItem { Text("Hello Android") }
  107. #PUUPN/BWJHBUJPO w ໊લ͕มΘͬͨ w #PUUPN/BWJHBUJPOˠ/BWJHBUJPO#BS w #PUUPN/BWJHBUJPO*UFNˠ/BWJHBUJPO#BS*UFN w CBDLHSPVOE$PMPSˠDPOUBJOFS$PMPS w

    FMFWBUJPOˠUPOBM&MFWBUJPO
  108. ͦͷଞ w $PMPSTJT-JHIU#PPMFBOˠ$PMPS4DIFNFJT-JHIUͳ͠ w /BWJHBUJPO%SBXFS4DB ff PMEͷػೳˠ.PEBM/BWJHBUJPO%SBXFS w #PUUPNTIFFUˠͳ͠ʢ1MBOOFEʣ w

    #BDLESPQ4DB ff PMEˠͳ͠ʢ1MBOOFEʁʣ
  109. .JHSBUJPOΛָʹ͢ΔͨΊʹ

  110. .JHSBUJPOΛָʹ͢ΔͨΊʹ w มߋՕॴΛগͳ͘͢Δʂ w ίϯϙʔωϯτΛϥοϓ͢Δ$VTUPN$PNQPTBCMFΛ༻ҙ͢Δ w मਖ਼Օॴ͕গͳ͘ͳΔɺमਖ਼࿙ΕΛ๷͛Δ w .Ͱͳ͘ͳΔ΋ͷΛʢͳΔ΂͘ʣ࢖Θͳ͍ w

    $POUFOU"MQIBY w $PMPSTJT-JHIUY
  111. ·ͱΊ w $PNQPTFͰ৽͍͠ΞϓϦΛ࡞ΔͳΒ࠷ॳ͔Β.ʹ͢Δ w .Ͱ.ͱಉ͡ݟͨ໨ʹ͠Α͏ͱ͠ͳ͍ w .͔Β.΁ͷҠߦ͸͚ͬ͜͏େม w ن໛ͷখ͍͞ΞϓϦͳΒҰؾʹҠߦ͢Δͷ΋͋Γ w

    ن໛ͷେ͖͍ΞϓϦ͸ίϯϙʔωϯτ͝ͱʹҠߦ͢Δͷ͕͓͢͢Ί
  112. ͓ΘΓ