初めてのSwift5 その7

今日はタブを作る

諸君、今回はアプリらしく、SwiftUIでタブを作ってみたいと思う!(キリッ)
ということで、今回も簡単なものにします。
小さなモジュールを覚えて大きなアプリを作ろうぜってことです。

相変わらず汚い絵ですが、実はiPadで描いてるんですよ(ドヤッ)
ただペンシルで描いてるとドラッグモードになったり、テキストモードになったりなるのは私だけなんですかね・・・そのあたりが不満。

それはさておいて、今回は画面がなんと三枚もあります。
といっても、何時も通り最初の画面にタブを作成してそこからタブをタッチすることでそれぞれの画面を切り替えて表示するというそんな簡単なものです。
いきなりその2からテクニカルなことして飛ばしてましたがここは初心に帰ってコツコツ簡単なことが初めていきましょう。

TabView

タブを作る時はこんなコードを追加します。

//  タブを作成する際のオマジナイ
TabView{
    //  初期画面(左側のタブ)
    //  タブはディフォルトで画面下に作成されます。
    //  上に出るものと思ってたので意外だなと。
    formView()
        .tabItem{
            //  タブの設定
            //  list.dashってのはiOSにあるみたい
            Image(systemName:  "list.dash")
            //  タブのキャプション
            //  軽くする為かわからないけど、Swiftにはプロパティにこういうのないので面倒だね。
            //  言い換えれば柔軟性はあるんだけども。
            Text("設定")
        }
           
    formView2()
        .tabItem{
            //  タブの設定
            //  square.and.pencilってのはiOSにあるみたい
            Image(systemName: "square.and.pencil")
            //  タブのキャプション
            Text("管理")
        }
 }

やっていることを軽く説明します。
formView及びformView2というのは、私が作成した画面のことでTabViewの
中にそれを呼び出してねって言うのを定義しています。
tabItemとして、イメージとテキストを表示しています。
イメージ名はもう既にシステム名として定義しているものを使用しています。
カスタムで作成したアイコンも表示できますが、ここでは省略しています。
アイコンについてはAppleの仕様に準拠する必要がありますのでご注意を。

formView

ファイルの追加でSwiftUIを追加して自動的に作成されたソースコードをチョチョイと変更を加えているだけです。
分かりやすくイメージ表示しているだけなので大したことしていません。

struct formView: View {
   var body: some View {
       //  下手くそな絵を表示(ドーナツ)
       Image("setting")
   }
}

イメージは、自分の好きな絵を用意してください。

やり方は簡単です。
こんな感じでAssets.xcassetsの中に自分の好きな絵を放り込みます。
ここの名前部分が、Imageで表示したい名前と一致させる必要があります。

formView2の説明は同じなので省略します。

実行してみよう

こんな感じで表示されました。
画面表示した段階だと設定を選択した状態で始まります。
管理タブを押してみましょう。

ノートの絵が表示されましたね。
このあたりの画像は好きな絵に変えてみて遊んでみてください。
ね、簡単でしょ?
ということで、今回はここまで。

今回のソースコード

note.png

setting.png

formView.swift

//
//  formView.swift
//  HogeHoge5
//
//  Created by melon on 2020/05/12.
//  Copyright © 2020 melon-group. All rights reserved.
//

import SwiftUI

struct formView: View {
   var body: some View {
       //  下手くそな絵を表示(ドーナツ)
       Image("setting")
   }
}

struct formView_Previews: PreviewProvider {
   static var previews: some View {
       formView()
   }
}

formView2.swift

//
//  formView2.swift
//  HogeHoge5
//
//  Created by melon on 2020/05/12.
//  Copyright © 2020 melon-group. All rights reserved.
//

import SwiftUI

struct formView2: View {
   var body: some View {
       //  下手くそな絵を表示(ノート)
       Image("note")
   }
}

struct formView2_Previews: PreviewProvider {
   static var previews: some View {
       formView2()
   }
}

ContentView.swift

//
//  ContentView.swift
//  HogeHoge5
//
//  Created by melon on 2020/05/09.
//  Copyright © 2020 melon-group. All rights reserved.
//

import SwiftUI

struct ContentView: View {
   var body: some View {
       //  タブを作成する際のオマジナイ
       TabView{
           //  初期画面(左側のタブ)
           //  タブはディフォルトで画面下に作成されます。
           //  上に出るものと思ってたので意外だなと。
           formView()
           .tabItem{
               //  タブの設定
               //  list.dashってのはiOSにあるみたい
               Image(systemName:  "list.dash")
               //  タブのキャプション
               //  軽くする為かわからないけど、Swiftにはプロパティにこういうのないので面倒だね。
               //  言い換えれば柔軟性はあるんだけども。
               Text("設定")
           }
           
           formView2()
           .tabItem{
               //  タブの設定
               //  square.and.pencilってのはiOSにあるみたい
               Image(systemName: "square.and.pencil")
               //  タブのキャプション
               Text("管理")
           }
       }
   }
}
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}