Slide 1

Slide 1 text

CollectionViewͷ ৽͍͠ϨΠΞ΢τͷ࡞Γํ ձ௡େֶֶ෦3೥ɹҏ౻྇໵

Slide 2

Slide 2 text

ࣗݾ঺հ • ҏ౻྇໵ • ΧϐόϥѪ • iOSΤϯδχΞ • ͚ͭ໙େ޷͖

Slide 3

Slide 3 text

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/

Slide 4

Slide 4 text

͜Μͳը໘Λදݱ͢ΔͨΊʹ࢖͏

Slide 5

Slide 5 text

iOS13Ͱ৽͘͠௥Ճ͞Εͨ CollectionViewपΓͷAPI • Compositional Layouts • DiffableDataSource

Slide 6

Slide 6 text

iOS13Ͱ৽͘͠௥Ճ͞Εͨ CollectionViewपΓͷAPI • Compositional Layouts • DiffableDataSource

Slide 7

Slide 7 text

Compositional Layouts • Item • Group • Section • Layout ͷ4߲໨ͰCollectionViewͷϨΠΞ΢τΛߏ੒͢Δ 88%$"EWBODFTJO$PMMFDUJPO7JFX-BZPVU TMJEF ˞ ˞ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 8

Slide 8 text

Compositional Layoutsͷ ੜ·Εͨཧ༝ʢલஔ͖ʣ • ࡢࠓͷΞϓϦͷUI͸ෳࡶʹͳ͖͍ͬͯͯΔ • ैདྷͷFlowLayoutΛ࢖ͬͨϨΠΞ΢τߏ੒ͩͱ ͔ͳΓෳࡶͳίʔυʹͳͬͯ͠·͏ • ύϑΥʔϚϯε໘Λߟ͑ͳ͕ΒUIΛߏ੒͢Δඞཁ ͕͋ͬͨ

Slide 9

Slide 9 text

Compositional Layoutsͷ ࡾຊͷப • Composableʢߏ੒Մೳʣ γϯϓϧͳίʔυͰෳࡶͳUI͕࡞ΕΔ • Flexibleʢॊೈʣ ෳࡶͳUI͕࡞ΕΔ • Fastʢૣ͍ʣ ύϑΥʔϚϯεʹ഑ྀ͠ͳͯ͘΋ྑ͍

Slide 10

Slide 10 text

σϞ, ίʔυ

Slide 11

Slide 11 text

αϯϓϧΞϓϦ ηΫγϣϯ͕ෳ਺͋ͬ ͯͦΕͧΕͷηΫγϣ ϯ͕10ݸ΄ͲͷཁૉΛ ͍࣋ͬͯΔ εΫϩʔϧ͢Δ

Slide 12

Slide 12 text

ैདྷͷFlowLayout Λ࢖༻ͨ͠৔߹

Slide 13

Slide 13 text

࣮૷ํ਑ େݩͷ $PMMFDUJPO7JFX ʢ5BCMF7JFXͰ΋Մʣ େݩͷ $PMMFDUJPO7JFXͷηϧ ࢠͷ$PMMFDUJPO7JFX ࢠͷ$PMMFDUJPO7JFXͷηϧ

Slide 14

Slide 14 text

େݩͷ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 { } ηϧΛొ࿥ɾϨΠΞ΢τΛηοτ

Slide 15

Slide 15 text

ࢠͷ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 { }

Slide 16

Slide 16 text

େݩͷ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Ληοτ

Slide 17

Slide 17 text

ࢠͷ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) ... } }

Slide 18

Slide 18 text

ैདྷͷํ๏ͰαϯϓϧΞϓϦͷ UIΛ࡞੒͢ΔͨΊʹ͸ ωετͨ͠CollectionView͕ඞཁ ίʔυ͕ଟ͘ͳΓɺ͔ͭߏ଄͕௫Έʹ͍͘

Slide 19

Slide 19 text

Compositional LayoutsΛ ࢖༻ͨ͠৔߹

Slide 20

Slide 20 text

࣮૷ํ਑ $PMMFDUJPO7JFX $PMMFDUJPO7JFXͷηϧ

Slide 21

Slide 21 text

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 } }

Slide 22

Slide 22 text

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) ... } }

Slide 23

Slide 23 text

Compositional Layouts Λ ࢖༻͢Δ͜ͱͰ̍ͭͷCollectionView Ͱදݱ͢Δ͜ͱ͕Մೳʹͳͬͨ

Slide 24

Slide 24 text

·ͱΊ • Compositional LayoutsΛ࢖͏͜ͱͰࠓ·Ͱ೉͔ͬͨ͠ UIͷදݱ͕؆୯ʹͰ͖Δ • ࠷ۙॳΊͯiOSΞϓϦ։ൃΛ࢝Ίͨͬͯਓʹ͸Φεεϝ ※ iOS13Ҏ߱Ͱ͔͠࢖͑ͳ͍ͷʹ஫ҙ

Slide 25

Slide 25 text

ࢀߟͳͲ • ࠓճͷαϯϓϧΞϓϦͷϦϙδτϦ 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

Slide 26

Slide 26 text

͋Γ͕ͱ͏͍͟͝·ͨ͠