iOSのCorner Rounding Strategy

by Shunki Tan

Slide 1

Slide 1 text

iOSͷCorner Rounding Strategy גࣜձࣾΤ΢ϨΧ ୮ɹढ़وʢShunki Tanʣ potatotips #44 2017/10/25

Slide 2

Slide 2 text

୮ɹढ़وʢShunki Tanʣ Lead Engineer iOS͕ಘҙ - 3೥൒ Scrum Master PairsͰ8ϲ݄ Framework UIKit @shunkit @shunkitan

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ϋΠύϑΥʔϚϯεͳCorner Roundingͷ࿩

Slide 6

Slide 6 text

ιʔε͸TextureͷυΩϡϝϯτ http://texturegroup.org/docs/corner-rounding.html

Slide 7

Slide 7 text

imageView.layer.cornerRadius = 20 CALayerͷcornerRadius͸"

Slide 8

Slide 8 text

CALayerͷcornerRadius ຖϑϨʔϜͰCornerͷΫϦοϓॲཧͷͨΊʹɺΦϑεΫϦʔϯϨϯμϦϯ ά͕ൃੜ͢Δ ɾLayerͷίϯςϯπ͕Կ΋มΘͬͯͳͯ͘΋ ɾશવؔ܎ͳ͍View͕Ξχϝʔγϣϯͨ͠ΓɺεΫϩʔϧͨ͠ͱ͖ʹ

Slide 9

Slide 9 text

cornerRadius͸ۃྗ΍ΊΑ͏

Slide 10

Slide 10 text

ඞཁͳߟ͑ํ - ͲΜͳCornerʁ Cornerͷ಺ଆͰ εΫϩʔϧͰ͖Δ CornerͷཪଆͰ εΫϩʔϧͰ͖Δ

Slide 11

Slide 11 text

ඞཁͳߟ͑ํ - ͲΜͳCornerʁ Corner͕ ෳ਺ͷViewʹ ඃ͍ͬͯΔ Corner͕ ̍ͭͷViewʹ ඃ͍ͬͯΔ

Slide 12

Slide 12 text

Corner Roundingϑϩʔνϟʔτ

Slide 13

Slide 13 text

Cornerͷ಺ଆͰεΫϩʔϧ͢Δʁ CornerͷཪଆͰ εΫϩʔϧ͢Δʁ YES NO 4ͭͷCorner͕̍ͭͷViewʹ ඃ͍ͬͯΔ YES NO CornerͷཪଆͰεΫϩʔϧ͢Δʁ YES NO ̍. എܠෆಁ໌Clipը૾ ̎. എܠಁ໌Clipը૾ YES NO ̏. ViewΛ্͔ΒඃͤΔ ̐. Corner Radius

Slide 14

Slide 14 text

̍൪ϋΠύϑΥʔϚϯεͳํ๏ CGContext / UIGraphicsContextͰɺ PathΛ࢖ͬͯը૾Λؙ͘ΫϦοϓ͢Δɻഎܠ͸ϕλృΓʢෆಁ໌ʣɻ ന͍෦෼΋ը૾ͷҰ෦

Slide 15

Slide 15 text

̎൪໨ʹϋΠύϑΥʔϚϯεͳํ๏ CGContext / UIGraphicsContextͰɺ PathΛ࢖ͬͯը૾Λؙ͘ΫϦοϓ͢Δɻഎܠ͸ಁ໌ɻ ಁ໌ͳ෦෼΋ը૾ͷҰ෦

Slide 16

Slide 16 text

̏൪໨ʹϋΠύϑΥʔϚϯεͳํ๏ ͚֯ͩͷViewΛ༻ҙͯ͠ɺ্͔ΒඃͤΔ ɾCorner͕̎ͭҎ্ͷViewʹ͔͔͍ͬͯΔͱ͖ ɾCornerͷ಺ଆ͕εΫϩʔϧ͢Δͱ͖

Slide 17

Slide 17 text

ԞͷखͰCALayerͷcornerRadius εΫϩʔϧ΍Ξχϝʔγϣϯͷͳ͍੩తͳը໘ͳΒڐͦ͏ɻ ΋͘͠͸ɺcornerRadiusࣗମΛΞχϝʔγϣϯ͍ͨ͠ͱ͔