Save 37% off PRO during our Black Friday Sale! »

Jetpack Compose Canvas入門

Jetpack Compose Canvas入門

E6d26a51159a7863cac28e9d12ccd389?s=128

rmakiyama

June 23, 2021
Tweet

Transcript

  1. +FUQBDL$PNQPTF 
 $BOWBTೖ໳ potatotips #74 2021/06/23 Ryo Makiyama

  2. w ຀ࢁྎ w 3BEJPUBMLגࣜձࣾ w "OESPJEΤϯδχΞ w!@SNBLJZBNB wSNBLJZBNB ࣗݾ঺հ

  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