Jetpack Compose で Material3 / Material3 with Jetpack Compose

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

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

.BUFSJBM%FTJHOͱ͸

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

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

.BUFSJBMͰมΘͬͨ͜ͱ

%FTJHO5PLFOT

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

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

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

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

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

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

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

%FTJHO5PLFOTҰཡ

TIBQFͷ%FTJHO5PLFOT w IUUQTNNBUFSJBMJPTUZMFTTIBQFTIBQFTDBMFUPLFOTGCB CFBCDGDD ff GF

UZQPHSBQIZͷ%FTJHO5PLFOT w IUUQTNNBUFSJBMJPTUZMFTUZQPHSBQIZUZQFTDBMF UPLFOTECDBDEDCBGE

DPMPSͷ%FTJHO5PLFOT w IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFN UPLFOTGEFEGCBC ff

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

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

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

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

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

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

5ZQPHSBQIZ

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

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

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

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

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

,FZDPMPST w ͭͷLFZDPMPS

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

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

LFZDPMPSͷUPOBMQBMFUUF IUUQTNNBUFSJBMJPUIFNFCVJMEFSDVTUPN

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

BDDFOUSPMFT

OFVUSBMSPMFT

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

$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

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

DVTUPNDPMPS

.BUFSJBMGPSDPNQPTF

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

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

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

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

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

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

5ZQPHSBQIZ

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

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

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

.BUFSJBM5IFNF#VJMEFS IUUQTNNBUFSJBMJPUIFNFCVJMEFSDVTUPN

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

.JHSBUJPO

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

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

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

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

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

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

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

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

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

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

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

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

4UFQ.BUFSJBM5IFNFDPMPSΛஔ͖׵͑Δ MaterialTheme.colors.* MaterialTheme.colorScheme.* w DNE TIJGU 3

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

. 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.JHSBUJPOΛָʹ͢ΔͨΊʹ

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

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

͓ΘΓ

Jetpack Compose で Material3 / Material3 with Je...

Jetpack Compose で Material3 / Material3 with Jetpack Compose

More Decks by Yuki Anzai

Other Decks in Technology

Featured

Transcript