Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Render Loop

Render Loop

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

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

USAMI Kosuke

August 12, 2021
Tweet

More Decks by USAMI Kosuke

Other Decks in Programming

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