速習iPhone Duo対応

extension DC Day1用です

Transcript

1. 速習iPhone Duo対応 合同会社DMM.com 野瀬田 裕樹（@ynoseda）
2. Speaker 野瀬田 裕樹（@ynoseda） 京都生まれ iOSがメインだけど Androidやったり たまにFlutterもやります
3. iPhone Duo、出ましたね
4. この登壇枠を申し込んだ時 サイドローディングの話とか 新規アプリでAI前提の設計で 色々やってることとか Swift 6.4の話とか 何話そうかなって色々 考えてたけどDuoで全部飛びました
5. ということで、 みんなでiPhone Duo対応 再チェックしましょう！
7. 折り畳んだ状態の縦横 開いた状態の縦横 折り曲げた状態の縦横
8. 10/23までに
9. iPhone Duoのこの6状態を 正常動作まで持っていかないと
10. 😇
11. 一つずつチェックしよう
12. 1. デザインを理解する
14. HIG曰く
15. 標準システムコンポーネントを使用し、 サイズ変更に対応するようにしてれば、 ほとんど調整することなく、 デバイスの向きに自動的に適応します
16. ほんまか？
17. いつもと位置が違うもの • タブバー • ツールバー • ナビゲーションバー • ステータスバー • ライブアクティビティ
18. いつもと位置が違うもの • 開いた状態x横向き ナビゲーションバーがなくて 右側ツールバー上寄せ • 開いた状態x縦向き ステータスバーの位置が右上固定 • 同じアプリの例でも状態で色々違う
19. Safe Area • 縦向きなのに 左右にSafe Area
20. 色々な開いた状態のUIパターン • Split View
21. 色々な開いた状態のUIパターン • Split View • Sidebar
22. 色々な開いた状態のUIパターン • Split View • Sidebar • コンテンツを2列表示に変更 etc
23. 2. Duoに向けたデザイン対応
24. Xcodeのバージョンによる違い • Xcode 27未満：中央に小さく表示される • Xcode 27：Safe Areaを避けて表示される • Xcode 27.1：全画面に表示される
28. サイズクラス @Environment @Environment (\.horizontalSizeClass) (\.verticalSizeClass) outer display compact regular outer display （横向き） compact compact inner display regular regular （縦向き）
29. Safe Area • ❌ view.safeAreaInsets.left * 2 • ✅ view.bounds.inset(by: view.safeAreaInsets).width
30. 角丸への対応 ConcentricRectangle()
31. 独自UIで 折り目やカメラを避けたい
32. 折り目・カメラ：予約済領域 • reservedRegionsでその領域を取ってきて避ける GeometryReader { proxy in let 折り目領域 = proxy.reservedRegions(kind: .division) let 折り目が折り畳まなくても取れる = proxy.reservedRegions( kind: .division, options: .includeInactive ) let カメラ領域 = proxy.reservedRegions(kind: .occlusion) }
33. 独自UIで横2列表現をしたい
34. ArrangementViewで横並び • 要素を2つに分割するレイアウトを組める（iOS 27.1+） NavigationStack { ArrangementView { Primary() } secondary: { Secondary() } .arrangementViewStyle( .split ) } Primary Primary Secondary Secondary
35. ArrangementViewで横並び • 横向きだけで要素を2つに分割するレイアウトを組める（iOS 27.1+） NavigationStack { ArrangementView { Primary() } secondary: { Secondary() } .arrangementViewStyle( .split.axes(.horizontal) ) } Primary Primary Secondary
36. ArrangementViewでoverlay • カスタムの重ね合わせレイアウトも組める（iOS 27.1+） // 重ね合わせているときのz方向のindexも取れる @Environment(\.overlayArrangementZIndex) private var zIndex NavigationStack { ArrangementView { // 少し折り曲げた時はSecondaryが左半分に寄るから、 // Primaryを展開して表示したい、みたいなこともできる } Primary(zIndex > 0 ? .collapsed : .expanded) } secondary: { Secondary() } .arrangementViewStyle(.overlay) Secondary Primary
37. 3. Duo特有の折り曲げに対応
38. ヒンジ（折りたたみ状態）の検知 struct InstrumentView: View { @State private var pitchBend: Double = 0 var body: some View { GuitarView(pitchBend: pitchBend) .onHingeChange { _, context in if let hinge = context.hinge, hinge.status == .partiallyOpen { pitchBend = calculatePitchBend(angle: hinge.angle) } else { pitchBend = 0 } } } private func calculatePitchBend(angle: Angle) -> Double { ... } }
39. ヒンジ（折りたたみ状態）の検知 • onHingeChangeで折り畳みの状態の変化を検知できる • 引数のcontextからhingeの有無や折り畳み状態や角度が取れる
40. 4. Duoのマルチシーンに対応
41. 内側ディスプレイで2つのsceneが起動 • Duoは複数のアプリが 立ち上がる • 内側はマルチシーン対応だけど 外側はそうじゃないので注意 • 折り畳んだ状態で 新しいscene起動すると 失敗する
42. 新しいsceneの起動の例 // 折り畳んで外側ディスプレイを使っている時のaction let alternate = UIAction(title: <#Alternate Action Title#>, image: <#Alternate Action Image#>, handler: { _ in <#Perform Alternate Action#> }) // 新しいsceneを起動するaction let action = UIWindowScene.ActivationAction(alternate: alternate) { _ in let activity = NSUserActivity( activityType: <#Scene Activity Type#> ) return UIWindowScene.ActivationConfiguration(userActivity: activity) }
43. 開いた状態で 外側のディスプレイも使いたい
44. Scene Accessory：カメラの例 struct CameraRootView: View { @State private var model = Model() var body: some View { CameraView(model: model) .sceneAccessory { CameraCaptureAccessory { 外側ディスプレイに表示するView(model: model) } } } }
45. 操作しないコンテンツ表示の例 struct RootView: View { var document: PresentationDocument var body: some View { PresentationDocumentView(document: document) .sceneAccessory { ExternalNonInteractiveAccessory { PresentationPreview(document: document) } } } }
46. 5. Vertical Controls
47. 〜〜Barの位置変化に対応 • 左側のアプリは左側に 右側のアプリは右側に Controlsが縦に並ぶ
48. 〜〜Barの位置変化に対応 • システム標準のものを使う NavigationStack { SomeView().toolbar { … } } • ToolBarItemにはアイコンとテキストの両方を設定する Label("共有", systemImage: “square.and.arrow.up") → アイコンのみ/テキストのみ/両方表示をOSがよしなに切替する
49. toolbarだけど テキストボタンにしたい
50. axisBehaviorで水平方向に表示 .toolbar { ToolbarItem { SelectOrDoneButton() } .axisBehavior(.horizontalOnly) }
51. axisBehaviorで垂直方向に表示 .toolbar { ToolbarItem { 独自のCustomButton() } .axisBehavior(.verticalPreferred) // 独自のViewだけど縦に並べていいならこの指定もできる } @Environment(\.toolbarVerticalEdge) private var 垂直軸上にtoolbarがあるかどうかも取れる
52. fl toolbarで …になる順番を決めたい (Over ow)
53. TabBarよりToolbarを残す
54. TabBarよりToolbarを残す TabView { Tab("Recents", systemImage: "clock") { ContentView() .toolbarVerticalCompressionBehavior( .prefersToolbarItems // Toolbarが先に…になるデフォルト挙動を変えられる } } )
55. …を最後まで避ける要素を決める .toolbar { ToolbarItemGroup(placement: .primaryAction) { Button(〜〜) } .visibilityPriority(.high) // .visibilityPriority(.low) 先に…に入る要素の指定も可 }
56. 6. まとめ
57. やること • Xcode 27.1でビルドする • Size ClassとSafe Areaに対応してresizableにする • カスタムView関係に対応する（カスタムのtoolbarItemなど） • Duoならではの表示に最適化する （2列表示、ヒンジ対応、折り曲げた状態でのUI調整など）
58. やっていきましょう