Help us understand the problem. What is going on with this article?

SwiftUI で Hello World

概要

  • Xcode 11.0 から導入された SwiftUI でシンプルな Hello World iOS アプリを書く

環境

  • Xcode 11.0
  • Swift 5.1
  • SwiftUI

SwiftUI とは

Xcode - SwiftUI - Apple Developer

SwiftUIでは、Swiftを利用してすべてのAppleプラットフォーム向けのユーザーインターフェイスを、革新的かつ極めてシンプルに構築することができます。

Xcode - SwiftUI - Apple Developer

SwiftUIは宣言型シンタックスを使用しているため、ユーザーインターフェイスの動作をシンプルに記述することができます。たとえば、テキストフィールドからなるアイテムのリストを作成すると書いてから、各フィールドの配置、フォント、色を記述するといった具合です。

プロジェクトの作成

テンプレートから iOS の Single View App を選択する。

swiftui-hello-world-1.png

以下のオプションを選択する。

  • Language: Swift
  • User Interface: SwiftUI

swiftui-hello-world-2.png

プロジェクトを作成すると、以下の3つの Swift のソースコードが用意される。

  • AppDelegate.swift
  • SceneDelegate.swift
  • ContentView.swift

今回はこの内の ContentView.swift を修正して Hello World を実現する。

Hello World を書いてみる

swiftui-hello-world-3.png

import SwiftUI

// SwiftUI の View プロトコルを実装する
struct ContentView: View {

    // コンテンツと動作を記述するプロパティ
    var body: some View {
        Text("Hello World")
    }
}

View プロトコルを実装するコードでカスタムなビューを作成できる。
body プロパティに表示内容と動作を記述する。

View - SwiftUI | Apple Developer Documentation

You create custom views by declaring types that conform to the View protocol. Implement the required body computed property to provide the content and behavior for your custom view.

body - View | Apple Developer Documentation

The content and behavior of the view.

地図を表示してみる

もう少しコンテンツを増やしたサンプルとして地図表示機能を作ってみる。

swiftui-hello-world-4.png

import SwiftUI
import MapKit

struct ContentView: View {
    var body: some View {
        // VStack で縦に配置
        VStack(alignment: .center) {
            Text("日本のへそ")
                .font(.title)
                .foregroundColor(.blue)
            Text("兵庫県西脇市")
                .font(.subheadline)
            // HStack で横に配置
            HStack {
                Text("北緯35度")
                    .font(.subheadline)
                Spacer()
                Text("東経135度")
                    .font(.subheadline)
            }
            // 自分で定義した MyMapView を配置
            MyMapView()
                .frame(height: 200)
        }
    }
}

// 地図を表示する MyMapView を定義
// UIViewRepresentable を使うことで
// UIKit の UIView を SwiftUI で使えるように橋渡しできる
struct MyMapView: UIViewRepresentable {

    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(latitude: 35, longitude: 135)
        let span = MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

ビューとコントロール

SwiftUI で配置できる基本的なビューとコントロールについては Views and Controls | Apple Developer Documentation に載っている。
Text、Image、Button、NavigationLink、MenuButton、PasteButton、Toggle、Picker、DatePicker、Slider、Stepper などがある。

SwiftUI のチュートリアルが用意されている

SwiftUI Tutorials | Apple Developer Documentation からいくつかのチュートリアルを実施できる。ソースコードと見た目を見ながら段階的にUIと機能を構築してくチュートリアルになっているのでわかりやすい。

直近のチュートリアルは以下のようになっている。

参考資料

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away