Auto Layout Tips

http://kanmoba.connpass.com/event/22648/

Transcript

1. Auto Layout Tips USAMI Kosuke Fenrir Inc.
2. Auto Layout → iOS / OS X ͰͷϏϡʔͷϨΠΞ΢τख๏ → ੍໿Λఆٛ͢Δ͜ͱͰαΠζ΍ҐஔΛࣗಈܭࢉ → ैདྷͷϑϨʔϜϕʔεϨΠΞ΢τͱൃ૝͕ҟͳΔ
4. UIKit σβΠϯύλʔϯͱ Auto Layout → UIScrollView ͱ Auto Layout → UITableView ͱ Auto Layout → UICollectionView ͱ Auto Layout → ͜ΕΒͷ૊Έ߹Θͤ͸Ҋ֎͍ͨ΁Μ
5. UIScrollView & Auto Layout
6. ͏·͍͔͘ͳ͍ύλʔϯ → UIScrollView ͷத਎ͷ View ͷαΠζ͕ Auto Layout Ͱܾ·Βͳ͍ → contentSize ΛίʔυͰઃఆ͢Δඞཁ͕ग़ͯ͘Δ → ద੾ͳ contentSize ΛͲ͏༩͑Δ͔೉͘͠ͳΔ
7. Content View → ·ͣ UIScrollView ͷ಺ଆʹ Content View Λ࡞Δ → UIScrollView ͱ Content View ͱͷ্Լࠨӈͷ֤ล ʹ੍໿Λఆٛ͢Δ → ͜ΕͰ contentSize = Content View ͷαΠζͱͳ Δ
8. ͏·͍͘͘ύλʔϯ → Content View ͷαΠζΛ UIScrollView ͷ ֎ଆ ʹ ͋Δཁૉ͔Βܾ·ΔΑ͏ʹ͢Δ → ྫ͑͹࣍ͷΑ͏ͳ֊૚ͷͱ͖ → (1) UIView - (2) UIScrollView - (3) Content View → (3) ͷαΠζ͕ (1) ͔Βܾ·ΔΑ͏ʹ͢Δ → ʢྫ͑͹ɺ෯͕౳͍͠ͱ͔ʣ
9. UIScrollView & Auto Layout → ͜ΕͰ Auto Layout ͚ͩͰ׬݁͢Δ → contentSize ΛίʔυͰઃఆ͢Δඞཁ͕ͳ͘ͳΔ
10. UITableView & Auto Layout
11. UITableView → UITableViewDelegate / UITableViewDataSource → Cell ͷੜ੒ͷલʹɺCell ͷߴ͞Λฦ͢ඞཁ͕͋Δ → Cell ͷߴ͕͞ݻఆͰ͋Ε͹ޮ཰͕ྑ͍ઃܭ
12. ߴ͕͞ݻఆͰͳ͍ͱ͖ → Cell ͷߴ͕͞ݻఆͰͳ͍ͱ͖͸͋·Γྑ͘ͳ͍ → ߴ͞Λ஌ΔͨΊʹԾʹ Cell Λੜ੒͢Δʁ → ಛʹ Auto Layout ͱ͸૬ੑ͕ѱ͍
13. Self Sizing Cell (iOS 8) → tableView:estimatedHeightForRowAtIndexPath: Ͱ Ծͷߴ͞Λฦ͢ → tableView:heightForRowAtIndexPath: Ͱ UITableViewAutomaticDimension Λฦ͢ → ͜ΕͰ Auto Layout Ͱܾ·Δߴ͕͞ Cell ͷߴ͞ʹ
14. UITableView & Auto Layout → ͜ΕͰ Auto Layout ͚ͩͰ׬݁͢Δ → Ծͷ Cell ͱ͔࡞Βͳ͍͍ͯ͘
15. ஫ҙ : Storyboard ্ͷઃఆ → Storyboard ্Ͱ͸ UITableViewCell ͷߴ͞ೖྗཁ → Cell ͷߴ͞ͱ Content View ͷߴ͞Λ੔߹ͤ͞Δ → Content View ͷϨΠΞ΢τΛ૊Έͳ͕ΒɺͦΕʹ ͋Θͤͯ Cell ͷߴ͞Λௐ੔ɾɾɾʢਖ਼௚ͩΔ͍ʣ
16. UICollectionVi ew & Auto Layout
17. UICollectionView → ઃܭ͸ UITableView Λ౿ऻ → UICollectionViewLayout Ͱ༷ʑͳϨΠΞ΢τ → ͜͜Ͱ͸ UICollectionViewFlowLayout Λѻ͏
18. αΠζ͕ݻఆͰͳ͍ͱ͖ → ΍͸Γઌʹ Cell ͷαΠζΛฦ͢ඞཁ͕͋Δ → Auto Layout ͱ͸૬ੑ͕ѱ͍
19. Self Sizing Cell (iOS 8) → estimatedItemSize ʹԾͷαΠζΛฦ͢ ʢUISizeZero Ҏ֎ʣ → itemSize ͸ઃఆ͠ͳͯ͘ྑ͍ → ͜ΕͰ Auto Layout ͷαΠζ͕ Cell αΠζʹ
20. UICollectionView & Auto Layout → ͜ΕͰ Auto Layout ͚ͩͰ׬݁͢Δ → Ծͷ Cell ͱ͔࡞Βͳ͍͍ͯ͘
21. Auto Layout ্खʹ࢖͓͏