Adaptive Collection View

Transcript

1. Adaptive Collection View ishkawa
5. Adaptivity
6. “Supporting any size display or orientation of a device allows you to create a great user experience with your app. With the latest advancements with View Controllers in iOS 8 and Auto Layout in Xcode, it’s now even easier for you to adapt your user interface to context and different sized devices.”
7. “Supporting any size display or orientation of a device allows you to create a great user experience with your app. With the latest advancements with View Controllers in iOS 8 and Auto Layout in Xcode, it’s now even easier for you to adapt your user interface to context and different sized devices.”
8. “Supporting any size display or orientation of a device allows you to create a great user experience with your app. With the latest advancements with View Controllers in iOS 8 and Auto Layout in Xcode, it’s now even easier for you to adapt your user interface to context and different sized devices.”
9. UICollectionView?
12. UICollectionView UITableView
13. UICollectionViewController UICollectionView UICollectionViewCell UITableViewController UITableView UITableViewCell
14. UICollectionViewDelegate UICollectionViewController UICollectionView UICollectionViewCell UICollectionViewDataSource UITableViewDelegate UITableViewController UITableView UITableViewCell UITableViewDataSource
15. େม͡ΌΜʜ
16. ಉ͡Α͏ͳίʔυΛ
    ճॻ͘ඞཁ͕͋Δʜ
17. ͭͷมߋΛՕॴʹ
    ద༻͢Δඞཁ͕͋Δʜ
18. UICollectionView UITableView
19. UICollectionView UITableView?
20. UICollectionView UICollectionView!
21. 6*$PMMFDUJPO7JFXͰ
    6*5BCMF7JFXͬΆ͍΋ͷΛ
    ࣮૷͢Δͷ͸࣮͸؆୯
23. UICollectionViewCell Decoration View
24. UICollectionViewLayout
25. 6*$PMMFDUJPO7JFX'MPX-BZPVU
    ͱ͍͏ศརͳ΋ͷ͕͋Δ
26. class CollectionViewLayout: UICollectionViewFlowLayout
27. ͭͷϞʔυΛ༻ҙ
28. class CollectionViewLayout: UICollectionViewFlowLayout { enum Mode { case Table case Flow } var mode: Mode = (UIDevice.currentDevice().userInterfaceIdiom == .Pad) ? .Flow : .Table }
29. ϞʔυʹԠͨ͡ FTUJNBUFE*UFN4J[FΛઃఆ ߴ͕͞ݻఆͷ৔߹͸JUFN4J[FΛઃఆ
30. override var estimatedItemSize: CGSize { get { let spacing = minimumLineSpacing var size = super.estimatedItemSize if let width = collectionView?.frame.size.width { switch mode { case .Table: size.width = width case .Flow: size.width = width / 2.0 - spacing } } return size } set { super.estimatedItemSize = newValue } }
31. 6*$PMMFDUJPO7JFX
    -BZPVU"UUSJCVUFΛ 6*5BCMF7JFXʹࣅͤΔ mode == .Tableͷ৔߹
32. override func layoutAttributesForElementsInRect(rect: CGRect) -> [ var attributes = [UICollectionViewLayoutAttributes]() if let superAttributes = super.layoutAttributesForElementsInRe for attributes in superAttributes { attributes.frame.origin.x = 0.0 } attributes += superAttributes } return attributes } override func layoutAttributesForItemAtIndexPath(indexPath: NSInde let attributes = super.layoutAttributesForItemAtIndexPath(inde if mode == .Table { attributes.frame.origin.x = 0.0 } return attributes }
33. Ҏ্
34. Demo https://github.com/ishkawa/sandbox/tree/master/Adaptive
35. ͭͷ7JFX$POUSPMMFS
    $FMMͰ
    J1IPOF
    J1BEʹରԠͰ͖Δ
36. ΞμϓςΟϒʂ
38. ηϧ΋ग़͠෼͚͍ͨ৔߹͸ʁ
39. - Size Classes - ~ipad
40. - Size Classes - ~ipad
45. ηϧαΠζͷܭࢉ͸
    Ͳ͏ͳͬͯΔͷʁ
46. Self Sizing Cell introduced in iOS 8
47. ✓ UITableView ✓ UICollectionView
48. /4-BZPVU$POTUSBJOUΛ
    ద੾ʹ഑ஔ͢Δͱηϧͷ
    େ͖͞Λࣗಈతʹܭࢉ
49. ίʔυෆཁ UICollectionViewͷ৔߹͸ඞཁͳ৔߹΋͋Δ
50. ࠷ߴʂ
51. ͨͩ͠
52. 6*$PMMFDUJPO7JFXͷ৔߹
    ᠘͕ͨ͘͞Μ͋ΔͷͰ
    ֮ޛ͕ඞཁ
54. J04
    ͸ʁ
55. 4FMG
    4J[JOH
    $FMMΛ
    ਅࣅ͠Α͏
56. TZTUFN-BZPVU4J[F
    'JUUJOH4J[FΛ
    JUFN4J[F'PS*OEFY1BUI
    Ͱݺ΂͹0, ηϧͷग़͠෼͚͸Interface BuilderͰ׬݁ͯ͠Δ͸ͣ
58. ຊ౰ʹ͋ͬͨ࿩
59. lੴ઒͞ΜɺJ1IPOF͚ͩͰ͍͍ͷͰ
    ͜ͷػೳΛ͜ͷόʔδϣϯʹ৐͍ͤͯͩ͘͞z اըऀ
60. l͕Μ͹Γ·͢ʂz ੴ઒
61. lͰ͖·ͨ͠ʂ֬ೝΛ͓ئ͍͠·͢ʂz ੴ઒
62. lJ1BE΋࣮૷ͯ͘͠ΕͨΜͰ͢Ͷʂ
    
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂz اըऀ
63. l͑ͬz ੴ઒
64. "EBQUJWF
    $PMMFDUJPO
    7JFXΛ
    ࢖ͬͯJ1IPOF൛ͷ࣮૷Λͨ͠Β
65. J1BE൛΋࣮૷͞Εͯͨ
67. ·ͱΊ
68. ✓ UITableView͸UICollectionView ✓ iPhone͸iPad ✓ ಉ͡ίʔυ͸2౓ॻ͔ͳ͍
69. ໌೔͔ΒAdaptiveʹ
    ͳΓ·͠ΐ͏