見出し画像

【じっくりSw1ftUI ７】導入編７〜コードテンプレートを作ろう⑤表示されるビューを切り替えよう

M_Kaku堂

さてと、前回

で、目次リストまでは作れたから、今回は、

ビューの表示を切り替えるタブビュー（TabView）を組み込んでく〜〜〜

TabViewとは、

でも書いてるとおりな機能なんで、解説はこっちを読んでね🌱


前回の最後に、

  • 機能

  • コード

  • ポイント

って書いたんだけど、ビューの構成として

  • 機能：本題の動く機能を盛り込んだビュー

  • コード：そのビューに書かれてるコードを表示するビュー

  • ポイント：解説や自分なりのポイントなんかをまとめたビュー

って感じで、３つのビューを切り替えられるようにしたいので〜〜〜実際に操作をしながら作り込んでく🕺

操作

まずは、３つのビューを用意したいんだけど、前回で、

「個人的な好き嫌いなんだけど、オイラはひとつのSwiftUIファイルの中に複数のビューが混在するのが管理しにくいのが嫌いなので〜〜〜〜」

って書いたんだけど、これは、

作りや趣旨が違うビューを同じファイルにコードで記載したくない
👉管理が面倒臭くなるし、コンフリクトやバグが増える

って意味で、

そのビューを補完するようなビューであれば、
ひとつのファイルでまとめた方が管理しやすいので〜〜〜

ファイルの中にそれぞれビューを追加してく

struct SwiftUIMasterMindsiOS17Ch1Sec1Contents: View {
    var body: some View {
        Text("内容")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Contents()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Code: View {
    var body: some View {
        Text("コード")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Code()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Point: View {
    var body: some View {
        Text("ポイント")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Point()
}

を、前回作った

SwiftUIMasterMindsiOS17Ch1Sec1

ファイルの下の行に追加すると、

てな感じで、右側のプレビューに、、、
内容ビュー
コードビュー
ポイントビュー

って感じでビューが出来上がったのを確認出来たので〜〜〜

前回までで作ったビューにTabViewのコードを追加

青くドラッグしてる箇所を書き換えてく〜〜〜
        VStack{
            TabView {
                SwiftUIMasterMindsiOS17Ch1Sec1Contents()
                    .tabItem {
                        Image(systemName: "hand.thumbsup")
                        Text("機能")
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Code()
                    .tabItem {
                        Image(systemName: "a.square")
                        Text("コード")
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Point()
                    .tabItem {
                        Image(systemName: "star")
                        Text("ポイント")
                    }
            }
        }

にコードを書き換えると

てな感じで表示が切り替わるので👀

Simulatorで実行すると、、、

コードをクリック
ポイントをクリック
てな感じで、

ひとつのビューの中で違うビューに切り替えができた🕺

コードテンプレートって自分で言ってるくらい

デザインに統一性を持たせたいので、tabItem内のImageとTextをまとめて管理するように

タブアイテム管理用のファイルをひとつ追加してく〜〜〜

今回はSwiftFileを選んで、Nextをクリック
Save Asを適当な名前にして、Createをクリック
てな感じで

出来上がったファイルに、

import Foundation

let contentsImageTab = "hand.thumbsup"
let contentsTextTab = "機能"
let codeImageTab = "a.square"
let codeTextTab = "コード"
let pointImageTab = "star"
let pointTextTab = "ポイント"

を貼り付けて、さっきのTabView内のコードを

        VStack{
            TabView {
                SwiftUIMasterMindsiOS17Ch1Sec1Contents()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Point()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
            }
        }

てな感じで書き換え〜〜〜

表示は特に変わらないんだけど
機能を動作確認に書き換えると、、、
てな感じで、すぐに表記がまとめて変更できるので〜〜〜

今後、ビューが沢山増えていった時に、ImageとかTextの内容をまとめて変更したい時に、

💃パラメータ化しておくと便利🕺
てか、共通で使う箇所を一々、コードで個別指定するって、
今後の改修を考えるとゾッとする💦

さらに、コードビューで表示するコードもまとめてひとつのファイルで管理しておきたいので〜〜〜

さっきと同じ容量で、コード管理用のSwiftFileをひとつ増やして〜〜〜

CodeManageFileでCreateして〜〜〜
出来たCodeManageFileに、
import Foundation

let codeSwiftUIMasterMindsiOS17Ch1Sec1 = """


"""

てな感じで

"""
"""

で囲んだ定数をひとつ増やして、ここまでの

SwiftUIMasterMindsiOS17Ch1Sec1ファイル

に書き込んだコードをまるっとコピーして、

てな感じで

丸ごと貼り付け〜〜〜

struct SwiftUIMasterMindsiOS17Ch1Sec1Code: View {
    var body: some View {
        Text("コード")
    }
}

で書いたText("コード")部分を

struct SwiftUIMasterMindsiOS17Ch1Sec1Code: View {
    var body: some View {
        Text(codeSwiftUIMasterMindsiOS17Ch1Sec1)
    }
}

でさっき”””で囲んだ定数をはめ込んであげると、

てな感じで、コードは表示できたんだけど、

このままだと字切れしちゃって、ビューに収まり切れてないので、

struct SwiftUIMasterMindsiOS17Ch1Sec1Code: View {
    var body: some View {
        ScrollView{
            Text(codeSwiftUIMasterMindsiOS17Ch1Sec1)
        }
    }
}

TextViewをScrollViewで囲んであげると、

最後のコードまで確認できた〜〜〜

同様に、iOSApp17DevelopmentEssentialsCh1Sec1も作り込んで〜〜〜

てな感じで完成

最後に、CodeManageFileのコードを完成後のコードに”””の中身を張り替え

import Foundation

let codeSwiftUIMasterMindsiOS17Ch1Sec1 = """
import SwiftUI

struct SwiftUIMasterMindsiOS17Ch1Sec1: View {
    var body: some View {
        VStack{
            TabView {
                SwiftUIMasterMindsiOS17Ch1Sec1Contents()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Point()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
            }
        }
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Contents: View {
    var body: some View {
        Text("内容")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Contents()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Code: View {
    var body: some View {
        ScrollView{
            Text(codeSwiftUIMasterMindsiOS17Ch1Sec1)
        }
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Code()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Point: View {
    var body: some View {
        Text("ポイント")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Point()
}

"""

let codeiOSApp17DevelopmentEssentialsCh1Sec1 = """
import SwiftUI

struct iOSApp17DevelopmentEssentialsCh1Sec1: View {
    var body: some View {
        VStack{
            TabView {
                iOSApp17DevelopmentEssentialsCh1Sec1Contents()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                iOSApp17DevelopmentEssentialsCh1Sec1Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                iOSApp17DevelopmentEssentialsCh1Sec1Points()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
            }
        }
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Contents: View {
    var body: some View {
        Text("機能")
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Contents()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Code: View {
    var body: some View {
        ScrollView{
            Text(codeiOSApp17DevelopmentEssentialsCh1Sec1)
        }
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Code()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Points: View {
    var body: some View {
        Text("ポイント")
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Points()
}
"""

てな感じね👀

後は、これで想定通りに問題なく動くかSimulatorで動かしてみて〜〜〜

想定どおりに問題なく動いたので、検証完了🕺

今回のコード（まとめ）

🔹SwiftUIMasterMindsiOS17Ch1Sec1

import SwiftUI

struct SwiftUIMasterMindsiOS17Ch1Sec1: View {
    var body: some View {
        VStack{
            TabView {
                SwiftUIMasterMindsiOS17Ch1Sec1Contents()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Point()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
            }
        }
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Contents: View {
    var body: some View {
        Text("内容")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Contents()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Code: View {
    var body: some View {
        ScrollView{
            Text(codeSwiftUIMasterMindsiOS17Ch1Sec1)
        }
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Code()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Point: View {
    var body: some View {
        Text("ポイント")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Point()
}

🔸iOSApp17DevelopmentEssentialsCh1Sec1

import SwiftUI

struct iOSApp17DevelopmentEssentialsCh1Sec1: View {
    var body: some View {
        VStack{
            TabView {
                iOSApp17DevelopmentEssentialsCh1Sec1Contents()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                iOSApp17DevelopmentEssentialsCh1Sec1Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                iOSApp17DevelopmentEssentialsCh1Sec1Points()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
            }
        }
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Contents: View {
    var body: some View {
        Text("機能")
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Contents()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Code: View {
    var body: some View {
        ScrollView{
            Text(codeiOSApp17DevelopmentEssentialsCh1Sec1)
        }
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Code()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Points: View {
    var body: some View {
        Text("ポイント")
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Points()
}

🟩TabManageFile

import Foundation

let contentsImageTab = "hand.thumbsup"
let contentsTextTab = "動作確認"
let codeImageTab = "a.square"
let codeTextTab = "コード"
let pointImageTab = "star"
let pointTextTab = "ポイント"

🟧CodeManageFile

import Foundation

let codeSwiftUIMasterMindsiOS17Ch1Sec1 = """
import SwiftUI

struct SwiftUIMasterMindsiOS17Ch1Sec1: View {
    var body: some View {
        VStack{
            TabView {
                SwiftUIMasterMindsiOS17Ch1Sec1Contents()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Point()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
            }
        }
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Contents: View {
    var body: some View {
        Text("内容")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Contents()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Code: View {
    var body: some View {
        ScrollView{
            Text(codeSwiftUIMasterMindsiOS17Ch1Sec1)
        }
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Code()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Point: View {
    var body: some View {
        Text("ポイント")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Point()
}

"""

let codeiOSApp17DevelopmentEssentialsCh1Sec1 = """
import SwiftUI

struct iOSApp17DevelopmentEssentialsCh1Sec1: View {
    var body: some View {
        VStack{
            TabView {
                iOSApp17DevelopmentEssentialsCh1Sec1Contents()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                iOSApp17DevelopmentEssentialsCh1Sec1Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                iOSApp17DevelopmentEssentialsCh1Sec1Points()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
            }
        }
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Contents: View {
    var body: some View {
        Text("機能")
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Contents()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Code: View {
    var body: some View {
        ScrollView{
            Text(codeiOSApp17DevelopmentEssentialsCh1Sec1)
        }
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Code()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Points: View {
    var body: some View {
        Text("ポイント")
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Points()
}
"""

以上🕺

まとめ

でやってた【気ままにUIKit】シリーズとTabやScrollViewなんかを見比べてもらうだけでも、全然、

作業少なく、簡単にコードを追加するだけで、組み込みができる

てことをイメージしてもらえたかなと思う〜〜〜

Apple公式サイト

さてと、次回は

アプリだと必須かな🧐ってくらいよく使うのに、なぜか日本語の市販本だとあまり載っていない

WEBKit

について紹介しよっかな🤔

いいなと思ったら応援しよう！