SwiftUI 4泊5日の旅（4日目：実装例② PageView）

はじめに

前回同様思いついたレイアウトを作っていきますが、今日は全然捗らなかったので途中経過です。

PageView的なもの

ConcentricOnboardingを使って旅日記を作っています。

ContentView.swift

import SwiftUI
import ConcentricOnboarding

struct ContentView: View {
    var body: some View {
        let pages = (0...3).map { i in
            AnyView(PageView(imageName: "pic\(i)", text: Data.texts[i]))
        }
        let colors = (0...3).map { i in
            Color("color\(i)")
        }
        return ConcentricOnboardingView(pages: pages, bgColors: colors)
    }
}

struct PageView: View {
    var imageName: String
    var text: String
    var body: some View {
        let imageSize = UIImage(named: imageName)!.size
        let aspect = imageSize.width / imageSize.height
        return
            VStack(alignment: .center, spacing: 30) {
                Image(imageName)
                    .resizable()
                    .aspectRatio(aspect, contentMode: .fill)
                    .frame(width: 300, height: 450)
                    .cornerRadius(20)
                    .shadow(radius: 10.0)
                Text(text)
                    .font(Font.system(size: 24, weight: .bold, design: .rounded))
                    .foregroundColor(.black)
                    .shadow(radius: 3.0)
            }.padding(10)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        PageView(imageName: "pic1", text: "バチカン")
    }
}

struct Data {
    static let texts: [String] = [
        "イタリア(ローマ)",
        "バチカン",
        "クルーズ船",
        "モンテネグロ"
    ]
}

こんだけのコードですが、動かすと↓おしゃれにページ送りできます。

アプリ使い始めのチュートリアルにも使えますね。
各ページをViewで用意すればよいのが楽なポイント。

最終的には1ページ1枚ではなく、WaterfallGridとかも併用して何枚かずつ出したいです。

最後に

さて、今日のSwiftUI旅のグルメは沖縄料理です😋




※写真は2018年夏旅行のものです

束の間の旅行でしたが、次回が最終日です。