Jetpack Compose Canvas入門

Jetpack ComposeにおけるCanvasコンポーザブルの紹介LT資料です。

▼Links
- https://developer.android.com/jetpack/compose/graphics
- https://developer.android.com/training/custom-views/custom-drawing
- https://developer.android.com/jetpack/compose/animation?hl=ja#rememberinfinitetransition

Transcript

1. +FUQBDL
   $PNQPTF 
 $BOWBTೖ໳ potatotips #74 2021/06/23 Ryo Makiyama
2. w ຀ࢁྎ
   w 3BEJPUBMLגࣜձࣾ
   w "OESPJEΤϯδχΞ
   w
   
   
   
   
   !@SNBLJZBNB
   w
   
   
   
   
   SNBLJZBNB
   
   
   
   
   ࣗݾ঺հ
3. ΞδΣϯμ w ͜Ε·Ͱͷ$BOWBT
   "1*
   w $BOWBTίϯϙʔβϒϧ
   w ͭͬͯ͋ͦ͘΅͏
4. $BOWBTͬͯͳʹʁ w ੲ͔Β͋Δ௿Ϩϕϧͳ"1*
   w ਤܗ΍จࣈΛඳըͰ͖Δ
   w ΧελϜϏϡʔʹΑ͘࢖ΘΕΔ
5. ͜Ε·Ͱͷॻ͖ํ w 7JFXͷPO%SBX ΛΦʔόʔϥΠυ
   w ύϥϝʔλʹ$BOWBTΛड͚औΔ
   w 1BJOUΠϯελϯεΛ࡞੒
   w $BOWBTͷϝιουΛݺͿ
6. ԁΛඳ͍ͯΈΔ🙆 class DrawCircleView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { private val paint = Paint().apply { // ͲͷΑ͏ʹඳը͢Δ͔ color = Color.BLUE } override fun onDraw(canvas: Canvas) { val radius = width.toFloat() / 2 // ԿΛඳը͢Δ͔ canvas.drawCircle( (width / 2).toFloat(), // center x (height / 2).toFloat(), // center y radius, // radius paint // paint ) } }
7. ԁΛඳ͍ͯΈΔ🙆 class DrawCircleView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { private val paint = Paint().apply { // ͲͷΑ͏ʹඳը͢Δ͔ color = Color.BLUE } override fun onDraw(canvas: Canvas) { val radius = width.toFloat() / 2 // ԿΛඳը͢Δ͔ canvas.drawCircle( (width / 2).toFloat(), // center x (height / 2).toFloat(), // center y radius, // radius paint // paint ) } }
8. ԁΛඳ͍ͯΈΔ🙆 class DrawCircleView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { private val paint = Paint().apply { // ͲͷΑ͏ʹඳը͢Δ͔ color = Color.BLUE } override fun onDraw(canvas: Canvas) { val radius = width.toFloat() / 2 // ԿΛඳը͢Δ͔ canvas.drawCircle( (width / 2).toFloat(), // center x (height / 2).toFloat(), // center y radius, // radius paint // paint ) } }
9. ԁΛඳ͍ͯΈΔ🙆 class DrawCircleView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { private val paint = Paint().apply { // ͲͷΑ͏ʹඳը͢Δ͔ color = Color.BLUE } override fun onDraw(canvas: Canvas) { val radius = width.toFloat() / 2 // ԿΛඳը͢Δ͔ canvas.drawCircle( (width / 2).toFloat(), // center x (height / 2).toFloat(), // center y radius, // radius paint // paint ) } }
10. $BOWBTίϯϙʔβϒϧ w PO%SBXϥϜμؔ਺Λ࢖ͬͯඳը
    w Ϩγʔό͕%SBX4DPQFʹͳ͍ͬͯΔ
    w %SBX4DPQFͷϝιουΛݺͿ
    w ैདྷͷ$BOWBTΑΓγϯϓϧʹѻ͑Δ
11. ԁΛඳ͍ͯΈΔ🙆 @Composable fun CircleView() { Canvas(modifier = Modifier.fillMaxSize()) { / / this: DrawScope drawCircle(Color.Blue) } }
12. ԁΛඳ͍ͯΈΔ🙆 @Composable fun CircleView() { Canvas(modifier = Modifier.fillMaxSize()) { / / this: DrawScope drawCircle(Color.Blue) } } ͨͬͨ͜Ε͚ͩ👏
13. $BOWBTίϯϙʔβϒϧ @Composable fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit) = Spacer(modifier.drawBehind(onDraw))
14. %SBX4DPQF w 4J[FͳͲͷศརͳϑΟʔϧυ
    w ͞·͟·ͳඳըؔ਺
    w ESBX$JSDMFESBX-JOFESBX"SDESBX1BUIFUDʜ
    w σϑΥϧτͷύϥϝʔλ஋Λ׆༻
    w ඳըͷ୯७ͳม׵ؔ਺΋׬උ
    w SPUBUFTDBMFUSBOTMBUFFUDʜ
15. ͨͱ͑͹ESBX$JSDMFϝιου fun drawCircle( color: Color, radius: Float = size.minDimension / 2.0f, center: Offset = this.center, /* @FloatRange(from = 0.0, to = 1.0) */ alpha: Float = 1.0f, style: DrawStyle = Fill, colorFilter: ColorFilter? = null, blendMode: BlendMode = DefaultBlendMode )
16. ͭͬͯ͋ͦ͘Ϳ w ؆୯ͳϩʔσΟϯάϏϡʔ
    w ԁΛ̐ͭඳը
    w ͦΕͬΆ͘Ξχϝʔγϣϯ
17. ·ͣ͸ͭԁΛඳ͘ @Composable fun DotLoading( modifier: Modifier = Modifier, dotSize: Dp = 24.dp, dotColor: Color = MaterialTheme.colors.primary, ) { val dotSpace: Dp = dotSize * 0.5f val canvasSize = dotSize * 2 + dotSpace Canvas(modifier = modifier.size(canvasSize)) { val radius = dotSize.toPx() / 2 repeat(4) { index -> rotate(90f * (index - 1)) { drawCircle( color = dotColor, radius = radius, center = Offset(radius, radius) ) } } } }
18. Ξχϝʔγϣϯͷ࣮૷ @Composable fun DotLoading(…) { val dotSpace: Dp = dotSize * 0.5f val offset = with(LocalDensity.current) { (dotSize + dotSpace).toPx() } val infiniteTransition = rememberInfiniteTransition() val xOffset by infiniteTransition.animateFloat( 0f, offset, infiniteRepeatable( animation = tween(durationMillis = 500) ) ) val canvasSize = dotSize * 2 + dotSpace Canvas(modifier = modifier.size(canvasSize)) { val radius = dotSize.toPx() / 2 repeat(4) { index -> rotate(90f * (index - 1)) { drawCircle( color = dotColor, radius = radius, center = Offset(radius + xOffset, radius) ) } } } }
19. Ξχϝʔγϣϯͷ࣮૷ @Composable fun DotLoading(…) { val dotSpace: Dp = dotSize * 0.5f val offset = with(LocalDensity.current) { (dotSize + dotSpace).toPx() } val infiniteTransition = rememberInfiniteTransition() val xOffset by infiniteTransition.animateFloat( 0f, offset, infiniteRepeatable( animation = tween(durationMillis = 500) ) ) val canvasSize = dotSize * 2 + dotSpace Canvas(modifier = modifier.size(canvasSize)) { val radius = dotSize.toPx() / 2 repeat(4) { index -> rotate(90f * (index - 1)) { drawCircle( color = dotColor, radius = radius, center = Offset(radius + xOffset, radius) ) } } } }
20. ·ͱΊ w $BOWBT͕ͱͬͯ΋͔͍ͭ΍͘͢ͳͬͨʂ
    w දݱͷ෯͸͋ͳͨ࣍ୈ😎
    w &OKPZ
    $BOWBT
    -JGF🚀
21. "QQFOEJY w IUUQTEFWFMPQFSBOESPJEDPNKFUQBDLDPNQPTFHSBQIJDT
    w IUUQTEFWFMPQFSBOESPJEDPNUSBJOJOHDVTUPNWJFXTDVTUPNESBXJOH
    w IUUQTEFWFMPQFSBOESPJEDPNKFUQBDLDPNQPTFBOJNBUJPO IMKBSFNFNCFSJO fi OJUFUSBOTJUJPO