質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

1回答

1688閲覧

SwiftUIでSplitViewのような見た目を実現したい

eleele28

総合スコア18

iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

0クリップ

投稿2021/11/02 02:58

編集2021/11/02 02:58

前提・実現したいこと

SwiftUIにて、UIKitでいうところのSplitViewのような見た目の画面(画面左側からメニューがスライドしてせり出してくるような画面)を作りたいと思っています。
下記のURLの情報を参考にさせて頂き、ひとまず組んでみました。
https://zenn.dev/yorifuji/articles/swiftui-ipad-navigationview

※上記の例では左ペインメニューは1段ですが、今回は↓のような左右2段組のメニューにしようと考えています。
2段組メニュー

発生している問題・エラーメッセージ

1段目のメニューのみ表示させたとき、Xcode上のCanvasでは狙い通り画面の左側3分の1程度に表示されているのですが、
シミュレータ上では左ペインとなるメニューバー(MasterView)が全画面表示となってしまっています。
Xcode上Canvas
↑Xcode上Canvasでメニューバー(MasterView)を1段目のメニューのみ表示させたところ。
シミュレータ上
↑シミュレータ上でメニューバー(MasterView)を1段目のメニューのみ表示させたところ。全画面表示になってしまう

現在実機が手元に無いためこれら以外に見た目を確認する方法がないのですが、
どちらが本当に表示されうる見た目になるのでしょうか?
また、全画面表示を回避する(左ペインとして画面3分の1程度表示する)にはどうすればよいのでしょうか?

該当のソースコード

SwiftUI

1import SwiftUI 2 3//エントリポイントになるビュー 4struct MasterSplitView: View { 5 6 var body: some View { 7 // NavigationViewでMasterView呼び出し 8 NavigationView { 9 //左ペイン用ビュー 10 MasterView() 11 //裏に表示する初期画面のビュー 12 ManualInspection_Crossing() 13 } 14 .padding(0.5) 15 } 16} 17 18//メニュー内に表示するタイル表示定義 19struct MasterViewMenuItem: Identifiable { 20 21 ~~~省略~~~ 22 23} 24 25//メニュー内に表示するタイル表示内容定義用ビュー 26struct MasterViewMenuItemCell: View { 27 var body: some View { 28 29 ~~~省略~~~ 30 31 } 32} 33 34//メインメニューのメニューカテゴリ用定義 35struct MasterViewMenu { 36 37 ~~~省略~~~ 38 39} 40 41// メニューとなる左ペイン側のビュー 42struct MasterView: View { 43 //項目タップ用フラグ 44 @State var tappedMenuFlg :[[Bool]] = [ 45 ~~~タップイベント用処理フラグをテーブル定義、省略~~~ 46 ] 47 48 //画面遷移実現のためのイベント用フラグ 49 @State var showingSubViewFlg :[[Bool]] = [ 50 [ 51 ~~~画面遷移イベント用処理フラグをテーブル定義、省略~~~ 52 ] 53 54 //表示中のメニューインデックス 55 @State var menuItemDispIdx = -1 56 57 //メインメニューのカテゴリ名とメニュー名,アイコンイメージの表示内容 58 @State var MasterViewMenuContents: [MasterViewMenu] = [ 59 60 ~~~メニューに追加表示する内容のテーブル定義、省略~~~ 61 62 ] 63 64 //メニュー内に表示するタイル表示内容定義 65 @State var MenuItems: [MasterViewMenuItem] = [ 66 MasterViewMenuItem(itemName: "手動検査", imageName: "camera", menuItemIdx: 1), 67 MasterViewMenuItem(itemName: "自動検査", imageName: "film", menuItemIdx: 2), 68 MasterViewMenuItem(itemName: "結果閲覧", imageName: "list.bullet", menuItemIdx: 0), 69 ] 70 71 //body定義開始 72 var body: some View { 73 HStack{ 74 //1段目メニュー定義 75 VStack { 76 77 //画面遷移先管理テーブル 78 Group { 79 Group { 80 NavigationLink(destination: 81 TotalResultListView(manualResultList: DummyData.railResultsArray, autoResultList: DummyData.autoRailResultArray), //遷移先画面View 82 isActive: $showingSubViewFlg[0][0]) { 83 EmptyView() 84 } 85 86 ~~~遷移先画面の定義、省略~~~ 87 88 } 89 } 90 91 VStack(spacing: 0) { 92 //メニュー上部のタイルをQgridで表示 93 Form { 94 QGrid(MenuItems, 95 columns: 2, 96 vSpacing: 40, 97 hSpacing: 20, 98 vPadding: 20, 99 hPadding: 20, 100 content: { menuItem in 101 102 MasterViewMenuItemCell(menuItem: menuItem, menuIdx: $menuItemDispIdx) 103 }) 104 .frame(height: 290, alignment: .top) 105 } 106 107 //タイルをタップ時にタイルの下部にサブメニューを出す 108 if self.menuItemDispIdx >= 0 { 109 // メニュー用のリスト生成 110 Form { 111 // セクション配置 112 Section(header: Text(MasterViewMenuContents[self.menuItemDispIdx].categorie), content: { 113 //セクション内のメニューを全て生成する 114 ForEach(0 ..< MasterViewMenuContents[self.menuItemDispIdx].subMenus.count, id: .self) { sub_index in 115 //メニュー配置 116 return HStack { 117 Group { 118 //アイコンを表示 119 if MasterViewMenuContents[self.menuItemDispIdx].subMenus[sub_index].imageName != "" { 120 //ファイルが指定されている 121 Image(MasterViewMenuContents[self.menuItemDispIdx].subMenus[sub_index].imageName) 122 } 123 else { 124 //ファイルが指定されていない 125 Image(systemName: "app") 126 } 127 } 128 //メニュー内容を表示 129 Text(MasterViewMenuContents[self.menuItemDispIdx].subMenus[sub_index].menu) 130 131 Spacer() 132 133 Text(">") 134 135 136 } 137 //メニュータップ時のイベント 138 .onTapGesture { 139 //画面遷移イベント発火用のフラグを立てる 140 showingSubViewFlg[self.menuItemDispIdx][sub_index].toggle() 141 142 //メニュータップフラグを立てる 143 //(タップしたメニューに該当するフラグのみ立てて、他は畳む) 144 (0..<tappedMenuFlg.count).forEach {idx1 in 145 (0..<tappedMenuFlg[idx1].count).forEach {idx2 in 146 withAnimation { 147 if (idx1 == self.menuItemDispIdx) && (idx2 == sub_index) { 148 tappedMenuFlg[idx1][idx2] = true 149 } 150 else { 151 tappedMenuFlg[idx1][idx2] = false 152 } 153 } 154 } 155 } 156 } 157 } 158 }) 159 } 160 .transition(.slide) 161 } 162 else { 163 EmptyView() 164 } 165 166 Spacer() 167 168 } 169 } 170 171 //2段目(右側)メニュー定義 172 VStack { 173 //指定のタップフラグが立っていたら右側の2段目メニューをスライド表示 174 if tappedMenuFlg[2][0] { 175 SubMenuView_AutoInspect_Crossing() 176 .transition(.slide) 177 } 178 } 179 } 180 .navigationTitle("メインメニュー") 181 .navigationBarTitleDisplayMode(.inline) 182 //メニューの上部に表示するツールバーの内容 183 .toolbar { 184 ToolbarItem(placement: .navigationBarTrailing) { 185 //設定画面遷移用ボタン配置 186 Button(action: { 187 //フラグを立てる 188 self.showingSubViewFlg[3][0] = true 189 190 }, label: { 191 //歯車アイコンを表示 192 Image(systemName: "gearshape") 193 }) 194 } 195 } 196 197 198 } 199} 200 201//ナビゲーションバーに各画面共通でログアウトボタンを配置するためのモディファイア 202struct NavBarModifier: ViewModifier { 203 204 ~~~省略~~~ 205 206 207} 208 209//プレビュー用定義 210struct MasterSplitView_Previews: PreviewProvider { 211 static var previews: some View { 212 MasterSplitView() 213 } 214} 215

試したこと

BuildSettingの「iOS DevelopmentTarget」が14.0になっていたため14.1に直しましたが、変わりませんでした。

補足情報(FW/ツールのバージョンなど)

Xcode:Ver.12.3
シミュレータiOS:14.1
Swift:Ver.5.3.2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

「画面解像度が一定以下の場合、SplitViewの全面側に表示されるメニューは全画面表示になる」という仕様によるものと思われます。
画面構成を異なるものに変更したため、質問は閉じさせて頂きます。
おさがわせしました。

投稿2021/11/04 09:32

eleele28

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問