Render Loop

UIレンダリングの仕組みを知る

potatotips #75 iOS/Android開発Tips共有会
https://potatotips.connpass.com/event/218185/

Transcript

1. 6*ϨϯμϦϯάͷ࢓૊Έ
   Λ஌Δ
   Ӊࠤݟެี
   
   1/19
   

   View Slide

2. Ӊࠤݟެีʢ!VTBNJLʣ
   w J04"QQ։ൃ鲠鳫鲰鳃鲚ٕज़ಉਓࢽ鲗ॻ鱉鱫鲃鱞
   2/19
   

   View Slide

3. 5FDI5BMLTͱ͸
   w 88%$鲳鲻鲯鳟鳫Ҏ֎鱰鲇"QQMF鱑ެ։鱜鱫鱉鲐ಈը鱑鱇鲐
   w "QQMF%FWFMPQFS"QQ鲉鲭鲜鳀鱬ݟ鲑鲐
   w 鱢鱳த鱳5FDI5BMLT鱑鱏鲇鱜鲒鱉
   3/19
   

   View Slide

4. ࠓ೔঺հ͢Δ5FDI5BMLT
   w 6*鲚鳃鳙鱅鲯鳟鳫鱳଺鲏鱏鲍鱸鳤鳫鲸鱅鳣鱅鳏鱰ର鱞鲐ݕ౼
   ʢ&YQMPSF6*"OJNBUJPO)JUDIFTBOE5IF3FOEFS-PPQʣ
   w ೥݄鱰ެ։鱚鲑鱤
   w J04"QQ鱳鲱鲧鳥鱅鳣࣌鱳දࣔ鱳鲇鱤鱩鱒鲗վળ鱞鲐ํ๏
   4/19
   

   View Slide

5. )JUDIʢ଺Γʣ
   w 鳍鳤鱅鳘鱑༧ఆ鲍鲏஗鱔දࣔ鱚鲑鲐鱘鱭
   w ӈ鱳ྫ鱴'SBNF鱳දࣔ鱑஗鲑鱤
   w 'SBNF鱳දࣔ鱬Ұॠࢭ鲃鱨鱫ݟ鱍鲐
   5/19
   

   View Slide

6. 3FOEFS-PPQ
   w 鲷鲻鲹鲜鳑鳫鳀鱑"QQ鱰౉鱚鲑鱫鱐鲎
   ඳը鱑ऴ鲔鲐鲃鱬鱳鳏鳥鲳鲱鱳鱘鱭
   w ஈ֊鱰෼鱐鲑鲐
   w 74:/$鱰߹鲔鱠࣌ؒ಺鱰ॲཧ鱑ඞཁ
   w J1IPOFJ1BENTʢ)[ʣ
   w J1BE1SPNTʢ)[ʣ
   6/19
   

   View Slide

7. $PNNJUϑΣʔζ
   w 3FOEFS-PPQ鱳ஈ֊໨
   w 鳤鲜鲚鲞鳀
   w 7JFX鱳ੜ੒鲉഑ஔ
   w layoutSubviews
   w දࣔ
   w 7JFX鱳drawRect
   w 7JFX鱳֊૚ߏ଄鱴อ࣋鱚鲑鲐
   7/19
   

   View Slide

8. 3FOEFSϑΣʔζ
   w 3FOEFS-PPQ鱳ஈ֊໨
   w $PNNJU鱚鲑鱤7JFXߏ଄鲗ɺදࣔը໘
   鱭鱜鱫ඳը鱞鲐
   w 7JFX鱳ॏ鱲߹鲔鱠ɺ鲯鳛鳁鲞ɺ鲚鳃
   鳙鱅鲯鳟鳫鱯鱮
   w 3FOEFSTFSWFS鱴"QQ鱭鱴ผ鳏鳥鲳鲱
   鱥鱑ɺ։ൃऀ鱳੹೚
   8/19
   

   View Slide

9. දࣔ
   w 3FOEFS-PPQ鱳ஈ֊໨
   w 鳤鳫鲸鳢鳫鲨鱚鲑鱤鲇鱳鲗දࣔ
   9/19
   

   View Slide

10. ฒྻ࣮ߦ
    w 3FOEFS-PPQ鱴ฒྻ࣮ߦ鱚鲑鲐
    w 鲸鳎鳣鳈鲻鳍鲙鳢鳫鲨
    w දࣔ鱳ཪ鱬3FOEFS鳍鲟鱅鲲
    w 3FOEFS鱳ཪ鱬$PNNJU鳍鲟鱅鲲
    w ֤鳍鲟鱅鲲鱬੍࣌ؒݶ鲗क鲐ඞཁ鱑鱇鲐
    w क鲎鱯鱉鱭)JUDI鱑ൃੜ鱞鲐
    10/19
    

    View Slide

11. ڐ༰͞ΕΔൣғ
    w )JUDIUJNFSBUJP
    w ඵ鱇鱤鲏ԿNT鱳IJUDI鱑鱇鲐鱐
    w NTT鱑ཧ૝
    w NTTҎԼ鱯鲎(PPE
    w 鱩鲃鲏਺ඵ鱰ճఔ౓鱯鲎େৎ෉
    w 鱢鲑鲗௒鱍鲐鱭ཁௐࠪ
    11/19
    

    View Slide

12. )JUDIͷௐࠪ
    w *OTUSVNFOUT鲗࢖鱨鱫ௐࠪ鱬鱒鲐
    w ӈ鱳ྫ鱬鱴ɺ$PNNJU鳍鲟鱅鲲鱰࣌ؒ鱑
    鱐鱐鱨鱫鱉鲐
    w ۩ମత鱰ԿNT鱐鱐鱨鱫鱉鲐鱐鲇ݟ鲑鲐
    12/19
    

    View Slide

13. ໰୊ͷॲཧΛ୳͢
    w 鱚鲎鱰5JNF1SPpMFS鱬鱮鱳ؔ਺鱬࣌ؒ
    鱑鱐鱐鱨鱫鱉鲐鱐ݟ鲑鲐
    13/19
    

    View Slide

14. ໰୊ͷॲཧΛվળ͢Δ
    w $PMMFDUJPO7JFX$FMM鱬໰୊鱑鱇鱨鱤
    w prepareForReuse鱬ɺ$FMM಺鱳
    7JFX鲗࡟আ鱜鱫ੜ੒鱜鱯鱏鱜鱫鱉鱤
    w 7JFX鲗࠶ར༻鱞鲐鲍鱋มߋ鱞鲑鱵鲍鱉
    14/19
    

    View Slide

15. $PNNJU)JUDIͷճආ
    w લड़鱳)JUDI鱴$PNNJU鳍鲟鱅鲲鱬ൃ
    ੜ鱜鱤
    w $PNNJU鳍鲟鱅鲲鱬ؾ鲗鱩鱖鲐鱾鱒鱘鱭
    鱴ଞ鱰鲇鱇鲐
    w ྫ鳤鲜鲚鲞鳀ߋ৽鱳鱭鱒ɺ
    layoutIfNeeded鱳࢖༻鲗ආ鱖鱫
    setNeedsLayout鱳࢖༻鱑鱏鱞鱞鲆
    15/19
    

    View Slide

16. 0⒎TDSFFO1BTT
    w 3FOEFS鳍鲟鱅鲲鱬࣌ؒ鱑鱐鱐鲐ࣄྫ
    w ӈ鱳ྫ鱬鱴ɺӨ鱳ܗ鲗ௐ鱾鲐鱤鲆鱰ผ鱳
    ৔ॴ鱰ਤܗ鲗ඳը鱜鱫鱉鲐
    16/19
    

    View Slide

17. 3FOEFSͷ໰୊Λൃݟ
    w 9DPEF鱳7JFX%FCVHHFS鱬໰୊Օॴ鱭
    վળํ๏鲗ࢦఠ鱜鱫鱔鲑鲐
    w ӈ鱳ྫ鱬鱴ɺӨ鱳ඳը鱬໰୊鱑ࢦఠ鱚鲑
    鱫鱉鲐
    w վળํ๏鱭鱜鱫shadowPath鱳ࢦఆ鱑
    ఏҊ鱚鲑鱫鱉鲐
    17/19
    

    View Slide

18. ࢦఠՕॴͷվળ
    w ఏҊ鱚鲑鱤鱭鱏鲏shadowPath鲗໌ࣔ
    త鱰ࢦఆ鱞鲐
    w 鱘鲑鱬0GGTDSFFO1BTT鲗ݮ鲎鱜鱫
    3FOEFS鳍鲟鱅鲲鱳ॲཧ࣌ؒ鱑վળ鱜鱤
    18/19
    

    View Slide

19. ࢀߟʢ5FDI5BMLTʣ
    w 6*鲚鳃鳙鱅鲯鳟鳫鱳଺鲏鱏鲍鱸鳤鳫鲸鱅鳣鱅鳏鱰ର鱞鲐ݕ౼
    ʢ&YQMPSF6*"OJNBUJPO)JUDIFTBOE5IF3FOEFS-PPQʣ
    w 鲫鳗鲻鳀鳍鲟鱅鲲鱬鱳଺鲏鲗ݟ鱩鱖मਖ਼鱞鲐ʢ'JOEBOE'JY
    )JUDIFTJOUIF$PNNJU1IBTFʣ
    w 鳤鳫鲸鳢鳫鲨鳍鲟鱅鲲鱬鱳଺鲏鲗ඥղ鱒ഉআ鱞鲐ʢ%FNZTUJGZ
    BOE&MJNJOBUF)JUDIFTJOUIF3FOEFS
    19/19
    

    View Slide