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

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

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ͱ͸ 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) } }
  2. "OJNBUPSEVSBUJPOTDBMF AnimatedVisibility( visible = editable, enter = fadeIn(tween(1000)) ) {

    Spacer( modifier = Modifier .size(100.dp) .background(Color.Blue) ) }
  3. 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) )
  4. 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 } )
  5. /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
  6. .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 ) ) } )
  7. %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, ) ) ) )
  8. 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 ) )
  9. $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") }
  10. 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() } } )
  11. 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 ) )
  12. 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))
  13. 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)
  14. 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)
  15. ·ͱΊ w $PNQPTFͰ͍Ζ͍Ζվળ͠·ͨ͠ w -B[Z-JTUؔ܎ w 8JOEPX*OTFUT w ೖྗϑΥʔϜɺϑΥʔΧεपΓ w

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