省エネエンジニア

Flutter、vue.js修行中。

【iOS】SwiftUIチュートリアルやってみた

WWDC 2019 で SwiftUI が発表されましたね。

とりあえず使ってみたいですよね。

Xcode11

SwiftUIを使うにはXcode11 が必要みたいです。
ダウンロードはこちら。beta版をダウンロードできます。

https://developer.apple.com/download/

チュートリアルページはこちら。

developer.apple.com

実装

  • Single View Application -> Next
  • Use SwiftUIにチェック

f:id:qkuroneko:20190612161354p:plain:w420

import SwiftUI

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

f:id:qkuroneko:20190612163523p:plain:w320

  • テキストの色、フォントを変える
import SwiftUI

struct ContentView : View {
    var body: some View {
        Text("Hello World!!!!!")
        .font(.title)
        .color(.green)
    }
}

f:id:qkuroneko:20190612163822p:plain:w320

  • 横にプレビューが表示されるみたいですが、私のOSがまだMojave 10.14.5のままなので見てれないです

  • 縦方向に並べる

import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack {
            Text("Hello World!!!!!")
                .font(.title)
                .color(.green)
            Text("Hello World!!!!!")
                .font(.subheadline)
        }
    }
}

f:id:qkuroneko:20190612165117p:plain:w320

  • VStackにalignmentつけつつ横方向に並べる
  • Spacer()は空いてるスペース埋めちゃう感じ
import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack(alignment: .trailing) {
            Text("Hello World!!!!!")
                .font(.title)
                .color(.green)
            HStack {
                Text("Hello World!!!!!")
                    .font(.subheadline)
                Spacer()
                Text("foooo")
            }
        }
    }
}
  • padding
import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack(alignment: .trailing) {
            Text("Hello World!!!!!")
                .font(.title)
                .color(.green)
            HStack {
                Text("Hello World!!!!!")
                    .font(.subheadline)
                Spacer()
                Text("foooo")
            }
        }
        .padding(.leading)
    }
}
  • .padding()だけだと全方向にpaddingできるのかな。

  • 画像を丸くする

  • ページ上部のリンクからサンプルをDLするとチュートリアルで使用している画像を手に入れることができます。

  • Assetsに画像をD&Dします
  • 新しいSwiftUIファイルを作って「CircleImage」って名前をつけます
CircleImage.swift

import SwiftUI

struct CircleImage : View {
    var body: some View {
        Image("turtlerock")
        .clipShape(Circle())
        .overlay(Circle().stroke(Color.white, lineWidth: 4))
        .shadow(radius: 10)
    }
}
  • .clipShape(Circle())で画像を丸くできる
  • .overlay()で画像の周りにstrokeをつけることができる
  • .shadow()で画像の周りに影をつけられる
  • RootのViewでCircleImage()を呼ぶと丸く切り取られた画像のViewを呼び出すことができる

f:id:qkuroneko:20190612175804p:plain:w320

  • 地図を使う
  • MapView.swiftファイルを作る
MapView.swift


import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
    func updateUIView(_ view: 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)
        view.setRegion(region, animated: true)
    }
}
  • UIViewRepresentableを継承する
  • このクラスのことよく分からないのですがmakeUIView()updateUIView()をオーバーライドして地図の大きさやどこを指すかとか設定って感じ

  • これまで学んだことを組み合わせするとこんなのができる

f:id:qkuroneko:20190612180353p:plain:w320

import SwiftUI

struct ContentView : View {
    var body: some View {
        
        VStack {
            MapView()
                .frame(height: 300)
            
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
            
            Spacer()
        }
    }
}
  • 真ん中に鎮座している画像の位置をoffsetで上のViewに乗せてるんですね。

  • チュートリアルを最後まで進めたら一番下に問題があるので答えてみます。

こんな感じでチュートリアルの「Creating and Combining Views」は終了です。
後日、続きをやっていきたいと思います。