CustomView in Kotlin @ potatotips #42

potatotips #42にて発表したKotlinでCustomViewを作る話のスライドです。

Transcript

1. $VTUPN7JFXJO,PUMJO
   :PTIJIJSP8BEBBLB!FEPLVQ
   QPUBUPUJQT!$PPLQBE *OD
   

   View Slide

2. ୭΍ͶΜ͓લ
   :PTIJIJSP8BEB
   Ɠ $ZCFS"HFOU *OD
   "EUFDI4UVEJP"*.FTTFOHFS
   !FEPLVQ
   ȍ FEPLVQ
   FEPLVQ
   ,PUMJO ྺ ϲ݄
   

   View Slide

3. ,PUMJO ྺ ϲ݄
   ୭΍ͶΜ͓લ
   :PTIJIJSP8BEB
   Ɠ $ZCFS"HFOU *OD
   "EUFDI4UVEJP"*.FTTFOHFS
   !FEPLVQ
   ȍ FEPLVQ
   FEPLVQ
   

   View Slide

4. ࠓճ࿩͢͜ͱ
   ⋆ ,PUMJO Ͱ $VTUPN7JFX Λ࡞੒͢Δ
   ? ίϯετϥΫλ͸Ͳ͏ͳΔʜʁ
   ? +BWB ͔ΒݺͿࡍʹ͸ʜʁ
   ? $BMMCBDL ͸Ͳ͏͢Ε͹ʜʁ
   

   View Slide

5. $POTUSVDUPS
   QVCMJDDMBTT$VTUPN7JFXFYUFOET7JFX\
   QVCMJD$VTUPN7JFX $POUFYUDPOUFYU
   \
   TVQFS DPOUFYU
   
   JOJU
   
   ^
   QVCMJD$VTUPN7JFX $POUFYUDPOUFYU !/VMMBCMF"UUSJCVUF4FUBUUST
   \
   TVQFS DPOUFYU BUUST
   
   JOJU
   
   ^
   QVCMJD$VTUPN7JFX $POUFYUDPOUFYU !/VMMBCMF"UUSJCVUF4FUBUUST
   JOUEFG4UZMF"UUS
   \
   TVQFS DPOUFYU BUUST EFG4UZMF"UUS
   
   JOJU
   
   ^
   QSJWBUFWPJEJOJU
   \
   JOJUJBMJ[F
   ^
   NFUIPET
   ^
   ⋆ ී௨ͷ $POTUSVDUPS
   

   View Slide

6. $POTUSVDUPS
   DMBTT$VTUPN7JFX7JFX\
   DPOTUSVDUPS DPOUFYU$POUFYU
   TVQFS DPOUFYU
   
   DPOTUSVDUPS
   DPOUFYU$POUFYU BUUST"UUSJCVUF4FU
   
   TVQFS DPOUFYU BUUST
   
   DPOTUSVDUPS
   DPOUFYU$POUFYU
   BUUST"UUSJCVUF4FU
   EFG4UZMF"UUS*OU
   
   TVQFS DPOUFYU BUUST EFG4UZMF"UUS
   
   JOJU\
   JOJUJBMJ[F
   ^
   NFUIPET
   ^
   ⋆ ,PUMJO Ͱ JOJU ϒϩοΫΛ࢖ͬͯΈΔ
   TFDPOEFSZ
   DPOTUSVDUPST
   

   View Slide

7. $POTUSVDUPS
   DMBTT$VTUPN7JFX!+WN0WFSMPBETDPOTUSVDUPS
   DPOUFYU$POUFYU
   BUUST"UUSJCVUF4FU OVMM
   EFG4UZMF"UUS*OU
   
   7JFX DPOUFYU BUUST EFG4UZMF"UUS
   \
   JOJU\
   JOJUJBMJ[F
   ^
   NFUIPET
   ^
   ⋆ σϑΥϧτҾ਺Λ࢖ͬͯΈΔ
   QSJNBSZ
   DPOTUSVDUPS
   

   View Slide

8. $POTUSVDUPS
   DMBTT$VTUPN7JFX!+WN0WFSMPBETDPOTUSVDUPS
   DPOUFYU$POUFYU
   BUUST"UUSJCVUF4FU OVMM
   EFG4UZMF"UUS*OU
   
   7JFX DPOUFYU BUUST EFG4UZMF"UUS
   \
   JOJU\
   JOJUJBMJ[F
   ^
   NFUIPET
   ^
   ⋆ σϑΥϧτҾ਺Λ࢖ͬͯΈΔ
   QSJNBSZ
   DPOTUSVDUPS
   

   View Slide

9. !+WN0WFSMPBET Ξϊςʔγϣϯ
   ⋆ +BWB ༻ͷ 0WFSMPBENFUIPE Λ࡞ͬͯ͘ΕΔ
   +BWB ͔Β͸σϑΥϧτҾ਺͸ࢀরͰ͖ͳ͍ɻ
   /P4VDI.FUIPE&YDFQUJPO Λు͔ΕΔ
   !+WN0WFSMPBETΞϊςʔγϣϯΛ௥Ճ͢Δͱ
   +BWB ͔Βݟͨͱ͖ʹϝιου͕ଟॏఆٛ͞ΕΔ
   ,PUMJO ͔Β "OESPJE4UVEJP ͷ *OUFOTJPO Ͱ
   !+WN0WFSMPBET ͳίϯετϥΫλΛ
   ࡞ͬͯ͘ΕΔΑ͏ʹ
   "EE"OESPJE7JFXDPOTUSVDUPSTVTJOH!+WN0WFSMPBET
   

   View Slide

10. $BMMCBDL
    QVCMJDDMBTT-JTUFOFS4BNQMF7JFXFYUFOET7JFX\
    QSJWBUF$BMMCBDLDBMMCBDL
    QVCMJDWPJEIPHF
    \
    JG DBMMCBDLOVMM
    SFUVSO
    DBMMCBDLPO)PHF
    
    ^
    QVCMJDJOUFSGBDF$BMMCBDL\
    QVCMJDWPJEPO)PHF
    
    ^
    ^
    QVCMJDDMBTT.BJO"DUJWJUZFYUFOET"QQ$PNQBU"DUJWJUZ
    JNQMFNFOUT-JTUFOFS4BNQMF7JFX$BMM#BDL\
    !0WFSSJEF
    QVCMJDWPJEPO)PHF
    \
    DBMMCBDLT
    ^
    ^
    ⋆ ී௨ͷϦεφʔύλʔϯ
    

    View Slide

11. $BMMCBDL
    DMBTT-JTUFOFS4BNQMF7JFX7JFX\
    QSJWBUFWBSDBMMCBDL$BMMCBDL OVMM
    QSJWBUFGVOIPHF
    \
    DBMMCBDL PO)PHF
    TBGFDBMM
    ^
    JOUFSGBDF$BMMCBDL\
    GVOPO)PHF
    
    ^
    ^
    DMBTT.BJO"DUJWJUZ"QQ$PNQBU"DUJWJUZ
    
    -JTUFOFS4BNQMF7JFX$BMMCBDL\
    PWFSSJEFGVOPO)PHF
    \
    DBMMCBDLT
    ^
    ^
    ⋆ ͦͷ·· ,PUMJO ʹͯ͠ΈΔ
    

    View Slide

12. $BMMCBDL
    DMBTT-JTUFOFS4BNQMF7JFX7JFX\
    㕉ᡔә◌क✖ԒԾԠԏԗ԰ӔӘӑӇӘӨӨՉ՛ԸӕᛝӉӅӳӶӵ
    WBSPO)PHF
    6OJU
    OVMM
    QSJWBUFGVOIPHF
    \
    PO)PHF JOWPLF
    
    ^
    ^
    DMBTT.BJO"DUJWJUZ"QQ$PNQBU"DUJWJUZ
    \
    PWFSSJEFGVOPO$SFBUF TBWFE*OTUBODF4UBUF#VOEMF
    \
    MJTUFOFS4BNQMF7JFXPO)PHF\
    DBMMCBDLT
    ^
    ^
    ^
    ⋆ ؔ਺Ϧςϥϧͱ JOWPLF Ͱ -JTUFOFS ͕ෆཁʹ
    

    View Slide

13. $BMMCBDL
    QVCMJDDMBTT+BWB.BJO"DUJWJUZFYUFOET"QQ$PNQBU"DUJWJUZ\
    !0WFSSJEF
    QSPUFDUFEWPJEPO$SFBUF
    !/VMMBCMF#VOEMFTBWFE*OTUBODF4UBUF
    \
    MJTUFOFS4BNQMF7JFXTFU0O)PHF OFX'VODUJPO6OJU
    \
    !0WFSSJEF
    QVCMJD6OJUJOWPLF
    \
    DBMMCBDLT
    SFUVSOOVMM
    ^
    ^
    
    ^
    ^
    ⋆ +BWB Ͱѻ͏ͱ͖͸ 'VODUJPO/ ΛҾ਺ʹ༩͑Δ
    'VODUJPO/
    㮢/ әᐠᡔӘંᡔ㮣
    ୤ә ,PUMJO Ә㕉ᡔѭ
    6OJU ӔӴ OVMM Ӽ㈘Ӄ
    

    View Slide

14. $BMMCBDL
    ⋆ Ҿ਺͕ଟ͘ͳͬͨͱ͖Λߟ͑Δ
    ⋆ ֦େɾॖখɾεΫϩʔϧͰ͖Δ *NBHF7JFX
    Ͱഒ཰΍࠲ඪɺ͸Έग़͠஋౳Λ௨஌ͯ͠΄͍͠
    WBSPO$IBOHF4UBUF
    TDBMF'MPBU
    Y'MPBU
    Z'MPBU
    PWFS9*OU
    PWFS:*OU
    6OJU
    
    OVMM
    

    View Slide

15. $BMMCBDL
    ⋆ +BWB ίʔυͰ͸ඇৗʹ௕͍ 'VODUJPO ʹͳΔ
    ⋆ ิ׬Ͱࣗಈੜ੒͢ΔͱҾ਺໊͕Ṗ
    IPHF7JFXTFU0O$IBOHF4UBUF
    OFX'VODUJPO'MPBU 'MPBU 'MPBU *OUFHFS *OUFHFS 6OJU
    \
    !0WFSSJEF
    QVCMJD6OJUJOWPLF 'MPBUB'MPBU
    'MPBUB'MPBU
    'MPBUB'MPBU
    *OUFHFSJOUFHFS
    *OUFHFSJOUFHFS
    \
    SFUVSOOVMM
    ^
    ^
    
    ⧞௻ӑᥨҷᝪҲӵӘәǘ
    

    View Slide

16. $BMMCBDL
    IPHF7JFXPO$IBOHF4UBUF\
    䖕 GM'MPBU
    GM'MPBU
    GM'MPBU
    J*OU
    J*OU\⧞ಌ⇰ᘻҿӶӉᐠᡔൻ
    
    GVODUJPOT
    ^
    ^
    ⋆ ,PUMJO Ͱ΋ *OUFOTJPO ͨ࣌͠ͷҾ਺໊͕ʜ
    +BWB ӘӒҷӲӴ㗾ӕӔӍӉǘ㮹
    

    View Slide

17. $BMMCBDL ʹ͍ͭͯࢥ͏͜ͱ
    ⋆ ؔ਺ϦςϥϧͰϦεφʔύλʔϯഉআ͸Ͱ͖Δ
    ⋆ ϦεφʔύλʔϯΛ࢖ͬͨ΄͏͕ϝϯςφϯε
    ͠΍͍͢έʔε͸͍ͬͺ͍͋Γͦ͏
    ෳ਺ͷҾ਺͕ଘࡏ͢Δͱ͖
    ଟ਺ͷίʔϧόοΫؔ਺Λ࣋ͭͱ͖
    ⋆ ٯʹར༻ͨ͠ํ͕ྑͦ͞͏ͳέʔε΋͋Γͦ͏
    ඞͣఆٛ͢Δඞཁͷͳ͍ίʔϧόοΫ͕͋Δ࣌
    FH(FTUVSF%FUFDUPS(FTUVSF-JTUFOFS ͷ಺
    μϒϧλοϓͷݕ஌͚ͩར༻͍ͨ͠ɺͱ͔
    

    View Slide

18. ࢀߟจݙ
    ⋆ +BWB ͔Βͷར༻Λࢹ໺ʹೖΕͨ ,PUMJO ίʔυͰ
    ԿΛ͢Δ΂͖͔2JJUB
    IUUQRJJUBDPNKNBUTVJUFNTDCBBDCDCG
    ⋆ +BWB,PUMJO ࠞ߹ϓϩδΣΫτͰؾΛ͚͍ͭͯΔ͜ͱɻ
    IUUQMWMBIBUFOBCMPHDPNFOUSZ
    ⋆ ,PUMJO ͰίʔϧόοΫ2JJUB
    IUUQRJJUBDPN""LJSB!HJUIVCJUFNTFCBBFFECED
    

    View Slide