CollectionViewの 新しいレイアウトの作り方

Transcript

1. CollectionViewͷ ৽͍͠ϨΠΞ΢τͷ࡞Γํ ձ௡େֶֶ෦3೥ɹҏ౻྇໵ 
2. ࣗݾ঺հ • ҏ౻྇໵ • ΧϐόϥѪ • iOSΤϯδχΞ • ͚ͭ໙େ޷͖ 
3. CollectionViewͱ͸ʁ “UICollectionView is a flexible, powerful tool to help you achieve great user experiences in your applications.” –WWDC2018 A Tour of UICollectionView https://developer.apple.com/videos/play/wwdc2018/225/ 
4. ͜Μͳը໘Λදݱ͢ΔͨΊʹ࢖͏ 
5. iOS13Ͱ৽͘͠௥Ճ͞Εͨ CollectionViewपΓͷAPI • Compositional Layouts • DiffableDataSource 
6. iOS13Ͱ৽͘͠௥Ճ͞Εͨ CollectionViewपΓͷAPI • Compositional Layouts • DiffableDataSource 
7. Compositional Layouts • Item • Group • Section • Layout ͷ4߲໨ͰCollectionViewͷϨΠΞ΢τΛߏ੒͢Δ 88%$
   "EWBODFT
   JO
   $PMMFDUJPO
   7JFX
   -BZPVU
   TMJEF
   ˞ ˞
   IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 
8. Compositional Layoutsͷ ੜ·Εͨཧ༝ʢલஔ͖ʣ • ࡢࠓͷΞϓϦͷUI͸ෳࡶʹͳ͖͍ͬͯͯΔ • ैདྷͷFlowLayoutΛ࢖ͬͨϨΠΞ΢τߏ੒ͩͱ ͔ͳΓෳࡶͳίʔυʹͳͬͯ͠·͏ • ύϑΥʔϚϯε໘Λߟ͑ͳ͕ΒUIΛߏ੒͢Δඞཁ ͕͋ͬͨ 
9. Compositional Layoutsͷ ࡾຊͷப • Composableʢߏ੒Մೳʣ γϯϓϧͳίʔυͰෳࡶͳUI͕࡞ΕΔ • Flexibleʢॊೈʣ ෳࡶͳUI͕࡞ΕΔ • Fastʢૣ͍ʣ ύϑΥʔϚϯεʹ഑ྀ͠ͳͯ͘΋ྑ͍ 
10. σϞ, ίʔυ 
11. αϯϓϧΞϓϦ ηΫγϣϯ͕ෳ਺͋ͬ ͯͦΕͧΕͷηΫγϣ ϯ͕10ݸ΄ͲͷཁૉΛ ͍࣋ͬͯΔ  εΫϩʔϧ͢Δ
12. ैདྷͷFlowLayout Λ࢖༻ͨ͠৔߹ 
13. ࣮૷ํ਑ େݩͷ
    $PMMFDUJPO7JFX
    ʢ5BCMF7JFXͰ΋Մʣ େݩͷ
    $PMMFDUJPO7JFXͷηϧ ࢠͷ$PMMFDUJPO7JFX ࢠͷ$PMMFDUJPO7JFXͷηϧ 
14. େݩͷCollectionView class LegacyViewController: UIViewController { func configureHierarchy() { collectionView.register(CollectionCell.self, forCellWithReuseIdentifier: CollectionCell.reuseIdentifier) ɹɹɹ collectionView.collectionViewLayout = createLayout() } func createLayout() -> UICollectionViewLayout { let layout = UICollectionViewFlowLayout() layout.itemSize = CGSize(width: view.bounds.width, height: view.bounds.height * 0.3) return layout } } extension LegacyViewController: UICollectionViewDataSource { }  ηϧΛొ࿥ɾϨΠΞ΢τΛηοτ
15. ࢠͷCollectionView class SectionCollectionView: UICollectionView { override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) { super.init(frame: frame, collectionViewLayout: layout) self.collectionViewLayout = createLayout() self.register(TextCell.self, forCellWithReuseIdentifier: TextCell.reuseIdentifier) self.contentInset = .init(top: 20, left: 20, bottom: 20, right: 20) } func createLayout() -> UICollectionViewLayout { let layout = UICollectionViewFlowLayout() layout.scrollDirection = .horizontalɹ/// εΫϩʔϧͷ޲͖Λԣ޲͖ʹ͢Δ layout.itemSize = CGSize(width: self.frame.width / 2, height: self.bounds.height - 40) return layout } } extension SectionCollectionView: UICollectionViewDataSource { } 
16. େݩͷCollectionViewͷηϧ class CollectionCell: UICollectionViewCell { static let reuseIdentifier = "collectionCell" var collectionView: SectionCollectionView! override init(frame: CGRect) { super.init(frame: frame) configure() } func configure() { self.collectionView = SectionCollectionView(frame: self.bounds, collectionViewLayout: .init()) contentView.addSubview(collectionView) collectionView.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ collectionView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor), collectionView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor), collectionView.topAnchor.constraint(equalTo: contentView.topAnchor), collectionView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor) ]) self.collectionView.backgroundColor = .white } }  ηϧʹ$PMMFDUJPO7JFXΛηοτ
17. ࢠͷCollectionViewͷηϧ class TextCell: UICollectionViewCell { let label = UILabel() override init(frame: CGRect) { super.init(frame: frame) configure() } } extension TextCell { func configure() { label.translatesAutoresizingMaskIntoConstraints = false label.adjustsFontForContentSizeCategory = true contentView.addSubview(label) label.font = UIFont.preferredFont(forTextStyle: .caption1) ... } } 
18. ैདྷͷํ๏ͰαϯϓϧΞϓϦͷ UIΛ࡞੒͢ΔͨΊʹ͸ ωετͨ͠CollectionView͕ඞཁ ίʔυ͕ଟ͘ͳΓɺ͔ͭߏ଄͕௫Έʹ͍͘
19. Compositional LayoutsΛ ࢖༻ͨ͠৔߹ 
20. ࣮૷ํ਑ $PMMFDUJPO7JFX $PMMFDUJPO7JFXͷηϧ 
21. CollectionView class ViewController: UIViewController { var collectionView: UICollectionView! override func viewDidLoad() { super.viewDidLoad() configureHierarchy() } func configureHierarchy() { collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: createLayout()) collectionView.register(TextCell.self, forCellWithReuseIdentifier: TextCell.reuseIdentifier) collectionView.dataSource = self view.addSubview(collectionView) } func createLayout() -> UICollectionViewLayout { let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .fractionalHeight(1.0)) let item = NSCollectionLayoutItem(layoutSize: itemSize) item.contentInsets = NSDirectionalEdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5) let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.3)) let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item]) let section = NSCollectionLayoutSection(group: group) section.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20) section.orthogonalScrollingBehavior = .continuous let layout = UICollectionViewCompositionalLayout(section: section) return layout } } 
22. CollectionViewͷηϧ class TextCell: UICollectionViewCell { let label = UILabel() override init(frame: CGRect) { super.init(frame: frame) configure() } } extension TextCell { func configure() { label.translatesAutoresizingMaskIntoConstraints = false label.adjustsFontForContentSizeCategory = true contentView.addSubview(label) label.font = UIFont.preferredFont(forTextStyle: .caption1) ... } } 
23. Compositional Layouts Λ ࢖༻͢Δ͜ͱͰ̍ͭͷCollectionView Ͱදݱ͢Δ͜ͱ͕Մೳʹͳͬͨ
24. ·ͱΊ • Compositional LayoutsΛ࢖͏͜ͱͰࠓ·Ͱ೉͔ͬͨ͠ UIͷදݱ͕؆୯ʹͰ͖Δ • ࠷ۙॳΊͯiOSΞϓϦ։ൃΛ࢝Ίͨͬͯਓʹ͸Φεεϝ ※ iOS13Ҏ߱Ͱ͔͠࢖͑ͳ͍ͷʹ஫ҙ
25. ࢀߟͳͲ • ࠓճͷαϯϓϧΞϓϦͷϦϙδτϦ https://github.com/ry-itto/CompositionalLayoutsSample • Advances in Collection View Layout(ηογϣϯ) https://developer.apple.com/videos/play/wwdc2019/215/ • ࣌୅ͷมԽʹԠͯ͡ਐԽ͢ΔCollectionView ~Compositional LayoutsͱDiffable Data Sources~ https://qiita.com/shiz/items/a6032543a237bf2e1d19
26. ͋Γ͕ͱ͏͍͟͝·ͨ͠