SwiftUI基本編① Creating and Combining Views

注) プロジェクトの作成

プロジェクトを作成する際は、下画像のように「User Interface」の項目をSwiftUIにしておくことを忘れないようにしましょう。 make project

このような感じになっていればおk。

Hello World

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

//ContentView_Previewsはプレビュー用のコードなので今後弄る必要はない
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ポイントとなる箇所は次の3つです

ポイント

  1. SwiftUIパーツの加工
  2. Stackでパーツをまとめる
  3. UIKitとSwiftUIを共存させる

順次解説していきます。

ポイント1. SwiftUIパーツの加工

下画像のようにHello Worldを加工してみる。ここで加工しているTextに加えてImageView等も同様のやり方で加工が可能なので割愛。 Changed Hello World

やり方は二種類ある

  • コードから変更を加える方法
  • GUIから変更を加える方法

方法1. コードから変更を加える方法

直接コードを書く方法が一つ

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .foregroundColor(.blue) //ココ
            .font(.largeTitle)  //ココ
    }
}

方法2. GUIから変更を加える方法

加工したいパーツを⌘クリック→「Show SwiftUI Inspecter」と開くことで各プロパティをいじることができる。GUI上で設定すると対応するコードが自動的に記入される Change Property

ポイント2. Stackでパーツをまとめる

三つのTextをStackでまとめています。

Arrange Stack

注目すべきポイントは次の三つでしょうか。

  • VStackには左揃えのAlignmentを設定している
  • Spacer()で「ヤッホ」と「あああ」の間隔を作っている
  • padding()で枠からの間隔を作っている
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {  //ココ
            Text("Hello, World!")
                .font(.largeTitle)
                .foregroundColor(.blue)
            HStack {
                Text("ヤッホ")
                    .font(.subheadline)
                Spacer()  //ココ
                Text("あああ")
                    .font(.subheadline)
            }
        }
    .padding()  //ココ
    }
}

ポイント3. UIViewRepresentableでUIKitとSwiftUIを共存させる

UIViewRepresentable

このプロトコルを継承させることでUIKitとSwiftUIの画面を統合することができます!!

手順1. Viewの制作

create new interface

makeUIView今回はMapViewをして欲しいので、

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
	//UIKitViewの描画を行う
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
	//更新されたときの挙動
    func updateUIView(_ uiView: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        uiView.setRegion(region, animated: true)
    }
}

手順2 制作したViewをStack内に埋め込む

MapView()特にVSStackでまとめていることに注意する

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .edgesIgnoringSafeArea(.top)
                .frame(height: 300)
                
            VStack(alignment: .leading) {
                Text("Hello, World!")
                    .font(.largeTitle)
                    .foregroundColor(.blue)
                HStack {
                    Text("ヤッホ")
                        .font(.subheadline)
                    Spacer() 
                    Text("あああ")
                        .font(.subheadline)
                }
            }
            .padding()
            Spacer()
        }
    }
}

result

まとめ

  • パーツはStackでまとめられ、.paddingSpacer()で位置の調整を行うことができる
  • 各パーツはコード及びGUIからも簡単にプロパティの設定を行うことができて便利
  • UIViewRepresentableを継承したViewはSwiftUIに統合が可能

Published under  on .

Last updated on .

サクプロ

プログラミング初心者に向けて、体系的なサイト作りを心がけて情報発信していくよ
当サイト、あるいは僕に興味のある人はこのページを見て欲しいよ