SwiftUIチュートリアルを雑にやってみる

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views
コレやっていきましょう
まじで雑にやっていくので、コレは違うわいクソボケがというところあったらコメントなりなんなりください。

#Creating and Combining Views編

まず、Xcode-Beta.xipをダウンロード、インストールします。
くっそ時間かかりますが、がんばりましょう。

プロジェクト作成

起動できたとします。

Create a new Xcode project

を選択します。

Single View App

を選択します。

するとこんな画面に遷移しますので、プロジェクト名、organization name、organization id、を記入し、

use SwiftUI

にチェックを入れてください。

どのディレクトリに作るか？を聞いてくるので適当なところで作ってください。

デフォルト画面が出てきました。
helloWorldですね。

チュートリアルでは、画面右にCanvasというのが表示されてPreviewとやらが表示されているはずなんですが、私の環境では表示されません。
一通り触ってみましたが、出し方もわかりません。

Step 5
In the canvas, click Resume to display the preview.
Tip
If the canvas isn’t visible, select Editor > Editor and Canvas to show it

とありますが、僕の英語力では何を言ってるかさっぱりです。とりあえずEditorからEditor and Canvasを選択しましたが、全く変わりません。誰か教えてください。
※コメントよりMacOSもbeta(katalina)になっていないと表示されないようです。

とりあえず、エミュレーターは既存のXcodeと同様に起動するようなので、一旦コードを追っていきます。
まずはど定番のHelloWorldの書き換えでHello SwiftUIと書き換えてアプリを見てみましょう。

import SwiftUI

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

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

文字列が書き換わると画面上の表示も変わりますね。
今度はフォントや色を変更しましょう。

struct ContentView : View {
    var body: some View {
        Text("sekiro死ぬほどむずい")
        .font(.title)
        .color(.red)
    }
}

これだけで変更できました。どうやらstruct構造体がViewを継承していてカスタムViewを作っているのではないでしょうか？
そこにTextオブジェクトを作成しパラメータを設定するとそれが反映されたViewが表示される。そんな感じがしますね。

チュートリアル上では、PreviewからInspectorを設定できるよ。的なことを言っていますが、いかんせんPreviewがないのでやってられません。やっていることは上記コードと同一のことと思われます。ので飛ばします。

Combine Views Using Stacks

次に2つのViewのガッチャンコをやってみます。
アプリを作る上でよく出るViewですね。

上記のコードをカスタマイズしていきます。
チュートリアルではまず、TextをCommand-clickして出てきた選択肢のEmbed in VStackを選択しろと言ってきます。
が、私の環境では出てきません。あれ…俺一時間くらいかけてインスコしたんだけど間違えたのインスコしたのかな…（涙）
ないものはしょうがねぇので結果的にできるコードを写経します。

struct ContentView : View {
    var body: some View {
        VStack{
            Text("sekiro死ぬほどむずい")
                .font(.title)
                .color(.red)
            Text("死")
                .font(.subheadline)
                .color(.red)
        }
    }
}

まずこんな感じにembedすることで並び順にバーティカルに表示することができました。
死をcombineするためにText("死")をCommand-clickし、Embed in HStackを選択します。
私は結果的にできるコードを写経します

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading){
            Text("sekiro死ぬほどむずい")
                .font(.title)
                .color(.red)
            HStack{
                Text("まぼろしお蝶")
                    .font(.subheadline)
                    .color(.red)
                Spacer()
                Text("まだまだ子犬よ")
                    .font(.subheadline)
                    .color(.red)
            }
        }.padding(75)
    }
}

いい感じに
[TextView space TextView]が実現できました。
画像のせいでくっそ長くなってきましたがまだまだがんばります。

Create a Custom Image View

次はサークルViewを作ります。コレはよく使うのかはちょっと疑問ですけど、おしゃれなのでやっていきましょう。
まず使いたい画像をアセットに登録します。
Assets.xcassetsを選択し、使いたい画像をドラッグアンドドロップしてください。
File > New > Fileを選択しますと新規追加ファイル画面が出ます。

SwiftUIViewを選択しましょう。新たなViewの追加です。
あたらしいViewは再びHelloWorldが表示されていますのでカスタムしていきます。

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

簡単ですね。previewがある人はいい感じに表示されたんじゃないでしょうか。

Use UIKit and SwiftUI Views Together

次も新しいViewです。チュートリアルでは土地紹介画面を作ろうとしているようですね。
同じ手順でViewを作成していきます。

import SwiftUI
import MapKit

struct Map : 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)
    }
}

新しい要素が出てきましたね。

import MapKit

これはUIKitの地図系のライブラリでしょう。
やっていることはマップViewを作って、マップ位置をアップデートすることで指定座標を表示しているようです。
わからない場合は呪文だと思って一旦受け入れて写経しましょう。

Compose the Detail View

次に今まで作ったViewを同時に表示して一つの画面を作ります。
最初に作ったContentViewが基本的にアプリに表示されるViewですので、そこをいじることで
複数のViewを表示し、よりリッチに画面を彩ることができます。

struct ContentView : View {
    var body: some View {
        VStack{
            Map()
                .frame(height: 300)
            VStack(alignment: .leading){
                Text("sekiro死ぬほどむずい")
                    .font(.title)
                    .color(.red)
                HStack{
                    Text("まぼろしお蝶")
                        .font(.subheadline)
                        .color(.red)
                    Spacer()
                    Text("まだまだ子犬よ")
                        .font(.subheadline)
                        .color(.red)
                }
            }.padding(75)
        }
    }
}

元あったContentViewをさらにVStackでくるんでMap()を追加しました。
次はCircleImageを追加します。

struct ContentView : View {
    var body: some View {
        VStack{
            Map()
                .frame(height: 300)
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            VStack(alignment: .leading){
                Text("sekiro死ぬほどむずい")
                    .font(.title)
                    .color(.red)
                HStack{
                    Text("まぼろしお蝶")
                        .font(.subheadline)
                        .color(.red)
                    Spacer()
                    Text("まだまだ子犬よ")
                        .font(.subheadline)
                        .color(.red)
                }
            }.padding()
            Spacer()
        }
    }
}

コードを追ってみると非常にわかりやすく記述できているんじゃないでしょうか。
以上でチュートリアル第一章終了です。お疲れ様でございました。

所感

新しいフレームワークかぁー触ってみよーと思ってついでに書いた記事ですが、思いの外カスタムViewをコードで管理できていて、かなりプログラマに優しい書き方ができるようになったんではないでしょうか。
今後Swiftネイティブで開発していく場合、SwiftUIがスタンダードになりそう。というパワーは感じました。
いいんじゃない？SwiftUI。俺は嫌いじゃないぜ。