Material3 with Jetpack Compose

Transcript

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

   View Slide

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

   View Slide

3. .BUFSJBM%FTJHOͱ͸
   

   View Slide

4. .BUFSJBM%FTJHOͱ͸
   w 6*ઃܭͷϕετϓϥΫςΟεΛαϙʔτ͢ΔΨΠυϥΠϯɺίϯϙʔωϯ
   τɺ͓Αͼπʔϧ܈
   .BUFSJBM%FTJHO
   .
   
   ೥ʙ
   .BUFSJBM%FTJHO
   .
   
   ೥ʙ
   .BUFSJBM5IFNJOHͱ.BUFSJBM
   $PNQPOFOUTͷίʔυ͕௥Ճ͞Εͨ
   .BUFSJBM%FTJHO
   .
   
   ೥ʙ
   EZOBNJDDPMPSͷΑ͏ͳ.BUFSJBM
   :PVͷػೳ͕௥Ճ͞Εͨ
   

   View Slide

5. .ͷ໰୊఺
   w 5ZQPHSBQIZ
   w ໊લ͔Β࢖༻Օॴ͕૝૾͠ʹ͍͘
   w ྫʣ"MFSU%JBMPHͷλΠτϧ͸TVCUJUMF
   w $PMPS
   w QSJNBSZ4VSGBDFͷΑ͏ͳத్൒୺ͳఆ͕ٛ૿͖͑ͯͨ
   w ৭ΛબͿͷ͕೉͍͠ʢTFDPOEBSZɺEBSLUIFNF༻ʣ
   w EZOBNJDDPMPSରԠͰ͖ͳ͍ʢDPOUSBTUΛอূͰ͖ͳ͍ʣ
   

   View Slide

6. .BUFSJBMͰมΘͬͨ͜ͱ
   

   View Slide

7. %FTJHO5PLFOT
   

   View Slide

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

   View Slide

9. %FTJHO5PLFOTͷ໊લ
   w "σβΠϯγεςϜ໊
   w #%FTJHO5PLFOͷछྨ
   w $τʔΫϯͷ໾ׂΛ఻͑Δ
   ͨΊͷΘ͔Γ΍໊͍͢લ
   w ۠੾Γ
   w ࠨˠӈҰൠతͳ৘ใˠ۩ମతͳ৘ใ
   

   View Slide

10. %FTJHO5PLFOTͷछྨ
    w 3FGFSFODF5PLFO
    w 4ZTUFN5PLFO
    w $PNQPOFOU5PLFO
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. %FTJHO5PLFOTҰཡ
    

    View Slide

16. TIBQFͷ%FTJHO5PLFOT
    w IUUQTNNBUFSJBMJPTUZMFTTIBQFTIBQFTDBMFUPLFOTGCB
    CFBCDGDD
    ff
    GF
    

    View Slide

17. UZQPHSBQIZͷ%FTJHO5PLFOT
    w IUUQTNNBUFSJBMJPTUZMFTUZQPHSBQIZUZQFTDBMF
    UPLFOTECDBDEDCBGE
    

    View Slide

18. DPMPSͷ%FTJHO5PLFOT
    w IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFN
    UPLFOTGEFEGCBC
    ff
    
    

    View Slide

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

    View Slide

20. 3PMF
    

    View Slide

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

    View Slide

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

    View Slide

23. 4IBQF
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

27. 5ZQPHSBQIZ
    

    View Slide

28. .ͷUZQPHSBQIZ
    w ͭͷ3PMF
    w %JTQMBZ
    w )FBEMJOF
    w 5JUMF
    w #PEZ
    w -BCFM
    w 3PMF͝ͱʹͭͷTDBMF
    w -BSHF
    w .FEJVN
    w 4NBMM
    

    View Slide

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ͱҟͳΔɻ
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. $PMPS
    

    View Slide

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

    View Slide

34. ,FZDPMPST
    w ͭͷLFZDPMPS
    

    View Slide

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

    View Slide

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

    View Slide

37. LFZDPMPSͷUPOBMQBMFUUF
    IUUQTNNBUFSJBMJPUIFNFCVJMEFSDVTUPN
    

    View Slide

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

    View Slide

39. BDDFOUSPMFT
    

    View Slide

40. OFVUSBMSPMFT
    

    View Slide

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

    View Slide

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
    

    View Slide

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ʹ͸ఆٛ͞Ε͍ͯ·ͤΜ
    

    View Slide

44. DVTUPNDPMPS
    

    View Slide

45. .BUFSJBMGPSDPNQPTF
    

    View Slide

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

    View Slide

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
    )
    }
    

    View Slide

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
    )
    }
    

    View Slide

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
    )
    }
    

    View Slide

50. 4IBQF
    

    View Slide

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,
    ) {
    

    View Slide

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
    …
    }
    

    View Slide

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)
    }
    

    View Slide

54. 5ZQPHSBQIZ
    

    View Slide

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,
    ) {
    

    View Slide

56. $PMPS
    

    View Slide

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,
    ) {
    

    View Slide

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 =
    

    View Slide

59. .BUFSJBM5IFNF#VJMEFS
    IUUQTNNBUFSJBMJPUIFNFCVJMEFSDVTUPN
    

    View Slide

60. View Slide

61. View Slide

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,
    …
    )
    …
    

    View Slide

63. .JHSBUJPO
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

71. .JHSBUJPO4UFQT
    Ұ౓ʹશͯΛ.ʹ͢Δ
    

    View Slide

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

    View Slide

73. 4UFQJNQPSUจΛஔ͖׵͑Δ
    import androidx.compose.material.*
    import androidx.compose.material3.*
    w DNETIJGU3
    w ஫ҙʣJNQPSUBOESPJEYDPNQPTFNBUFSJBMJDPOT͸ର৅֎
    

    View Slide

74. 4UFQDPMPSఆٛΛ.ʹ͢Δ
    lightColors(), darkColors()
    lightColorScheme(), darkColorScheme()
    w .BUFSJBM5IFNF#VJMEFSͰFYQPSUͨ͠ίʔυΛ࢖͏
    

    View Slide

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

    View Slide

76. 4UFQ.BUFSJBM5IFNFDPMPSΛஔ͖׵͑Δ
    MaterialTheme.colors.*
    MaterialTheme.colorScheme.*
    w DNETIJGU3
    

    View Slide

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

    View Slide

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
    

    View Slide

79. 4UFQ.BUFSJBM5IFNFTIBQFTΛஔ͖׵͑Δ
    MaterialTheme.shapes.*
    MaterialTheme.shapes.*
    w DNETIJGU3
    TNBMM EQ
    NFEJVN EQ
    MBSHF EQ
    
    FYUSB4NBMM EQ
    TNBMM EQ
    
    NFEJVN EQ
    MBSHF EQ
    
    FYUSB-BSHF EQ
    
    

    View Slide

80. 4UFQίϯϙʔωϯτͷมߋʹରԠ͢Δ
    w ίϯϙʔωϯτͷ໊લ͕มΘͬͨ
    w ྫʣ#PUUPN/BWJHBUJPOˠ/BWJHBUJPO#BS
    w ίϯϙʔωϯτͷҾ਺͕มΘͬͨ
    w ྫʣ-JTU*UFNͷUFYUˠIFBEMJOF5FYU
    w ࢓૊Έ͕ͳ͘ͳͬͨ
    w ྫʣ$POUFOU"MQIB 4DB
    ff
    PME4UBUF
    

    View Slide

81. .JHSBUJPO4UFQT
    ίϯϙʔωϯτ͝ͱʹ.ʹ͢Δ
    

    View Slide

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

    View Slide

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()
    

    View Slide

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
    )
    }
    }
    

    View Slide

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)
    }
    }
    }
    .
    .Ͱผͷ஋Λ
    ઃఆ
    .Ͱ΋ಉ͡஋Λ
    ઃఆ
    

    View Slide

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ʹΑΔઃఆ஋
    

    View Slide

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,
    …
    )
    }
    

    View Slide

88. 4UFQDVTUPNDPNQPTBCMFΛ༻ҙ͢Δ
    @OptIn(ExperimentalMaterialApi::class)
    @Composable
    fun MyListItem(
    modifier: Modifier = Modifier,
    …
    ) {
    ListItem(
    modifier = modifier,
    …
    )
    }
    .ʹҠߦ͍ͨ͠.ͷίϯϙʔωϯτ
    

    View Slide

89. 4UFQDVTUPNDPNQPTBCMFʹஔ͖׵͑Δ
    @Composable
    fun SettingList(
    …
    ) {
    ListItem(
    modifier = modifier,
    …
    )
    }
    @Composable
    fun SettingList(
    …
    ) {
    MyListItem(
    modifier = modifier,
    …
    )
    }
    

    View Slide

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,
    …
    )
    }
    

    View Slide

91. 4UFQDVTUPNDPNQPTBCMF಺ͷ.BUFSJBM5IFNFΛஔ͖׵͑Δ
    MaterialTheme.colors.*
    MaterialTheme.colorScheme.*
    MaterialTheme.typography.subtitle1
    MaterialTheme.typography.titleMedium
    

    View Slide

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

    View Slide

93. 4UFQ.΁ͷґଘΛফ͢
    w 4UFQʙ4UFQΛ܁Γฦ͢
    w ͢΂ͯͷίϯϙʔωϯτΛҠߦͨ͠Β
    w ΞϓϦͷ5IFNFDPNQPTBCMF಺ͷ.ͷ.BUFSJBM5IFNFΛফ͢
    w .ͷMJCSBSZΛফ͢
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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)
    .
    

    View Slide

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ΛࢦఆͰ͖ΔΑ͏ʹͳΔ͔΋ʜ
    

    View Slide

99. &MFWBUJPOͷදݱ
    w .TIBEPXʹΑΔදݱ
    w .4VSGBDFUPOFTʹΑΔදݱDPMPSPWFSMBZʹΑΔදݱ
    w FMFWBUJPO͕ߴ͍ˠDPMPSPWFSMBZͷෆಁ໌౓͕ߴ͍
    w -PDBM&MFWBUJPO0WFSMBZ͸ແ͘ͳͬͨ
    IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFNDPMPSSPMFT
    . .
    TIBEPX
    TIBEPX
    ͳ͠
    

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

103. 5PQ"QQ#BS
     TopAppBar(
     …,
     content = {
     …
     }
     )
     . .
     ͳ͠
     

     View Slide

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,
     )
     )
     

     View Slide

105. %SPQEPXO.FOV*UFN
     w DPOUFOUˠUFYU
     w 3PX4DPQF͡Όͳ͘ͳͬͨ
     w ࠷ޙͷҾ਺͡Όͳ͘ͳͬͨ
     DropdownMenuItem(
     onClick = {
     …
     }
     ) {
     Text(it)
     }
     DropdownMenuItem(
     text = {
     Text(it)
     },
     onClick = {
     …
     }
     )
     .
     .
     

     View Slide

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")
     }
     

     View Slide

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
     

     View Slide

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

     View Slide

109. .JHSBUJPOΛָʹ͢ΔͨΊʹ
     

     View Slide

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

     View Slide

111. ·ͱΊ
     w $PNQPTFͰ৽͍͠ΞϓϦΛ࡞ΔͳΒ࠷ॳ͔Β.ʹ͢Δ
     w .Ͱ.ͱಉ͡ݟͨ໨ʹ͠Α͏ͱ͠ͳ͍
     w .͔Β.΁ͷҠߦ͸͚ͬ͜͏େม
     w ن໛ͷখ͍͞ΞϓϦͳΒҰؾʹҠߦ͢Δͷ΋͋Γ
     w ن໛ͷେ͖͍ΞϓϦ͸ίϯϙʔωϯτ͝ͱʹҠߦ͢Δͷ͕͓͢͢Ί
     

     View Slide

112. ͓ΘΓ
     

     View Slide