iOSのCorner Rounding Strategy

CALayerのcornerRadiusはやめよう。ハイパフォーマンスなCorner Roundingを実現するためのtipsになります。

potatotips #44 2017/10/25
https://potatotips.connpass.com/event/68024/

Transcript

1. iOSͷCorner Rounding Strategy גࣜձࣾΤ΢ϨΧ ୮ɹढ़وʢShunki Tanʣ potatotips #44 2017/10/25
2. ୮ɹढ़وʢShunki Tanʣ Lead Engineer iOS͕ಘҙ - 3೥൒ Scrum Master PairsͰ8ϲ݄ Framework UIKit @shunkit @shunkitan
3. ࠓ೔࿩͢͜ͱ
5. ϋΠύϑΥʔϚϯεͳCorner Roundingͷ࿩
6. ιʔε͸TextureͷυΩϡϝϯτ http://texturegroup.org/docs/corner-rounding.html
7. imageView.layer.cornerRadius = 20 CALayerͷcornerRadius͸"
8. CALayerͷcornerRadius ຖϑϨʔϜͰCornerͷΫϦοϓॲཧͷͨΊʹɺΦϑεΫϦʔϯϨϯμϦϯ ά͕ൃੜ͢Δ ɾLayerͷίϯςϯπ͕Կ΋มΘͬͯͳͯ͘΋ ɾશવؔ܎ͳ͍View͕Ξχϝʔγϣϯͨ͠ΓɺεΫϩʔϧͨ͠ͱ͖ʹ
9. cornerRadius͸ۃྗ΍ΊΑ͏
10. ඞཁͳߟ͑ํ - ͲΜͳCornerʁ Cornerͷ಺ଆͰ εΫϩʔϧͰ͖Δ CornerͷཪଆͰ εΫϩʔϧͰ͖Δ
11. ඞཁͳߟ͑ํ - ͲΜͳCornerʁ Corner͕ ෳ਺ͷViewʹ ඃ͍ͬͯΔ Corner͕ ̍ͭͷViewʹ ඃ͍ͬͯΔ
12. Corner Roundingϑϩʔνϟʔτ
13. Cornerͷ಺ଆͰεΫϩʔϧ͢Δʁ CornerͷཪଆͰ εΫϩʔϧ͢Δʁ YES NO 4ͭͷCorner͕̍ͭͷViewʹ ඃ͍ͬͯΔ YES NO CornerͷཪଆͰεΫϩʔϧ͢Δʁ YES NO ̍. എܠෆಁ໌Clipը૾ ̎. എܠಁ໌Clipը૾ YES NO ̏. ViewΛ্͔ΒඃͤΔ ̐. Corner Radius
14. ̍൪ϋΠύϑΥʔϚϯεͳํ๏ CGContext / UIGraphicsContextͰɺ PathΛ࢖ͬͯը૾Λؙ͘ΫϦοϓ͢Δɻഎܠ͸ϕλృΓʢෆಁ໌ʣɻ ന͍෦෼΋ը૾ͷҰ෦
15. ̎൪໨ʹϋΠύϑΥʔϚϯεͳํ๏ CGContext / UIGraphicsContextͰɺ PathΛ࢖ͬͯը૾Λؙ͘ΫϦοϓ͢Δɻഎܠ͸ಁ໌ɻ ಁ໌ͳ෦෼΋ը૾ͷҰ෦
16. ̏൪໨ʹϋΠύϑΥʔϚϯεͳํ๏ ͚֯ͩͷViewΛ༻ҙͯ͠ɺ্͔ΒඃͤΔ ɾCorner͕̎ͭҎ্ͷViewʹ͔͔͍ͬͯΔͱ͖ ɾCornerͷ಺ଆ͕εΫϩʔϧ͢Δͱ͖
17. ԞͷखͰCALayerͷcornerRadius εΫϩʔϧ΍Ξχϝʔγϣϯͷͳ͍੩తͳը໘ͳΒڐͦ͏ɻ ΋͘͠͸ɺcornerRadiusࣗମΛΞχϝʔγϣϯ͍ͨ͠ͱ͔
18. Cornerͷ಺ଆͰεΫϩʔϧ͢Δʁ CornerͷཪଆͰ εΫϩʔϧ͢Δʁ YES NO 4ͭͷCorner͕̍ͭͷViewʹ ඃ͍ͬͯΔ YES NO CornerͷཪଆͰεΫϩʔϧ͢Δʁ YES NO ̍. എܠෆಁ໌Clipը૾ ̎. എܠಁ໌Clipը૾ YES NO ̏. ViewΛ্͔ΒඃͤΔ ̐. Corner Radius
19. Thank you!! @shunkit @shunkitan