SwiftUIを初めて使ってみた

はじめに

今までアプリを作る際はStoryboadしか使ったことがなかったので、
SwiftUIに挑戦してみようと思いました。

今回はAppleのSwiftUIチュートリアルをやってみました!

準備

Xcode初期画面にて「Create a new Xcode project」を選択し
次の画面でAppを選択

Interfaceに「SwiftUI」
Life Cycleに「SwiftUI App」を選択

準備完了

PreView機能

エディタに記載した内容がPreviewに反映されます。
コードの内容がうまく反映されないときはResumeボタンを押すことで、Previewに描画されます。

ソースコード

LandmarksApp

LandmarksApp.swift

import SwiftUI

@main
struct LandmarksApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

ContentView

コンテンツが表示される画面になります。
VStackを使用することでレイアウトを縦に並べます。
Spacer()によってスペースを設けたり
padding()で余白を設定できます。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height:300)
            CircleImage()
                .offset(y:-130)
                .padding(.bottom,-130)
            VStack(alignment:.leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                    Spacer()
                    Text("Califonia")
                }
                .font(.subheadline)
                .foregroundColor(.secondary)
                Divider()
                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")                
            }
            .padding()
            Spacer()
        }
            
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

CircleImage

Imageで表示する画像を指定したあとに
clipShape(Circle())を記述することで画像を丸く設定します。

CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.white,lineWidth: 4))
            .shadow(radius: 7)
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

MapView

背景の地図を表示します。

MapView.swift

import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(center:CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868), span:MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2))
    
    var body: some View {
        Map(coordinateRegion: $region)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

完成

使ってみて思ったこと

・VStackとHStackの書き方が特徴的
・Spacer()やpadding()でスペースと余白をつけられることが便利
・コードで書いたものがそのまま画面の部品になるので面白い

参考

Apple Developer Documentation SwiftUI Tutorials