Material3 with Jetpack Compose

by Yuki Anzai

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

.BUFSJBM%FTJHOͱ͸

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

.BUFSJBMͰมΘͬͨ͜ͱ

Slide 7

Slide 7 text

%FTJHO5PLFOT

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

%FTJHO5PLFOTҰཡ

Slide 16

Slide 16 text

TIBQFͷ%FTJHO5PLFOT w IUUQTNNBUFSJBMJPTUZMFTTIBQFTIBQFTDBMFUPLFOTGCB CFBCDGDD ff GF

Slide 17

Slide 17 text

UZQPHSBQIZͷ%FTJHO5PLFOT w IUUQTNNBUFSJBMJPTUZMFTUZQPHSBQIZUZQFTDBMF UPLFOTECDBDEDCBGE

Slide 18

Slide 18 text

DPMPSͷ%FTJHO5PLFOT w IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFN UPLFOTGEFEGCBC ff

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

3PMF

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

4IBQF

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

5ZQPHSBQIZ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

$PMPS

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

,FZDPMPST w ͭͷLFZDPMPS

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

LFZDPMPSͷUPOBMQBMFUUF IUUQTNNBUFSJBMJPUIFNFCVJMEFSDVTUPN

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

BDDFOUSPMFT

Slide 40

Slide 40 text

OFVUSBMSPMFT

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

$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

Slide 43

Slide 43 text

ͦͷଞͷ$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ʹ͸ఆٛ͞Ε͍ͯ·ͤΜ

Slide 44

Slide 44 text

DVTUPNDPMPS

Slide 45

Slide 45 text

.BUFSJBMGPSDPNQPTF

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

4IBQF

Slide 51

Slide 51 text

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

5ZQPHSBQIZ

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

$PMPS

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

$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 =

Slide 59

Slide 59 text

.BUFSJBM5IFNF#VJMEFS IUUQTNNBUFSJBMJPUIFNFCVJMEFSDVTUPN

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

.JHSBUJPO

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Slide 71

Slide 71 text

.JHSBUJPO4UFQT Ұ౓ʹશͯΛ.ʹ͢Δ

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

. 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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

.ˠ.ͰඞཁʹͳΔ Α͋͘Δमਖ਼఺

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

#PUUPN/BWJHBUJPO w ໊લ͕มΘͬͨ w #PUUPN/BWJHBUJPOˠ/BWJHBUJPO#BS w #PUUPN/BWJHBUJPO*UFNˠ/BWJHBUJPO#BS*UFN w CBDLHSPVOE$PMPSˠDPOUBJOFS$PMPS w FMFWBUJPOˠUPOBM&MFWBUJPO

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

.JHSBUJPOΛָʹ͢ΔͨΊʹ

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

͓ΘΓ