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
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
580
C++20 射影変換
faithandbrave
0
560
CursorはMCPを使った方が良いぞ
taigakono
1
220
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
46
11k
技術同人誌をMCP Serverにしてみた
74th
1
590
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
5つのアンチパターンから学ぶLT設計
narihara
1
150
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
How GitHub (no longer) Works
holman
314
140k
Docker and Python
trallard
44
3.5k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Music & Morning Musume
bryan
46
6.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
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