stackViewを使ってボタンをつくった話

by sun54907

Slide 1

Slide 1 text

STACKVIEWΛ࢖ͬͯ ɹϘλϯͭͬͨ͘࿩

Slide 2

Slide 2 text

ςΩετ ࣗݾ঺հ ▸ αϯʢւ઒ ࿨໻ʣ ▸ גࣜձࣾαΠόʔΤʔδΣϯτ ▸ גࣜձࣾϚονϯάΤʔδΣϯτ ▸ @sun54907

Slide 3

Slide 3 text

ςΩετ ͏ͪͷΞϓϦ ▸ λοϓϧ

Slide 4

Slide 4 text

ςΩετ λοϓϧ஀ੜ ▸ 2014೥5݄ϦϦʔε ▸ Swift 95% ▸ Swift 4 ରԠத ▸ ઌʑ݄ʹiOS8Λ੾Γ·ͨ͠

Slide 5

Slide 5 text

ςΩετ ։ൃͷ࿩ ▸ λοϓϧ஀ੜͰ͸ίϯϙʔωϯτԽΛਐΊ͍ͯΔ ▸ ৭΍UIύʔπͷ౷ҰΛਐΊ͍ͯΔ ▸ ن֨Խ͞ΕͨϘλϯΛ࡞Δ͜ͱʹͳͬͨ

Slide 6

Slide 6 text

Ϙλϯͷ࿩

Slide 7

Slide 7 text

ςΩετ Ϙλϯͷཁ݅ ▸ λΠτϧɺλΠτϧࠨͷը૾ɺλΠτϧӈͷը૾͕͋Δ ▸ λΠτϧ৭΍എܠ৭͕਺ύλʔϯଘࡏ͢Δ ▸ ݟͨ໨ͷߴ͕͞28px͘Β͍ͷϘλϯ΋͋Δ ▸ ಺༰ʹ߹Θͤͨ෯ʹͳͬͨΓɺݻఆ෯ʹͳͬͨΓ͢Δ Ϙλϯϥϕϧ Ϙλϯϥϕϧ Ϙλϯϥϕϧ Ϙλϯϥϕϧ ※σβΠϯ͸։ൃதͷ΋ͷͰ͢ɻ࣮ࡍͷ੡඼൛ͱҟͳΔՄೳੑ͕͋Γ·͢

Slide 8

Slide 8 text

ICON BUTTON VIEW https://github.com/sun54907/IconButtonView

Slide 9

Slide 9 text

ςΩετ ࢖͍ํ let buttonView = ComponentButtonView.instantiate( data: .init(text: “Ϙλϯϥϕϧ”), style: .medium(.fill), colorType: .primary ) stackView.addArrangedSubview(buttonView)

Slide 10

Slide 10 text

޻෉ͨ͠ ɹ ϙΠϯτ

Slide 11

Slide 11 text

STACKVIEWͰ WRAP_CONTENT

Slide 12

Slide 12 text

ςΩετ Ϙλϯͷཁ݅ ▸ λΠτϧɺλΠτϧࠨͷը૾ɺλΠτϧӈͷը૾͕͋Δ ▸ λΠτϧ৭΍എܠ৭͕਺ύλʔϯଘࡏ͢Δ ▸ ݟͨ໨ͷߴ͕͞28px͘Β͍ͷϘλϯ΋͋Δ ▸ ಺༰ʹ߹Θͤͨ෯ʹͳͬͨΓɺݻఆ෯ʹͳͬͨΓ͢Δ

Slide 13

Slide 13 text

Slide 14

Slide 14 text

ςΩετ ▸ ಺༰ʹ߹Θͤͨ෯…·͋ɺautoLayoutͰ৭ʑͰ͖Δ͔ͳ… ▸ Ͱ΋ςΩετͱը૾Ͱ࡞Δ͔ΒɺͦΕͧΕ͕͋Δ৔߹ͱͳ͍ ৔߹΋ରԠ͢Δͷ໘౗…

Slide 15

Slide 15 text

ͦΕɺSTACKVIEWͳΒͰ͖ΔΑ

Slide 16

Slide 16 text

ςΩετ STACKVIEWͱ͸ ▸ iOS9͔Β࢖͑Δػೳ ▸ AutoLayout Λઃఆ͢Δ View Λάϧʔϐϯάͯ͠ɺ·ͱΊ ੍ͯ໿Λઃఆ͢Δ͜ͱ͕Ͱ͖Δ ▸ https://qiita.com/yucovin/items/ff58fcbd60ca81de77cb

Slide 17

Slide 17 text

STACK VIEW direction

Slide 18

Slide 18 text

STACK VIEW thirdView.isHidden = true

Slide 19

Slide 19 text

STACK VIEW

Slide 20

Slide 20 text

STACK VIEW ࣗಈతʹௐ੔͞ΕΔʂ

Slide 21

Slide 21 text

ࣗಈతʹௐ੔͞Εͨ݁Ռ

Slide 22

Slide 22 text

ςΩετ ଞͷ޻෉ϙΠϯτ ▸ Ϙλϯͷݟͨ໨ͷେ͖͞ΑΓɺ࣮ࡍʹλοϓͰ͖ΔൣғΛେ ͖͘͢Δ ▸ ߴ͞΍จࣈͷେ͖͞ΛܾΊΔύϥϝʔλΛprotocolʹ͠ɺ͋ Δఔ౓ࣗ༝ʹΧελϚΠζՄೳʹͨ͠

Slide 23

Slide 23 text

ςΩετ ໰୊఺ ▸ ৭ͷࢦఆ͕୯৭͔͠ରԠͯ͠ͳ͍ͷͰɺόϦΤʔγϣϯΛͭ ͚͍ͨ ▸ λοϓͯ͠৭͕มΘΔͷ͸ɺnormal, highlighted, disableͷ3 ύλϯ͔͠ͳ͍ͷͰɺશ෦ʹରԠ͍ͨ͠ ▸ ໊લ͕͋Μ·Γؾʹೖͬͯͳ͍ ▸ xib͔Βੜ੒ͯ͠Δ͕ɺશ෦ίʔυͰੜ੒ͨ͠ํ͕࢖͍қͦ͏ ▸ ެ։ͯ͠Δ͚Ͳɺ·ͩಈ͔ͳ͍

Slide 24

Slide 24 text

͋ΜͳΜී௨͡ΌΜ ࡞Γ͕ѱ͍ ΋ͬͱ៉ྷʹͰ͖Δ ͦΜͳ΍Γํ͋Δͷ͔ʙ ษڧʹͳͬͨͳʙ ҙݟɺ൷൑౳ืू͓ͯ͠Γ·͢ʂ ϚϦΦΦσοηΠ ΍Γ͍ͨ

Slide 25

Slide 25 text

͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠