iPhone だとこんな感じに表示されますが・・・。

iPad だと部品が左側に表示されます。

iPad だと NavigationView を利用すると画面の左側にナビゲーションとして部品を表示するみたいです。これを iPhone と同じ表示にしたいと思います。

navigationViewStyle を設定する

navigationViewStyle に StackNavigationViewStyle() を設定します。

        NavigationView {
            VStack {
                Text("First View")
                NavigationLink(destination: SecondView(), isActive: self.$model.secondViewPushed) {
                    Button(action: {
                        self.model.secondViewPushed = true
                    }) {
                        Text("次へ")
                    }
                }
            }
        }.navigationViewStyle(StackNavigationViewStyle())

動作確認

iPad を iPhone と同じ表示にすることができました！！

最後に

iPad と iPhone で表示が異なると、それぞれのデバイス毎に画面のデザインをしないといけなくなるので、 iPad と iPhone で特に画面のレイアウトを変える必要がない場合は今回の対応を行うことで同じ画面レイアウトで実装していけると思います。

もちろん、 iPhone と iPad のそれぞれの特徴を活かしたアプリを開発したいのであれば、 NavigationView の部品が iPad の左側に表示されることを上手く活用した方が良いと思います。表示できる情報量なども iPhone と iPad では異なるので、自分が作りたいアプリに合わせて設計・実装していきたいですね。

The post [SwiftUI]NavigationView の表示を iPhone と iPad で同じにする first appeared on CodeLab.

SwiftUI とは

developer.apple.com

 

5 Users

18 Pockets

SwiftUIの概要 - Xcode - Apple Developer

https://developer.apple.com/jp/xcode/swiftui/

SwiftUIでは、Swiftを利用してすべてのAppleプラットフォーム向けのユーザーインターフェイスを、革新的かつ極めてシンプルに構築することができます。

上記サイトに SwiftUI の詳細が記述されているので、興味がある人は参考までにどうぞ！

Xcode を開く

Xcode のアプリを開き「 Create a new Xcode project 」をクリックします。

プロジェクトの種類を選択

以下の画面が開くので、「 Single View App 」を選択し「 Next 」をクリックします。

すると以下の画面が開くので、「 Product Name 」に「 test 」、「 Language 」に「 Swift 」、「 User Interface 」に「 SwiftUI 」を選択して「 Next 」をクリックします。

保存場所を聞かれるので、自分がプロジェクトを保存したい場所を選んで「 Create 」をクリックします。

ContentView を確認する

プロジェクトが作成されたので、「 ContentView 」を確認します。

//
//  ContentView.swift
//  test
//
//  Created by Koichi Ezato on 2020/04/01.
//  Copyright © 2020 Koichi Ezato. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Hello World! とテキストで実装されているのが確認できます。
では、現在の状態でビルドして、シミュレータで動作を確認してみたいと思います。

ビルド＆動作確認

Xcode の左上にあるビルドボタンをクリックします。

以下の様に表示されればビルド成功です！

今回は iPhone 11 Pro Max のシミュレータを使用しています。

最後に

SwiftUI のプロジェクトを作成することができました！次回以降で、 SwiftUI の様々な実装方法についても説明していきたいと思います。

The post [SwiftUI]プロジェクトを新規作成する first appeared on CodeLab.