Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    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