Build for iPad recap - Speaker Deck

Build for iPad recap

by USAMI Kosuke

Slide 1

Slide 1 text

Build for iPad USAMI Kosuke 1/25

Slide 2

Slide 2 text

ࣗݾ঺հ • Ӊࠤݟ ެี • ϑΣϯϦϧגࣜձࣾʢେࡕຊࣾۈ຿ɺݱࡏ͸ࡏ୐ۈ຿ʣ • Mobile Act ओ࠵ • Mobile Act ONLINE #1ʢ7/22ʣ • ొஃऀɾࢀՃऀΛืूத • iOSDC ݪߘԠืΛ࠾୒͍͖ͨͩ·ͨ͠ʢࣥචதʣ 2/25

Slide 3

Slide 3 text

iPad ΞϓϦͷηογϣϯ ͜ͷ2͕͓ͭ͢͢Ί • Designed for iPadʢiPadͷઃܭʣ • Build for iPadʢiPad༻Ϗϧυʣ ଞʹ΋ɺApple PencilɺΩʔϘʔυɺτϥοΫύουɺ Catalyst ͳͲ΋஫ҙ iPhone ͱ Mac ͷதؒͷσόΠεͰɺߟ͑Δ΂͖͜ͱ͸ଟ͍ 3/25

Slide 4

Slide 4 text

Build for iPad • Multi-column Split View • Lists • Reducing modality 4/25

Slide 5

Slide 5 text

Multi-column Split View 5/25

Slide 6

Slide 6 text

Multi-column Split View • UISplitViewController ʹଟ͘ͷ API ͕௥Ճ͞Εͨ • ࢀߟ : API Document Ͱ͸࣍ͷΑ͏ʹݺ͹Ε͍ͯΔ • ৽͍͠΋ͷ : Column Style Split Views • ैདྷͷ΋ͷ : Classic Split Views • iPad ͷαΠυόʔͷ࣮૷ʹ࢖͏ 6/25

Slide 7

Slide 7 text

Multi-column Split View 7/25

Slide 8

Slide 8 text

Style ࢦఆ let splitViewController = UISplitViewController(style: .doubleColumn) let splitViewController = UISplitViewController(style: .tripleColumn) 8/25

Slide 9

Slide 9 text

Column ໊শ Primary / Supplementary / Secondary 9/25

Slide 10

Slide 10 text

Column ࢦఆ splitViewController .setViewController(sidebarViewController, for: .primary) splitViewController .setViewController(indexViewController, for: .supplementary) splitViewController .setViewController(myHomeViewController, for: .secondary) 10/25

Slide 11

Slide 11 text

Size Class ରԠ • φϏήʔγϣϯͷσβΠϯ • Regular : αΠυόʔ • Compact : λϒόʔ • UISplitViewController Ͱڞ௨࣮૷ splitViewController .setViewController(tabBarController, for: .compact) 11/25

Slide 12

Slide 12 text

Display Mode 12/25

Slide 13

Slide 13 text

Split Behavior 13/25

Slide 14

Slide 14 text

Split View ͷද੍ࣔޚ • preferredDisplayMode • preferredSplitBehavior • splitViewController.showColumn() / hideColumn() 14/25

Slide 15

Slide 15 text

Lists 15/25

Slide 16

Slide 16 text

Lists • ҎԼͷՕॴͰ͸ Lists Λ࢖͏͜ͱ͕ଟ͍ • Primary ViewʢαΠυόʔʣ • Supplementary View • ࣮૷ʹ͸ UICollectionView Λ࢖͏ 16/25

Slide 17

Slide 17 text

Collection View setup • UICollectionLayoutListConfiguration ͕௥Ճ͞Εͨ • appearance : .sidebar / .sidebarPlain let configuration = UICollectionLayoutListConfiguration(appearance: .sidebar) let layout = UICollectionViewCompositionalLayout.list(using: configuration) let collectionView = UICollectionView(frame: frame, collectionViewLayout: layout) 17/25

Slide 18

Slide 18 text

Collection View ͷৄࡉ • ͜ͷηογϣϯͰ΋ղઆ͸͞Ε͍ͯΔ͕ɺCollection View ͷͨΊͷηογϣϯ͕ผʹ͋ΔͷͰɺͦΕΛݟΔͱΑΓྑ͍ • ࠓճ௥Ճ͞ΕͨҎԼ͸αΠυόʔͷ࣮૷ʹ༗ӹ • UICollectionView.CellRegistration • UICollectionViewDiffableDataSource 18/25

Slide 19

Slide 19 text

·ͩ UITableView ࢖ͬͯΔͷʁ If you're still using UITableView, we highly recommend you switch to UICollectionView. ΋͋͠ͳ͕ͨ·ͩ UITableView Λ࢖͍ͬͯΔͳΒɺ UICollectionView ʹ੾Γସ͑Δ͜ͱΛڧ͘͢͢ΊΔɻ • αΠυόʔରԠ͸ͦΕʹͪΐ͏Ͳྑ͍ͱࢥΘΕΔ 19/25

Slide 20

Slide 20 text

Reducing modality 20/25

Slide 21

Slide 21 text

Reducing modality • iPad ͷΑ͏ͳ޿͍ը໘Λ࣋ͭσόΠεͰ͸ɺϞʔμϧදࣔ͸ ద੾Ͱ͸ͳ͍ • ྫ : ϝϞΞϓϦ • Color Picker Ͱ৭Λબ୒ͨ͠ޙɺPicker Λด͡Δૢ࡞ Λͤͣʹઢ͕͔͚Δ • Color Picker ͸ࣗಈతʹด͡Δ 21/25

Slide 22

Slide 22 text

Reducing modality • UIKit ͸ Popover ΍ Menu Λࣗಈతʹดͯ͘͡ΕΔ 22/25

Slide 23

Slide 23 text

Case study : Shortcuts 23/25

Slide 24

Slide 24 text

Case study : Shortcuts • γϣʔτΧοτΞϓϦͰͷ࣮ྫ঺հ • Multi-column Split View • Lists • Reducing modality • Regular / Compact ͷ੾Γସ͑ʹ͍ͭͯ΋ղઆ͞Ε͍ͯΔ 24/25

Slide 25

Slide 25 text

·ͱΊ • Build for iPad ͸ಛʹαΠυόʔͷ࣮૷ʹ͍ͭͯࢀߟʹͳ Δ • Designed for iPad ͱ߹ΘͤͯݟΔͱྑ͍ 25/25