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

potatotips #45 で話したものです。

Transcript

1. STACKVIEWΛ࢖ͬͯ ɹϘλϯͭͬͨ͘࿩
2. ςΩετ ࣗݾ঺հ ▸ αϯʢւ઒ ࿨໻ʣ ▸ גࣜձࣾαΠόʔΤʔδΣϯτ ▸ גࣜձࣾϚονϯάΤʔδΣϯτ ▸ @sun54907
3. ςΩετ ͏ͪͷΞϓϦ ▸ λοϓϧ
4. ςΩετ λοϓϧ஀ੜ ▸ 2014೥5݄ϦϦʔε ▸ Swift 95% ▸ Swift 4 ରԠத ▸ ઌʑ݄ʹiOS8Λ੾Γ·ͨ͠
5. ςΩετ ։ൃͷ࿩ ▸ λοϓϧ஀ੜͰ͸ίϯϙʔωϯτԽΛਐΊ͍ͯΔ ▸ ৭΍UIύʔπͷ౷ҰΛਐΊ͍ͯΔ ▸ ن֨Խ͞ΕͨϘλϯΛ࡞Δ͜ͱʹͳͬͨ
6. Ϙλϯͷ࿩
7. ςΩετ Ϙλϯͷཁ݅ ▸ λΠτϧɺλΠτϧࠨͷը૾ɺλΠτϧӈͷը૾͕͋Δ ▸ λΠτϧ৭΍എܠ৭͕਺ύλʔϯଘࡏ͢Δ ▸ ݟͨ໨ͷߴ͕͞28px͘Β͍ͷϘλϯ΋͋Δ ▸ ಺༰ʹ߹Θͤͨ෯ʹͳͬͨΓɺݻఆ෯ʹͳͬͨΓ͢Δ Ϙλϯϥϕϧ Ϙλϯϥϕϧ Ϙλϯϥϕϧ Ϙλϯϥϕϧ ※σβΠϯ͸։ൃதͷ΋ͷͰ͢ɻ࣮ࡍͷ੡඼൛ͱҟͳΔՄೳੑ͕͋Γ·͢
8. ICON BUTTON VIEW https://github.com/sun54907/IconButtonView
9. ςΩετ ࢖͍ํ let buttonView = ComponentButtonView.instantiate( data: .init(text: “Ϙλϯϥϕϧ”), style: .medium(.fill), colorType: .primary ) stackView.addArrangedSubview(buttonView)
10. ޻෉ͨ͠ ɹ ϙΠϯτ
11. STACKVIEWͰ WRAP_CONTENT
12. ςΩετ Ϙλϯͷཁ݅ ▸ λΠτϧɺλΠτϧࠨͷը૾ɺλΠτϧӈͷը૾͕͋Δ ▸ λΠτϧ৭΍എܠ৭͕਺ύλʔϯଘࡏ͢Δ ▸ ݟͨ໨ͷߴ͕͞28px͘Β͍ͷϘλϯ΋͋Δ ▸ ಺༰ʹ߹Θͤͨ෯ʹͳͬͨΓɺݻఆ෯ʹͳͬͨΓ͢Δ
13. ςΩετ Ϙλϯͷཁ݅ ▸ λΠτϧɺλΠτϧࠨͷը૾ɺλΠτϧӈͷը૾͕͋Δ ▸ λΠτϧ৭΍എܠ৭͕਺ύλʔϯଘࡏ͢Δ ▸ ݟͨ໨ͷߴ͕͞28px͘Β͍ͷϘλϯ΋͋Δ ▸ ಺༰ʹ߹Θͤͨ෯ʹͳͬͨΓɺݻఆ෯ʹͳͬͨΓ͢Δ
14. ςΩετ ▸ ಺༰ʹ߹Θͤͨ෯…·͋ɺautoLayoutͰ৭ʑͰ͖Δ͔ͳ… ▸ Ͱ΋ςΩετͱը૾Ͱ࡞Δ͔ΒɺͦΕͧΕ͕͋Δ৔߹ͱͳ͍ ৔߹΋ରԠ͢Δͷ໘౗…
15. ͦΕɺSTACKVIEWͳΒͰ͖ΔΑ
16. ςΩετ STACKVIEWͱ͸ ▸ iOS9͔Β࢖͑Δػೳ ▸ AutoLayout Λઃఆ͢Δ View Λάϧʔϐϯάͯ͠ɺ·ͱΊ ੍ͯ໿Λઃఆ͢Δ͜ͱ͕Ͱ͖Δ ▸ https://qiita.com/yucovin/items/ff58fcbd60ca81de77cb
17. STACK VIEW direction
18. STACK VIEW thirdView.isHidden = true
19. STACK VIEW
20. STACK VIEW ࣗಈతʹௐ੔͞ΕΔʂ
21. ࣗಈతʹௐ੔͞Εͨ݁Ռ
22. ςΩετ ଞͷ޻෉ϙΠϯτ ▸ Ϙλϯͷݟͨ໨ͷେ͖͞ΑΓɺ࣮ࡍʹλοϓͰ͖ΔൣғΛେ ͖͘͢Δ ▸ ߴ͞΍จࣈͷେ͖͞ΛܾΊΔύϥϝʔλΛprotocolʹ͠ɺ͋ Δఔ౓ࣗ༝ʹΧελϚΠζՄೳʹͨ͠
23. ςΩετ ໰୊఺ ▸ ৭ͷࢦఆ͕୯৭͔͠ରԠͯ͠ͳ͍ͷͰɺόϦΤʔγϣϯΛͭ ͚͍ͨ ▸ λοϓͯ͠৭͕มΘΔͷ͸ɺnormal, highlighted, disableͷ3 ύλϯ͔͠ͳ͍ͷͰɺશ෦ʹରԠ͍ͨ͠ ▸ ໊લ͕͋Μ·Γؾʹೖͬͯͳ͍ ▸ xib͔Βੜ੒ͯ͠Δ͕ɺશ෦ίʔυͰੜ੒ͨ͠ํ͕࢖͍қͦ͏ ▸ ެ։ͯ͠Δ͚Ͳɺ·ͩಈ͔ͳ͍
24. ͋ΜͳΜී௨͡ΌΜ ࡞Γ͕ѱ͍ ΋ͬͱ៉ྷʹͰ͖Δ ͦΜͳ΍Γํ͋Δͷ͔ʙ ษڧʹͳͬͨͳʙ ҙݟɺ൷൑౳ืू͓ͯ͠Γ·͢ʂ ϚϦΦΦσοηΠ ΍Γ͍ͨ
25. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠