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

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

Yuki Anzai
September 07, 2022

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

Yuki Anzai

September 07, 2022
Tweet

More Decks by Yuki Anzai

Other Decks in Technology

Transcript

  1. +FUQBDL$PNQPTF৽ػೳ ͋Μ͍͟Ώ͖ !ZBO[N  (PPHMF%FWFMPQFS&YQFSUTGPS"OESPJE גࣜձࣾ΢ϑΟΧ

  2. +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) } }
  3. +FUQBDL$PNQPTFͷTUBCMFόʔδϣϯ $PNQPTF6*ͳͲ $PNQPTF$PNQJMFS       

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

    Spacer( modifier = Modifier .size(100.dp) .background(Color.Blue) ) }
  5. 7FDUPS1BJOUFSBVUPNJSSPSJOH w SFNFNCFS7FDUPS1BJOUFS ͰBVUP.JSSPSʹUSVFΛࢦఆ͢Δͱɺ 35-ʢ3JHIUUP-FGUʣϨΠΞ΢τͷͱ͖ʹWFDUPSJNBHFͷද͕ࣔ NJSSPSJOH͞ΕΔ

  6. 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) )
  7. 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) )
  8. 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 } )
  9. /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
  10. -B[Z-JTUͷVTFS4DSPMM&OBCMFEύϥϝʔλ w VTFS4DSPMM&OBCMFEʹGBMTFΛࢦఆ͢ΔͱδΣενϟʔͰεΫϩʔϧ͞Εͳ ͘ͳΔ w ಺෦Ͱ͸.PEJpFSTDSPMMBCMFͷFOBCMFEΛར༻ LazyColumn( userScrollEnabled = checked,

    modifier = Modifier.fillMaxSize() ) { … }
  11. .BHOJGJFS8JEHFU w 4FMFDUJPO$POUBJOFS಺Ͱબ୒ϋϯυϧΛυϥοά͍ͯ͠Δͱ͖ʹ֦େද͕ࣔ ͰΔΑ͏ʹͳͬͨ

  12. .PEJGJFSTZTUFN(FTUVSF&YDMVTJPO w .PEJpFSTZTUFN(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 ) ) } )
  13. -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(…) } } }
  14. %PXOMPBEBCMF'POUʢBTZODGPOUMPBEJOHʣ w (PPHMFGPOUΛ࢖͏৔߹͸lBOESPJEYDPNQPTFVJVJUFYUHPPHMFGPOUT [email protected]͕ඞཁ 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, ) ) ) )
  15. -B[Z-BZPVU w -B[Z$PMVNO΍-B[Z3PXͷϕʔεػೳ͕ -B[Z-BZPVUDPNQPTBCMFͱͯ͠·ͱΊΒΕͨ w ಠࣗͷ഑ஔͷ-B[ZMJTUΛ࡞Δ͜ͱ͕Մೳʹ

  16. 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 ) )
  17. $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") }
  18. 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() } } )
  19. 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 ) )
  20. NPWBCMF$POUFOU0G w DPNQPTBCMFMBNCEBΛSFNFNCFS͢Δ͜ͱͰɺ DPNQPTFUSFFͷதͰ৔ॴ͕มΘͬͯ΋࠶ίϯϙ δγϣϯ͞Εͳ͍͘͠Έ w Ͱ௥Ճ͞ΕΔ-PPLBIFBE-BZPVUͱ૊Έ߹ ΘͤΔͱ4IBSFEUSBOTJUJPO͕ՄೳʹͳΔ CFUB

  21. 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))
  22. 8JOEPX*OTFUT w ͍··Ͱ͸"DDPNQBOJTUͷJOTFUTϥΠϒϥϦΛ࢖͏ͷ͕σϑΝΫτͩͬͨ ͕ɺಉ౳ͷػೳ͕ຊମʹऔΓࠐ·Εͨ w "DDPNQBOJTUͷJOTFUTϥΠϒϥϦ͸EFQSFDBUFE w .JHSBUJPOHVJEFIUUQTHPPHMFHJUIVCJPBDDPNQBOJTUJOTFUT

  23. 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)
  24. 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)
  25. όάमਖ਼ w $+,ΩʔϘʔυͰόοΫεϖʔε ௕ԡ͠ͰจࣈΛ࿈ଓফڈͰ͖ΔΑ ͏ʹͳͬͨ w UFYUpFMEؒΛϑΥʔΧε͕Ҡಈ͢ Δͱ͖ʹTPGULFZCPBSEJOQVU UZQF͕Ұॠ੾ΓସΘΔڍಈ͕ͳ͘ ͳͬͨ

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

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

    ·ͩ+FUQBDL$PNQPTFΛಋೖ͍ͯ͠ͳ͍ͳΒɺͥͻಋೖ͍ͯͩ͘͠͞ w طଘͷϨΠΞ΢τʢ7JFXɺϨΠΞ΢τ9.-ʣͱҰॹʹ࢖͑·͢