Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

21e251d97f836f77e7dce83fcaf6daff?s=47 ry-itto
November 02, 2019

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

21e251d97f836f77e7dce83fcaf6daff?s=128

ry-itto

November 02, 2019
Tweet

More Decks by ry-itto

Other Decks in Programming

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%$"EWBODFTJO$PMMFDUJPO7JFX-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. ͋Γ͕ͱ͏͍͟͝·ͨ͠