[SwiftUI][iOS]Button(ボタン)で画面遷移する方法(1 / 2)

スポンサーリンク
SwiftUI
スポンサーリンク

2021/5/28

「Buttonで画面遷移する方法を知りたい」

「ボタンを押したら画面遷移するようにしたい」

そういった人に向けて、この記事は書かれています。

どうも、ちょげ(@chogetarou)です。

この記事では、Button(ボタン)で画面遷移する方法を解説します。

スポンサーリンク

画面遷移

Iphone, 手, 画面, スマート フォン, アプリ, 携帯電話, 電話, 通信, モバイル, 技術

その前に画面遷移について少し触れておきます。

画面遷移には、2パターンあります。

  • 画面自体を切り替える
  • 画面の上に画面を被せる(モーダル表示)

この2パターンをボタンで実現する方法をそれぞれ解説します。


世界最大級のオンライン学習サイトUdemy

画面自体を切り替える

表示されている画面自体を切り替える場合は、列挙体を使います。

表示する画面をそれぞれ列挙体の値とすることで画面遷移させます。

手順は以下の流れです。

  1. 列挙体を作る
  2. 列挙体の値を変数に格納する
  3. 値によって画面を表示するようにする
  4. 変数内の値をButtonで変える
  5. 画面が遷移する

列挙体を作る

まず、列挙体を作ります。

例えば、4つの画面がある場合は

enum display {
   //画面1
    case first
   //画面2
    case second
    //画面3
    case third
   //画面4
    case fourth
}

列挙体の値を変数に格納する

表示させたい画面と対応する列挙体の値を変数に格納します。

後々、値を変えることによって画面を表示し直すので、@StateやObservedObjectを使います。

//画面1を格納
var displayMode = display.first

変数に@Stateを使う場合は、@Bindingを使って、表示している画面から値を操作できるようにします。
@Bindingについてはこちらの記事で解説しています。

値によって画面を表示するようにする

条件分岐を使うことで、変数の値によって画面を表示するようにします。

if displayMode  == display.first {
   firstView()
} else if displayMode == display.second {
   secondView()
} else if displayMode == display.third {
   thirdView()
} else if displayMode == display.fourth {
   fourthView()
}

変数の値をButtonで変える

Buttonのaction内で変数の値を変えます。

例えば、firstViewからsecondViewに遷移したいなら

Button(action: {
    displayMode = .second
}) {
    Text("Secondビューへ")
}

画面が遷移する

実際にButtonをタップすると、変数の値が変わります。

そして、条件分岐の真偽が変わるので、表示される画面も変わります。

これがButtonで画面遷移する方法の1つです。


世界最大級のオンライン学習サイトUdemy

まとめ

  • 画面遷移する方法は2パターン
    画面自体の切り替え
    画面の上に画面を表示する(モーダル表示)
  • 画面自体の切り替えは、列挙体と条件分岐を使うことで実現できる
  • 条件分岐に使用する変数の値をButtonで変えることによって画面遷移出来る

次の記事

次の記事では、画面の上に画面を表示するモーダル表示について解説します。

オススメの書籍

Amazon.co.jp: 1人でアプリを作る人を支えるSwiftUI開発レシピ (技術の泉シリーズ(NextPublishing)) eBook : 佐藤 剛士: 本
Amazon.co.jp: 1人でアプリを作る人を支えるSwiftUI開発レシピ (技術の泉シリーズ(NextPublishing)) eBook : 佐藤 剛士: 本
Amazon.co.jp: SwiftUI 対応 たった2 日でマスターできる iPhone アプリ開発集中講座 Xcode 13/iOS 15/Swift 5.5 対応 eBook : 藤治仁, 小林加奈子, 小林由憲: 本
Amazon.co.jp: SwiftUI 対応 たった2 日でマスターできる iPhone アプリ開発集中講座 Xcode 13/iOS 15/Swift 5.5 対応 eBook : 藤治仁, 小林加奈子, 小林由憲: 本
SwiftUI 徹底入門 | 金田 浩明 | コンピュータ・IT | Kindleストア | Amazon
Amazonで金田 浩明のSwiftUI 徹底入門。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
Amazon.co.jp: 絶対に挫折しない iPhoneアプリ開発「超」入門 第8版 【Xcode 11 & iOS 13】 完全対応 eBook : 高橋 京介: 本
Amazon.co.jp: 絶対に挫折しない iPhoneアプリ開発「超」入門 第8版 【Xcode 11 & iOS 13】 完全対応 eBook : 高橋 京介: 本

コメント

タイトルとURLをコピーしました