9-patchで画像の一部分を伸縮させる

Shibuya.apk#51で発表した内容です！

Transcript

1. 4IPHP
   5BLBTBLJ
   4IJCVZBBQL
    QBUDIͰը૾ͷ
   Ұ෦෼Λ৳ॖͤ͞Δ
2. ࣗݾ঺հ w 4IPHP
   5BLBTBLJ
   w "OESPJEΤϯδχΞ
   w ৽ଔ!%F/"
   1PDPDIB
3. ϝοηʔδΞϓϦͰΑ͘ݟΔ6* w ςΩετྖҬʹԠͯ͡ਧ͖ग़͕͠৳ॖ
4. ϝοηʔδΞϓϦͰΑ͘ݟΔ6* w ςΩετྖҬʹԠͯ͡ਧ͖ग़͕͠৳ॖ
   w
   ෦෼తʹ৳ͼͯཉ͍͠ʂ
5. 1/(ϑΝΠϧΛར༻͢Δ৔߹ w 1/(Λͦͷ··࢖͏ͱʜ
6. 1/(ϑΝΠϧΛར༻͢Δ৔߹ w ը૾શମ͕ۉҰʹ৳ॖ
7. 1/(ϑΝΠϧΛར༻͢Δ৔߹ ཧ૝ ݱ࣮
8. 1/(ϑΝΠϧΛར༻͢Δ৔߹ w ը૾શମ͕ۉҰʹ৳ॖ
   w 5BJM෦෼ͷ6*่͕ΕΔ
9. 1/(ϑΝΠϧΛར༻͢Δ৔߹ w ը૾શମ͕ۉҰʹ৳ॖ
   w 5BJM෦෼ͷ6*่͕ΕΔ
   w ԑͷತԜ͕ڧௐ
10. ը૾Λ៉ྷʹ৳ॖͤ͞Δํ๏ w ෳࡶͳॲཧΛॻ͘ඞཁ͕͋Γͦ͏
    w ը૾ॲཧ΋ඞཁ͔΋ʜ େมͦ͏ʜ
11. ը૾Λ៉ྷʹ৳ॖͤ͞Δํ๏ w ෳࡶͳॲཧΛॻ͘ඞཁ͕͋Γͦ͏
    w ը૾ॲཧ΋ඞཁ͔΋ʜ
    w QBUDIը૾Ͱ؆୯ʹղܾʂ
12. QBUDIը૾ͱ͸ w ը૾ͷपғϐΫηϧʹ৘ใΛຒΊࠐΜͩ
    QOHϑΝΠϧ
    w ্ลɿਫฏํ޲ͷ৳ॖྖҬ
    w ࠨลɿਨ௚ํ޲ͷ৳ॖྖҬ
    w ఈลɿਫฏํ޲ͷίϯςϯπྖҬ
    w ӈลɿਨ௚ํ޲ͷίϯςϯπྖҬ QBUDIը૾ͷ֓ཁ
    
    ը૾Ҿ༻
    IUUQTEFWFMPQFSBOESPJEDPNEFWFMPQVJ WJFXTHSBQIJDTESBXBCMFTOJOFQBUDI
13. QBUDIը૾ͷ࡞Γํ w "OESPJE
    4UVEJPͰ࡞੒Մೳʂ
    
    ը૾ΛӈΫϦοΫ
    ˠ
    $SFBUF
    QBUDI
    pMF
14. QBUDIը૾ͷ࡞Γํ w "OESPJE
    4UVEJPͰ࡞੒Մೳʂ
    
    ը૾ΛӈΫϦοΫ
    ˠ
    $SFBUF
    QBUDI
    pMF
    
    (6*Ͱ৳ॖྖҬΛఆٛ
    w ྘ɿҰํ޲
    w ϐϯΫɿೋํ޲
    
15. QBUDIը૾ͷ࡞Γํ w "OESPJE
    4UVEJPͰ࡞੒Մೳʂ
    
    ը૾ΛӈΫϦοΫ
    ˠ
    $SFBUF
    QBUDI
    pMF
    
    (6*Ͱ৳ॖྖҬΛఆٛ
    w ྘ɿҰํ޲
    w ϐϯΫɿೋํ޲
    ਨ௚ํ޲ʹ͔͠৳ͼͳ͍
16. QBUDIը૾ͷ࡞Γํ w "OESPJE
    4UVEJPͰ࡞੒Մೳʂ
    
    ը૾ΛӈΫϦοΫ
    ˠ
    $SFBUF
    QBUDI
    pMF
    
    (6*Ͱ৳ॖྖҬΛఆٛ
    w ྘ɿҰํ޲
    w ϐϯΫɿೋํ޲
    มԽ͠ͳ͍
17. QBUDIը૾ͷදࣔ w #PYͷഎܠʹQBUDIը૾Λઃఆ fun Modifier.draw9Patch( context: Context, @DrawableRes ninePatchRes: Int, ) = this.drawBehind { drawIntoCanvas { ContextCompat.getDrawable(context, ninePatchRes)?.let { ninePatch -> ninePatch.run { bounds = Rect(0, 0, size.width.toInt(), size.height.toInt()) draw(it.nativeCanvas) } } } } QBUDIը૾Λഎܠʹඳը͢Δ.PEJpFSͷ֦ுؔ਺
18. QBUDIը૾ͷදࣔ w #PYͷഎܠʹQBUDIը૾Λઃఆ fun Modifier.draw9Patch( context: Context, @DrawableRes ninePatchRes: Int, ) = this.drawBehind { drawIntoCanvas { ContextCompat.getDrawable(context, ninePatchRes)?.let { ninePatch -> ninePatch.run { bounds = Rect(0, 0, size.width.toInt(), size.height.toInt()) draw(it.nativeCanvas) } } } } @Composable fun DynamicSpeechBubble( text: String, @DrawableRes bubbleImageRes: Int, paddingValues: PaddingValues, ) { val context = LocalContext.current Box( Modifier.draw9Patch(context = context, ninePatchRes = bubbleImageRes), ) { Text( text = text, color = Color.Black, modifier = Modifier.padding(paddingValues), ) } }
19. QBUDIը૾ͷ஫ҙ఺ w +FUQBDL
    $PNQPTFͷQBJOUFS3FTPVSDFͰ͸ಡΈࠐΊͳ͍
    w $PJMͷSFNFNCFS"TZOD*NBHF1BJOUFSͰ͸ಡΈࠐΊΔ͕ɺ
    ௨ৗͷ1/(ͱͯ͠ඳը͞ΕΔ
    ˠ
    $BOWBT΍9.-Λ༻͍ͯඳը͢Δ
20. QBUDIը૾ͷ஫ҙ఺ w ը૾ͷੑ࣭ʹΑͬͯ͸ద͞ͳ͍
    w άϥσʔγϣϯը૾ ը૾Ҿ༻
    IUUQT EFWFMPQFSBOESPJEDPNEFWFMPQVJ DPNQPTFHSBQIJDTESBXCSVTI IMKB
21. QBUDIը૾ͷ஫ҙ఺ w ը૾ͷੑ࣭ʹΑͬͯ͸ద͞ͳ͍
    w ܗঢ়͕ෳࡶͳը૾
22. ࢀߟ w IUUQTEFWFMPQFSBOESPJEDPNTUVEJPXSJUFESBXQBUDI
    w IUUQTEFWFMPQFSBOESPJEDPNEFWFMPQVJWJFXTHSBQIJDT ESBXBCMFTOJOFQBUDI
    w IUUQTTUBDLPWFSqPXDPNRVFTUJPOTIPXUPVTFB QBUDIESBXBCMFQOHJONZTDSFFOVTJOHKFUQBDLDPNQPTF