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
670
作って学ぶ! 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
React 19アップデートのために必要なこと
uhyo
8
1.6k
AIプログラミング雑キャッチアップ
yuheinakasaka
20
5.2k
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
290
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
180
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
150
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
100
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
510
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
160
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
iOSでQRコード生成奮闘記
ktcryomm
2
130
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
540
Building Flexible Design Systems
yeseniaperezcruz
328
38k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Rails Girls Zürich Keynote
gr2m
94
13k
Side Projects
sachag
452
42k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Why Our Code Smells
bkeepers
PRO
336
57k
Producing Creativity
orderedlist
PRO
344
40k
Six Lessons from altMBA
skipperchong
27
3.6k
Embracing the Ebb and Flow
colly
84
4.6k
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