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

TechFeed Experts Night#3 〜 モバイルアプリ開発特集
https://techfeed.io/events/techfeed-experts-night-3

Jetpack Compose 1.2 で追加された新しい機能を紹介します。

Transcript

1. ͋Μ͍͟Ώ͖
   !ZBO[N
   (PPHMF
   %FWFMPQFS
   &YQFSUT
   GPS
   "OESPJE
   גࣜձࣾ΢ϑΟΧ
   5FDI'FFE
   &YQFSUT
   /JHIU
   ʙ
   ϞόΠϧΞϓϦ։ൃಛू +FUQBDL
   $PNQPTF
   
   ৽ػೳ
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
   όʔδϣϯ $PNQPTF
   6*
   ͳͲ $PNQPTF
   $PNQJMFS             
4. "OJNBUPS
   EVSBUJPO
   TDBMF AnimatedVisibility( visible = editable, enter = fadeIn(tween(1000)) ) { Spacer( modifier = Modifier .size(100.dp) .background(Color.Blue) ) }
5. 7FDUPS1BJOUFS
   BVUP
   NJSSPSJOH w SFNFNCFS7FDUPS1BJOUFS
   Ͱ
   BVUP.JSSPS
   ʹ
   USVF
   Λࢦఆ͢Δͱɺ35- ʢ3JHIU
   UP
   -FGUʣ
   ϨΠΞ΢τͷͱ͖ʹ
   WFDUPS
   JNBHF
   ͷද͕ࣔ
   NJSSPSJOH
   ͞ΕΔ
6. 7FDUPS1BJOUFS
   BVUP
   NJSSPSJOH w SFNFNCFS7FDUPS1BJOUFS
   ʹ
   *NBHF7FDUPS
   Λࢦఆ͢Δ ৔߹͸ɺ*NBHF7FDUPS
   ͷ
   BVUP
   NJSSPS
   ઃఆ͕࢖ΘΕΔ
   w NBUFSJBM
   JDPOT
   ͸
   BVUP
   NJSSPS
   ઃఆ͸
   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
   Ͱ͸
   BVUP
   NJSSPS
   ͕
   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. /FX
   FBTJOH 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 ಺෦Ͱ͸
    .PEJ fi FSTDSPMMBCMF
    ͷ
    FOBCMFE
    Λར༻ LazyColumn( userScrollEnabled = checked, modifier = Modifier.fillMaxSize() ) { … }
11. .BHOJGJFS
    8JEHFU w 4FMFDUJPO$POUBJOFS
    ಺Ͱબ୒ϋϯυϧΛυϥοά͍ͯ͠Δͱ͖ʹ֦େද͕ࣔ ͰΔΑ͏ʹͳͬͨ
12. .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 ) ) } )
13. -B[Z
    MJTU
    ܥͷ
    JUFN
    ͷ
    DPOUFOU5ZQF w -B[Z$PMVNOɺ-B[Z3PXɺ-B[Z7FSUJDBM(SJE
    ͷ
    JUFN
    ʹ
    DPOUFOU
    UZQF
    Λࢦ ఆͰ͖ΔΑ͏ʹͳͬͨ
    w DPOUFOU
    UZQF
    ͝ͱʹ࠷େݸ·Ͱ
    DPNQPOFOU
    ͕࠶ར༻ͷͨΊʹ࢒Δ LazyColumn { items( count = 100, contentType = { if (it % 2 == 0) "Button" else "Text" } ) { if (it % 2 == 0) { Button(…) { … } } else { Text(…) } } }
14. %PXOMPBEBCMF
    'POUʢBTZOD
    GPOU
    MPBEJOHʣ w (PPHMF
    GPOU
    Λ࢖͏৔߹͸
    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, ) ) ) )
15. -B[Z-BZPVU w -B[Z$PMVNO
    ΍
    -B[Z3PX
    ͷϕʔεػೳ͕
    -B[Z-BZPVU
    DPNQPTBCMF
    ͱͯ͠·ͱΊΒΕͨ
    w ಠࣗͷ഑ஔͷ
    -B[Z
    MJTU
    Λ࡞Δ͜ͱ͕Մೳʹ
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$IJQ
    DPNQPTBCMF 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 DPNQPTBCMF
    MBNCEB
    Λ
    SFNFNCFS
    ͢Δ͜ͱͰɺ DPNQPTF
    USFF
    ͷதͰ৔ॴ͕มΘͬͯ΋࠶ίϯϙ δγϣϯ͞Εͳ͍͘͠Έ
    w 
    Ͱ௥Ճ͞ΕΔ
    -PPLBIFBE-BZPVU
    ͱ૊Έ߹ ΘͤΔͱ
    4IBSFE
    USBOTJUJPO
    ͕ՄೳʹͳΔ 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 .JHSBUJPO
    HVJEF
    IUUQTHPPHMFHJUIVCJPBDDPNQBOJTUJOTFUT
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 UFYU
    fi FME
    ؒΛϑΥʔΧε͕Ҡಈ͢ Δͱ͖ʹ
    TPGU
    LFZCPBSE
    JOQVU
    UZQF
    ͕Ұॠ੾ΓସΘΔڍಈ͕ͳ͘ ͳͬͨ
26. 'PDVT
    ॲཧվળ w .PEJ fi FSGPDVT(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.-ʣͱҰॹʹ࢖͑·͢