Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
作って学ぶ! CollectionViewLayoutの変化
Search
rihitenLab
September 29, 2019
Programming
1
700
作って学ぶ! CollectionViewLayoutの変化
下記勉強会で使用した資料の公開版です
【YUMEMI.swift #3 ~俺/私がやったiOS 13対応~】
https://yumemi.connpass.com/event/142608/
rihitenLab
September 29, 2019
Tweet
Share
More Decks by rihitenLab
See All by rihitenLab
iOSエンジニアのためのロードマップ
rihitenlab
3
1.5k
Other Decks in Programming
See All in Programming
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
10
4.3k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
PicoRuby on Rails
makicamel
3
140
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
Porting a visionOS App to Android XR
akkeylab
0
680
Featured
See All Featured
KATA
mclloyd
30
14k
Automating Front-end Workflow
addyosmani
1370
200k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A designer walks into a library…
pauljervisheath
207
24k
BBQ
matthewcrist
89
9.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
Bash Introduction
62gerente
613
210k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Making Projects Easy
brettharned
116
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Transcript
作って学ぶ! CollectionViewLayoutの変化
iOS12までのCollectionView UICollectionView FlowLayout つかいにくくない?
例えば... AppStore風のこんなレイアウト... UICollectionViewFlowLayoutなら どう作る?
例えば... UITableView UITableViewHeader UITableViewHeader UITableViewCell UICollectionView(Tag:1) UICollectionViewCell UITableViewCell UICollectionView(Tag:2) UICollectionViewCell
UICollectionViewCell UICollectionViewCell CollectionView in TableViewで実現 しかしこの方法には問題が・・・ - 実データとレイアウト上のデータのマッチ ングが直感的ではない - 左右に次のアイテムが表示される レイアウトを実現するにはさらに 一工夫いる (scrollViewWillEndDraggingで 停止位置を計算など) - Cellのサイズ計算が面倒臭い etc.
例えば... どんどん複雑化していく レイアウトに対応することが難し くなってきている
そこで登場! Compositional Layouts
Compositional Layoutsとは? 以下の方法でレイアウトを構成する CollectionViewの新しいレイアウト - 小さいLayoutをGroup化する - Group化の繰り返しで大きなレイアウトを 構成する
Compositional Layoutsとは? どういうこと?
Compositional Layoutsとは? Layout Section Group Item Group Item Item Section
Group - Layout:レイアウトの全体 複数のセクションを内包する - Section:セクションのレイアウト 1つのGroupを内包する - Group :Itemのレイアウト 複数のGroupまたはItemを 内包する - Item:CollectionViewCell 実データと対応する
Compositional Layoutsの便利機能 NSCollectionLayoutSize - fractionalWidth, fractionalHeight 自分を内包しているLayoutのサイズとの比率でサイズ を指定する - absolute
ポイントでサイズを指定する - estimated ポイントでサイズを指定するが、優先される制約が ある場合はそのサイズになる
Compositional Layoutsの便利機能 Group(width: fractionalWidth(1.0), height: fractionalHeight(1.0)) Item(width: fractionalWidth(0.8), height: fractionalHeight(0.4))
Group(width: fractionalWidth(0.8), height: fractionalHeight(0.4)) Item (width: fractionalWidth(0.4), height: fractionalHeight(1.0)) Item (width: fractionalWidth(0.4), height: fractionalHeight(1.0)) こんな感じでいい感じにサイズを調整できる
Compositional Layoutsの便利機能 orthogonalScrollingBehavior Sectionのパラメータで、指定するとSection内のアイテム が縦に追加されず、横スクロールで表示される - .continuous Section内で横スクロールされる - .continuousGroupLeadingBoundary
Section内で横スクロールされ、 Groupの左端がSectionの左端に揃うように スクロールが止まる
Compositional Layoutsの便利機能 続き - .paging Section内で横スクロールされ、 画面に表示されている部分単位でpagingされる - .groupPaging Section内で横スクロールされ、
GroupとSectionの左端が揃うようにPagingされる - .groupPagingCentered Section内で横スクロールされ、 GroupがセンタリングされるようにPagingされる
Compositional LayoutsでAppStore風のレイアウト を作る Group (width: fractionalWidth(1.0), height: fractionalHeight(1.0)) Item(width: fractionalWidth(0.8),
height: fractionalHeight(0.8)) 1.下の二つのGroupを用意する Group (width: fractionalWidth(1.0), height: fractionalHeight(1.0)) Item(width: fractionalWidth(0.8), height: fractionalHeight(0.3)) Item(width: fractionalWidth(0.8), height: fractionalHeight(0.3)) Item(width: fractionalWidth(0.8), height: fractionalHeight(0.3))
Compositional LayoutsでAppStore風のレイアウト を作る 2.各セクションに1.で作ったレイアウトのうち使いたい ものを設定する 3.すべてのSectionに下の設定をする section.orthogonalScrollingBehavior = .groupPagingCentered
Compositional LayoutsでAppStore風のレイアウト を作る これだけ!
まとめ - iOS13以降では複雑なレイアウトを 組みやすくなる - CollectionViewFlowLayoutの疲弊から みんなで脱却しよう!
おまけ 今回DEMOのために作成したソースを Githubで公開しています。 もしよければ参考にしてください! マサカリも大歓迎です! https://github.com/rihitenLab/AppStore LikeLayout