Jetpack Compose 1.2 新機能 / new features of Jetpack Compose 1.2

͋Μ͍͟Ώ͖ !ZBO[N (PPHMF%FWFMPQFS&YQFSUTGPS"OESPJE גࣜձࣾ΢ϑΟΧ 5FDI'FFE&YQFSUT/JHIUʙϞόΠϧΞϓϦ։ൃಛू +FUQBDL$PNQPTF৽ػೳ

+FUQBDL$PNQPTFͱ͸ w ωΠςΟϒ6*ΛϏϧυ͢ΔͨΊͷ"OESPJEͷ࠷৽πʔϧΩοτ w 6*Λએݴతʹهड़Ͱ͖Δ w IUUQTEFWFMPQFSBOESPJEDPNKFUQBDLDPNQPTF Row { Image(
painter = painterResource(R.drawable.profile_picture), contentDescription = "Contact profile picture", ) Column { Text(text = message.author) Text(text = message.body) } }

+FUQBDL$PNQPTFͷTUBCMFόʔδϣϯ $PNQPTF6*ͳͲ $PNQPTF$PNQJMFS

"OJNBUPSEVSBUJPOTDBMF AnimatedVisibility( visible = editable, enter = fadeIn(tween(1000)) ) {
Spacer( modifier = Modifier .size(100.dp) .background(Color.Blue) ) }

7FDUPS1BJOUFSBVUPNJSSPSJOH w SFNFNCFS7FDUPS1BJOUFS ͰBVUP.JSSPSʹUSVFΛࢦఆ͢Δͱɺ35- ʢ3JHIUUP-FGUʣϨΠΞ΢τͷͱ͖ʹWFDUPSJNBHFͷද͕ࣔNJSSPSJOH ͞ΕΔ

7FDUPS1BJOUFSBVUPNJSSPSJOH w SFNFNCFS7FDUPS1BJOUFS ʹ*NBHF7FDUPSΛࢦఆ͢Δ ৔߹͸ɺ*NBHF7FDUPSͷBVUPNJSSPSઃఆ͕࢖ΘΕΔ w NBUFSJBMJDPOT͸BVUPNJSSPSઃఆ͸GBMTFʹͳ͍ͬͯ ΔͷͰ35-ϨΠΞ΢τͰ΋൓స͠ͳ͍ Image( painter
= rememberVectorPainter(image = Icons.Default.Refresh), contentDescription = null, modifier = Modifier.size(128.dp) )

w SFNFNCFS7FDUPS1BJOUFS ͰWFDUPSͷDPOUFOUΛࢦఆ͢Δ৔߹ɺ BVUP.JSSPSΛઃఆͰ͖Δ Image( painter = rememberVectorPainter( defaultWidth =
128.dp, defaultHeight = 128.dp, autoMirror = true, ) { viewportWidth, viewportHeight -> Path( pathData = PathData { lineTo(viewportWidth, 0f) lineTo(0f, viewportHeight) close() }, fill = SolidColor(Color.Black) ) }, contentDescription = null, modifier = Modifier.size(128.dp).padding(16.dp) )

w SFNFNCFS"OJNBUFE7FDUPS1BJOUFS Ͱ͸BVUPNJSSPS͕USVFʹͳΔ var atEnd by remember { mutableStateOf(false) }
Image( painter = rememberAnimatedVectorPainter( AnimatedImageVector.animatedVectorResource( R.drawable.animated_vector ), atEnd = atEnd ), contentDescription = null, modifier = Modifier .size(128.dp) .clickable { atEnd = !atEnd } )

/FXFBTJOH w &BTFɺ&BTF0VUɺ&BTF*Oɺ&BTF*O0VUɺ w &BTF*O4JOFɺ&BTF0VU4JOFɺ&BTF*O0VU4JOF w &BTF*O$VCJDɺ&BTF0VU$VCJDɺ&BTF*O0VU$VCJD w &BTF*O2VJOUɺ&BTF0VU2VJOUɺ&BTF*O0VU2VJOU w
&BTF*O$JSDɺ&BTF0VU$JSDɺ&BTF*O0VU$JSD w &BTF*O2VBEɺ&BTF0VU2VBEɺ&BTF*O0VU2VBE w &BTF*O2VBSUɺ&BTF0VU2VBSUɺ&BTF*O0VU2VBSU w &BTF*O&YQPɺ&BTF0VU&YQPɺ&BTF*O0VU&YQP w &BTF*O#BDLɺ&BTF0VU#BDLɺ&BTF*O0VU#BDL w &BTF*O&MBTUJDɺ&BTF0VU&MBTUJDɺ&BTF*O0VU&MBTUJD w &BTF0VU#PVODFɺ&BTF*O#PVODFɺ&BTF*O0VU#PVODF &BTJOH'VODUJPOTLU

-B[Z-JTUͷVTFS4DSPMM&OBCMFEύϥϝʔλ w VTFS4DSPMM&OBCMFEʹGBMTFΛࢦఆ͢ΔͱδΣενϟʔͰεΫϩʔϧ͞Εͳ ͘ͳΔ w ಺෦Ͱ͸.PEJ fi FSTDSPMMBCMFͷFOBCMFEΛར༻ LazyColumn( userScrollEnabled
= checked, modifier = Modifier.fillMaxSize() ) { … }

.BHOJGJFS8JEHFU w 4FMFDUJPO$POUBJOFS಺Ͱબ୒ϋϯυϧΛυϥοά͍ͯ͠Δͱ͖ʹ֦େද͕ࣔ ͰΔΑ͏ʹͳͬͨ

.PEJGJFSTZTUFN(FTUVSF&YDMVTJPO w .PEJ fi FSTZTUFN(FTUVSF&YDMVTJPO ͰγεςϜδΣενϟʔ͔Βআ͘ྖҬ ͱͯ͠ࢦఆͰ͖Δ Spacer( modifier =
Modifier.size(128.dp).background(Color.Blue) .systemGestureExclusion() ) Spacer( modifier = Modifier.size(128.dp).background(Color.Red) .systemGestureExclusion { Rect( offset = Offset.Zero, size = Size( width = it.size.width.toFloat(), height = it.size.height / 2f ) ) } )

-B[ZMJTUܥͷJUFNͷDPOUFOU5ZQF w -B[Z$PMVNOɺ-B[Z3PXɺ-B[Z7FSUJDBM(SJEͷJUFNʹDPOUFOUUZQFΛࢦ ఆͰ͖ΔΑ͏ʹͳͬͨ w DPOUFOUUZQF͝ͱʹ࠷େݸ·ͰDPNQPOFOU͕࠶ར༻ͷͨΊʹ࢒Δ LazyColumn { items( count
= 100, contentType = { if (it % 2 == 0) "Button" else "Text" } ) { if (it % 2 == 0) { Button(…) { … } } else { Text(…) } } }

%PXOMPBEBCMF'POUʢBTZODGPOUMPBEJOHʣ w (PPHMFGPOUΛ࢖͏৔߹͸lBOESPJEYDPNQPTFVJVJUFYUHPPHMFGPOUT DPNQPTF@WFSTJPO͕ඞཁ Text( text = "Hello Android", fontSize
= 30.sp, fontFamily = FontFamily( androidx.compose.ui.text.googlefonts.Font( googleFont = GoogleFont("Asset"), fontProvider = GoogleFont.Provider( providerAuthority = "com.google.android.gms.fonts", providerPackage = "com.google.android.gms", certificates = R.array.com_google_android_gms_fonts_certs, ) ) ) )

-B[Z-BZPVU w -B[Z$PMVNO΍-B[Z3PXͷϕʔεػೳ͕ -B[Z-BZPVUDPNQPTBCMFͱͯ͠·ͱΊΒΕͨ w ಠࣗͷ഑ஔͷ-B[ZMJTUΛ࡞Δ͜ͱ͕Մೳʹ

5FYU4UZMFɺ4QBO4UZMFͷ#SVTIରԠ Text( "Brush is awesome\nBrush is awesome\nBrush is awesome", style
= TextStyle( brush = Brush.linearGradient( colors = listOf( Color(0xff9c4f96), Color(0xffff6355), Color(0xfffba949), Color(0xfffae442), Color(0xff8bd448), Color(0xff2aa8f2) ), tileMode = TileMode.Mirror ), fontSize = 30.sp ) )

$IJQɺ'JMUFS$IJQDPNQPTBCMF Chip(onClick = { … }) { Text("Android") } var
selected by remember { mutableStateOf(false) } FilterChip( selected = selected, selectedIcon = { if (selected) { Icon( imageVector = Icons.Default.Check, contentDescription = null ) } }, onClick = { selected = !selected }, ) { Text("Android") }

5FYU'JFME%FDPSBUJPO#PYɺ0VUMJOFE5FYU'JFME%FDPSBUJPO#PY w ಠࣗͷݟͨ໨ͷೖྗϑΥʔϜΛ࡞Δʹ͸ #BTJD5FYU'JFMEΛ࢖͏ BasicTextField( value = value, onValueChange =
{ value = it }, decorationBox = { Box( modifier = Modifier .background( Color.Blue.copy(alpha = 0.1f), MaterialTheme.shapes.medium ) .padding(16.dp) ) { it() } } )

BasicTextField( … decorationBox = { TextFieldDefaults.TextFieldDecorationBox( value = value, innerTextField
= it, enabled = true, singleLine = true, visualTransformation = visualTransformation, interactionSource = interactionSource, placeholder = { Text("hint") } ) }, modifier = Modifier .background( Color.Blue.copy(alpha = 0.1f), MaterialTheme.shapes.medium ) .defaultMinSize( minWidth = TextFieldDefaults.MinWidth, minHeight = TextFieldDefaults.MinHeight ) )

NPWBCMF$POUFOU0G w DPNQPTBCMFMBNCEBΛSFNFNCFS͢Δ͜ͱͰɺ DPNQPTFUSFFͷதͰ৔ॴ͕มΘͬͯ΋࠶ίϯϙ δγϣϯ͞Εͳ͍͘͠Έ w Ͱ௥Ճ͞ΕΔ-PPLBIFBE-BZPVUͱ૊Έ߹ ΘͤΔͱ4IBSFEUSBOTJUJPO͕ՄೳʹͳΔ CFUB

QMVSBM4USJOH3FTPVSDF <resources> <plurals name="item_count"> <item quantity="one">%1$d count</item> <item quantity="other">%1$d counts</item>
</plurals> </resources> Text(text = pluralStringResource(R.plurals.item_count, count = 1)) Text(text = pluralStringResource(R.plurals.item_count, count = 10))

8JOEPX*OTFUT w ͍··Ͱ͸"DDPNQBOJTUͷJOTFUTϥΠϒϥϦΛ࢖͏ͷ͕σϑΝΫτͩͬͨ ͕ɺಉ౳ͷػೳ͕ຊମʹऔΓࠐ·Εͨ w "DDPNQBOJTUͷJOTFUTϥΠϒϥϦ͸EFQSFDBUFE w .JHSBUJPOHVJEFIUUQTHPPHMFHJUIVCJPBDDPNQBOJTUJOTFUT

8JOEPX*OTFUTΛQBEEJOHͱͯ͠औಘ͢Δ 8JOEPX*OTFUTΛXJEUIIFJHIUͱͯ͠औಘ͢Δ val paddingValue: PaddingValues = WindowInsets.statusBars.asPaddingValues() val modifier1 =
Modifier.statusBarsPadding() val modifier2 = Modifier.windowInsetsPadding(WindowInsets.statusBars) val modifier3 = Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing) val modifier4 = Modifier.windowInsetsEndWidth(WindowInsets.navigationBars)

8JOEPX*OTFUTΛՃ޻͢Δ val insets1: WindowInsets = WindowInsets.safeDrawing.add(WindowInsets(bottom = 24.dp)) val insets2:
WindowInsets = WindowInsets.systemBars.only( WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom ) val insets3: WindowInsets = WindowInsets.systemBars.exclude(WindowInsets.statusBars) val insets4: WindowInsets = WindowInsets.navigationBars.union(WindowInsets.ime)

όάमਖ਼ w $+,ΩʔϘʔυͰόοΫεϖʔε ௕ԡ͠ͰจࣈΛ࿈ଓফڈͰ͖ΔΑ ͏ʹͳͬͨ w UFYU fi FMEؒΛϑΥʔΧε͕Ҡಈ͢ Δͱ͖ʹTPGULFZCPBSEJOQVU
UZQF͕Ұॠ੾ΓସΘΔڍಈ͕ͳ͘ ͳͬͨ

'PDVTॲཧվળ w .PEJ fi FSGPDVT(SPVQ w -B[Z$PMVNOɺ-B[Z3PXͰGPDVTҠ ಈʹΑΔεΫϩʔϧʹରԠ w
ϑΥʔΧε͞Ε͍ͯΔ5FYU'JFME͕ද ࣔ͞ΕΔΑ͏ʹࣗಈͰεΫϩʔϧ

·ͱΊ w $PNQPTFͰ͍Ζ͍Ζվળ͠·ͨ͠ w -B[Z-JTUؔ܎ w 8JOEPX*OTFUT w ೖྗϑΥʔϜɺϑΥʔΧεपΓ w
·ͩ+FUQBDL$PNQPTFΛಋೖ͍ͯ͠ͳ͍ͳΒɺͥͻಋೖ͍ͯͩ͘͠͞ w طଘͷϨΠΞ΢τʢ7JFXɺϨΠΞ΢τ9.-ʣͱҰॹʹ࢖͑·͢

Jetpack Compose 1.2 新機能 / new features of Jetpa...

Jetpack Compose 1.2 新機能 / new features of Jetpack Compose 1.2

Yuki Anzai

Transcript

͋Μ͍͟Ώ͖ !ZBO[N (PPHMF%FWFMPQFS&YQFSUTGPS"OESPJE גࣜձࣾ΢ϑΟΧ 5FDI'FFE&YQFSUT/JHIUʙϞόΠϧΞϓϦ։ൃಛू +FUQBDL$PNQPTF৽ػೳ

+FUQBDL$PNQPTFͱ͸ w ωΠςΟϒ6ΛϏϧυ͢ΔͨΊͷ"OESPJEͷ࠷৽πʔϧΩοτ w 6Λએݴతʹهड़Ͱ͖Δ w IUUQTEFWFMPQFSBOESPJEDPNKFUQBDLDPNQPTF Row { Image(

+FUQBDL$PNQPTFͷTUBCMFόʔδϣϯ $PNQPTF6*ͳͲ $PNQPTF$PNQJMFS

"OJNBUPSEVSBUJPOTDBMF AnimatedVisibility( visible = editable, enter = fadeIn(tween(1000)) ) {

7FDUPS1BJOUFSBVUPNJSSPSJOH w SFNFNCFS7FDUPS1BJOUFS ͰBVUP.JSSPSʹUSVFΛࢦఆ͢Δͱɺ35- ʢ3JHIUUP-FGUʣϨΠΞ΢τͷͱ͖ʹWFDUPSJNBHFͷද͕ࣔNJSSPSJOH ͞ΕΔ

7FDUPS1BJOUFSBVUPNJSSPSJOH w SFNFNCFS7FDUPS1BJOUFS ʹNBHF7FDUPSΛࢦఆ͢Δ ৔߹͸ɺNBHF7FDUPSͷBVUPNJSSPSઃఆ͕࢖ΘΕΔ w NBUFSJBMJDPOT͸BVUPNJSSPSઃఆ͸GBMTFʹͳ͍ͬͯ ΔͷͰ35-ϨΠΞ΢τͰ΋൓స͠ͳ͍ Image( painter

w SFNFNCFS7FDUPS1BJOUFS ͰWFDUPSͷDPOUFOUΛࢦఆ͢Δ৔߹ɺ BVUP.JSSPSΛઃఆͰ͖Δ Image( painter = rememberVectorPainter( defaultWidth =

w SFNFNCFS"OJNBUFE7FDUPS1BJOUFS Ͱ͸BVUPNJSSPS͕USVFʹͳΔ var atEnd by remember { mutableStateOf(false) }

/FXFBTJOH w &BTFɺ&BTF0VUɺ&BTFOɺ&BTFO0VUɺ w &BTFO4JOFɺ&BTF0VU4JOFɺ&BTFO0VU4JOF w &BTFO$VCJDɺ&BTF0VU$VCJDɺ&BTFO0VU$VCJD w &BTFO2VJOUɺ&BTF0VU2VJOUɺ&BTFO0VU2VJOU w

-B[Z-JTUͷVTFS4DSPMM&OBCMFEύϥϝʔλ w VTFS4DSPMM&OBCMFEʹGBMTFΛࢦఆ͢ΔͱδΣενϟʔͰεΫϩʔϧ͞Εͳ ͘ͳΔ w ಺෦Ͱ͸.PEJ fi FSTDSPMMBCMFͷFOBCMFEΛར༻ LazyColumn( userScrollEnabled

.BHOJGJFS8JEHFU w 4FMFDUJPO$POUBJOFS಺Ͱબ୒ϋϯυϧΛυϥοά͍ͯ͠Δͱ͖ʹ֦େද͕ࣔ ͰΔΑ͏ʹͳͬͨ

.PEJGJFSTZTUFN(FTUVSF&YDMVTJPO w .PEJ fi FSTZTUFN(FTUVSF&YDMVTJPO ͰγεςϜδΣενϟʔ͔Βআ͘ྖҬ ͱͯ͠ࢦఆͰ͖Δ Spacer( modifier =

-B[ZMJTUܥͷJUFNͷDPOUFOU5ZQF w -B[Z$PMVNOɺ-B[Z3PXɺ-B[Z7FSUJDBM(SJEͷJUFNʹDPOUFOUUZQFΛࢦ ఆͰ͖ΔΑ͏ʹͳͬͨ w DPOUFOUUZQF͝ͱʹ࠷େݸ·ͰDPNQPOFOU͕࠶ར༻ͷͨΊʹ࢒Δ LazyColumn { items( count

%PXOMPBEBCMF'POUʢBTZODGPOUMPBEJOHʣ w (PPHMFGPOUΛ࢖͏৔߹͸lBOESPJEYDPNQPTFVJVJUFYUHPPHMFGPOUT DPNQPTF@WFSTJPO͕ඞཁ Text( text = "Hello Android", fontSize

-B[Z-BZPVU w -B[Z$PMVNO΍-B[Z3PXͷϕʔεػೳ͕ -B[Z-BZPVUDPNQPTBCMFͱͯ͠·ͱΊΒΕͨ w ಠࣗͷ഑ஔͷ-B[ZMJTUΛ࡞Δ͜ͱ͕Մೳʹ

5FYU4UZMFɺ4QBO4UZMFͷ#SVTIରԠ Text( "Brush is awesome\nBrush is awesome\nBrush is awesome", style

$IJQɺ'JMUFS$IJQDPNQPTBCMF Chip(onClick = { … }) { Text("Android") } var

5FYU'JFME%FDPSBUJPO#PYɺ0VUMJOFE5FYU'JFME%FDPSBUJPO#PY w ಠࣗͷݟͨ໨ͷೖྗϑΥʔϜΛ࡞Δʹ͸ #BTJD5FYU'JFMEΛ࢖͏ BasicTextField( value = value, onValueChange =

BasicTextField( … decorationBox = { TextFieldDefaults.TextFieldDecorationBox( value = value, innerTextField

NPWBCMF$POUFOU0G w DPNQPTBCMFMBNCEBΛSFNFNCFS͢Δ͜ͱͰɺ DPNQPTFUSFFͷதͰ৔ॴ͕มΘͬͯ΋࠶ίϯϙ δγϣϯ͞Εͳ͍͘͠Έ w Ͱ௥Ճ͞ΕΔ-PPLBIFBE-BZPVUͱ૊Έ߹ ΘͤΔͱ4IBSFEUSBOTJUJPO͕ՄೳʹͳΔ CFUB

QMVSBM4USJOH3FTPVSDF <resources> <plurals name="item_count"> <item quantity="one">%1$d count</item> <item quantity="other">%1$d counts</item>

8JOEPX*OTFUT w ͍··Ͱ͸"DDPNQBOJTUͷJOTFUTϥΠϒϥϦΛ࢖͏ͷ͕σϑΝΫτͩͬͨ ͕ɺಉ౳ͷػೳ͕ຊମʹऔΓࠐ·Εͨ w "DDPNQBOJTUͷJOTFUTϥΠϒϥϦ͸EFQSFDBUFE w .JHSBUJPOHVJEFIUUQTHPPHMFHJUIVCJPBDDPNQBOJTUJOTFUT

8JOEPXOTFUTΛQBEEJOHͱͯ͠औಘ͢Δ 8JOEPXOTFUTΛXJEUIIFJHIUͱͯ͠औಘ͢Δ val paddingValue: PaddingValues = WindowInsets.statusBars.asPaddingValues() val modifier1 =

8JOEPX*OTFUTΛՃ޻͢Δ val insets1: WindowInsets = WindowInsets.safeDrawing.add(WindowInsets(bottom = 24.dp)) val insets2:

όάमਖ਼ w $+,ΩʔϘʔυͰόοΫεϖʔε ௕ԡ͠ͰจࣈΛ࿈ଓফڈͰ͖ΔΑ ͏ʹͳͬͨ w UFYU fi FMEؒΛϑΥʔΧε͕Ҡಈ͢ Δͱ͖ʹTPGULFZCPBSEJOQVU

'PDVTॲཧվળ w .PEJ fi FSGPDVT(SPVQ w -B[Z$PMVNOɺ-B[Z3PXͰGPDVTҠ ಈʹΑΔεΫϩʔϧʹରԠ w

·ͱΊ w $PNQPTFͰ͍Ζ͍Ζվળ͠·ͨ͠ w -B[Z-JTUؔ܎ w 8JOEPX*OTFUT w ೖྗϑΥʔϜɺϑΥʔΧεपΓ w

More Decks by Yuki Anzai

Other Decks in Technology

Featured