SwiftUI チュートリアルをやってみた

はいどうも〜うっくんで〜〜〜〜す！！！

SwiftUIチュートリアルをやってみました！紹介します。

本家はこちら。英語を読める方は公式でも全然OKです。

Creating and combining views | Apple Developer Documentation

SwiftUIとは

"SwiftUIゆうたら、ぎょうさんあるAppleプラットフォームぜ〜んぶで使える、UIをメッサ早く作れる新しいやり方や。しかもコードがキレイで、ブワーっちゅう感じやねん。" (Apple公式サイトより筆者が大阪弁に翻訳)

Introducing SwiftUI | Apple Developer Documentation

大変わかりやすいですね。Appleさんありがとうございます。

これまでもiOS, MacOS向けのアプリ開発にはXcode内のUIビルダーがありました。

しかし、従来はプログラムを書いてUIを描画する方法と、 Storyboardと呼ばれるGUIツールを使ってUIを作り込んでいく方法の2つがありました。

どちらも一長一短と言われていて、特にStoryboardを作ると、チーム開発がしづらくなったりデバグが難しくなるなどのデメリットがあったため企業などの開発環境では嫌われていました。知らんけど。

そんな2つの方法のいいとこ取りをしたのが、今回発表されたSwiftUIというわけです。

環境

SwiftUIで遊ぶには、Xcode 11 Betaが必要です。Appleの開発者向けサイトからいつも通りダウンロードしましょう。

Xcode 15 - Apple Developer

ついでに、SwiftUIのライブプレビュー機能を使うためにはMacOS Catalina Betaも必須となっており、MacOSをBeta環境にしないといけないので、ちょっと面倒です。今のところ大きな不具合などは感じていませんが、業務で不都合が生じる可能性があるマシンなどの場合は慎重に自己責任でお願いいたします。

ライブプレビューがないとハッキリ言って全然面白くない（笑）ので、できれば MacOS Catalina Betaとセットでやっていきましょう。

まずは触ってみよう

とりあえず SwiftUIを触ってみるのはメッサ簡単です。

いつも通りXcodeから新規プロジェクトを作成するときに、SwiftUIのチェックボックスをオンにすればOKです。

起動したら、いきなり右側にSwiftUIのライブプレビューが表示されます。

たまにポーズされたりするので、Resumeを押せばコードがビルドされてライブプレビューが再開されます。筆者の環境では最初の段階でエラーが出たのですが、Xcodeの「設定／アカウント」で開発者情報を追加することでとりあえずビルドは成功しました。ずっと黄色エラーが出てますが、ベータだしとりあえず気にしな〜い。

いきなりHello Worldが表示される。いい感じ。

ここまでだと見た目的にあんまりStoryboardと変わりませんが・・・

いじってみる

まずはライブプレビューの方でテキストを変更してみましょう。

Hello Worldの文字を⌘+クリックするとポップオーバーが出てくる。Inspectを選択すると、要素のプロパティにアクセスできる。

上の写真をよくみてください。コードの方も同時に更新されているのが分かります。これがSwiftUI最大のメリット。多分。

さらにプロパティを変更してみる

他のプロパティも試しに変更してみましょう。

FontプロパティをLarge Titleにしてみました。

でっかくなっちゃった！！！

こんな感じにコードも自動で書き変わる。あら素敵。

微妙に構文が気持ち悪いですが、Text()にドットシンタックスで繋げているだけです。横に長くなっちゃうので標準で改行＆インデントが入る仕様になっています。（改行はあってもなくてもビルドが通ります。）

このようにドットでどんどんチェーンし（繋げ）ていくことによって、プロパティを追加で書き換えていくようになっています。予備知識があまりなくても、補完機能のおかげで、ある程度何ができるかはわかります。

ちなみに、⌘+クリックはライブプレビュー内の要素だけでなく、コードそのものに対しても同様に効きます。

要素を追加する

ではさらにUI要素を追加してみましょう。

要素を追加するときは、並び方（縦に並べるor横に並べる）を教えてやらないといけないので、VStack（Vertical Stack=縦並び）かHStack（Horizontal Stack = 横並びを使います。今回は試しに縦並びにしてみます。

Text()を⌘+クリックして、Embed in VStack（VStackに埋め込み）を選択します。

VStackに埋め込んで、Text()を１行追加するだけで・・・

はいすごい。死ぬほど簡単に、プログラマーじゃない筆者でも、プログラマティックにUIを作成することができた。そんなんできひんやん普通。

コードはこちら↓

struct ContentView : View {
   var body: some View {
       VStack {
           Text("Hello うっくん")
               .font(.largeTitle)
           Text("UI/UXデザイナー")
       }
   }
}

続いて、これをみんな大好きな「左揃え」にしてみます。

VStackに「先端揃え」を意味する.leadingを追加してあげます。なんで「左揃え」じゃないかというと、.leadingにしておけばアラビア語のように右から読む言語の時に自動的に右揃えになるからです。はい、Appleすごーーい。

struct ContentView : View {
   var body: some View {
       VStack(alignment: .leading) {
           Text("Hello うっくん")
               .font(.largeTitle)
           Text("UI/UXデザイナー")
       }
   }
}

カスタムImage Viewを作る

次は横にうっくんのアイコンを表示してしてみたいので、カスタムビューを追加して、読み込んでみたいと思います。

⌘+Nで新規ファイルを追加。SwiftUI Viewを選択。

名前は適当に設定して、プロジェクトフォルダに追加しましょう。

最初に編集した、ContentView.swiftと同様にHello WorldのデフォルトUI Viewが追加されました。

ちなみに、#if Debug以降のセクションは呪文だと思って無視しても大丈夫。実際はこの部分のコードがライブプレビューに表示する要素を呼び出している。UIが複雑になってくるとライブプレビュー上で非表示にしたい要素が出てくるので、そのような場合にこの部分を書き換えて表示非表示をコントロールできる。

画像をインポートする

続いてプロフィール写真として使う画像をプロジェクトに取り込み（インポート）します。

ファイルナビゲーターからAssets.xcassetsをクリックして、使用する画像をドラッグ&ドロップします。

画像がインポートできたので、User Icon.Swiftに戻って、内容を編集していきます。

Hello Worldは不要なので、削除します。同じ場所に、画像を挿入するImage()を記入します。

新しくUI要素を追加する際、プログラムで書いても良いが、⌘+Shift+LでUIライブラリー一覧を呼び出して、コードにドラッグアンドドロップすることでも挿入できる。

この時点でコードはだいたい以下のようになっています。

import SwiftUI

struct User_Icon : View {
   var body: some View {
       Image()
   }
}

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

Image()の中に、先ほどインポートした画像を入れます。（拡張子は不要で、ダブルクォートで囲む。）

従来であれば、これだけでもそれなりに複雑な操作とコード記述を必要としていたが、ほぼドラッグアンドドロップだけでコードが勝手に生成されているのがすごい。しかもそのコードはほぼ製品にそのまま使用できる。まさにUIデザイナーとプログラマーの端渡し的存在。

画像を丸く切り抜く

アイコンに使用するので丸く切り抜いてみたい。もちろんそれ用に便利な機能が用意されている。

動いたーーーーー。Imageを切り抜くためには.clipShapeを使う。今回は「丸」で切り抜きたいので、clipShapeに丸を表す「Circle()」をぶん投げてやる。

struct User_Icon : View {
   var body: some View {
       Image("ukkun")        
           .clipShape(Circle())
   }
}

枠線とドロップシャドウをぶちかます

画像丸くしただけだとちょっと物足りないので、枠線とドロップシャドウを追加してApple風のデザインに改造していきます。

clipShapeの上にOverlayで丸い枠線(=Circular border)を被せることで枠線を実現する。

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

上記コードで白枠とシャドウを追加できた。完全に自力だけで書いていくには多少慣れが必要だが、可読性が高く非プログラマーのUIデザイナーでもワンチャン読めるレベル。

最初に作ったTextViewとImageViewを組み合わせる

アイコンができたので、先程のテキストと組み合わせていきます。

今一度ContentView.swiftに戻りましょう。

先程はVStackで縦に積み上げましたが、今度はテキストの横にアイコンを配置したいのでHStackを使います。

すでにあるVStackを⌘+クリックして、HStackに埋め込みます。(Embed in HStack)

そして、カスタムビューとして作ったUser_Icon()を呼び出して、VStackの前に挿入してみます。

はいできたーーーーー！！！SwiftUIハンパないって！！そんなんできひんやん普通！

本当はここら辺でとりあえず終わろうと思ったのですが、この状態だとアイコンがデカすぎてバランスが悪いので、ちょっと調整してみたいと思います。

若干トリッキーだったのですが、この動画をみたらできました。

User_Icon.swiftでサイズ変更時の挙動を指定する

User_Icon.swiftにいきます。

下記のコードを追加。

struct User_Icon : View {
   var body: some View {
       Image("ukkun")
           .resizable().aspectRatio(contentMode: .fit)
           .clipShape(Circle())
           .overlay(
               Circle().stroke(Color.white, lineWidth: 4))
           .shadow(radius: 10)
   }
}

.resizable()
View（User_Icon.swift）のサイズの変更を許可しています。（多分）

.aspectRatio(contentMode: .fit)
Viewのサイズを変更した時にコンテンツがアスペクト比を維持しながら、アスペクトフィット方式で中身がクロップされるように指定しています（多分）
.fitと.fillの二種類があります。

これで、User_Icon Viewのリサイズの設定ができたので、もう一度ContentView.swiftに戻って、アイコンのサイズを変更します。

.frame()でViewのサイズを変更

Viewのサイズ変更は.frame()

    var body: some View {
       HStack {
           User_Icon()
           .frame(width: 80)
           VStack(alignment: .leading) {
               Text("Hello うっくん")
                   .font(.largeTitle)
                   Text("UI/UXデザイナー")
               }
           }
   }
}

.frame(width: 80)をUser_Iconに指定することで、アイコンのサイズをいい感じに変更することができた。

何かと便利なSpacer()

最後に、今まで作ってきたUI要素全体を画面の上に揃えてみたいと思います。

そういう時に使えるのが、Spacer()です。こいつはUI要素を画面の端に押しやってくれるちっちゃいおっちゃんです。今回は、今まで作ったUI要素をまとめて上に押しやりたいので、HStackのお尻にSpacer()をつけてあげれば全体が画面上部に押される感じです。Spacer自体が見えないUI要素なので、HStackをVStackで囲んでから、HStackの兄弟としてSpacerを入れてあげる必要があります。

操作はもう大丈夫でしょうか？HStackを⌘+クリックしてVStackに埋め込みましょう。

こうなります。

struct ContentView : View {
   var body: some View {
       VStack {
           HStack {
               User_Icon()
                   .frame(width: 80)
                   VStack(alignment: .leading) {
                       Text("Hello うっくん")
                           .font(.largeTitle)
                           Text("UI/UXデザイナー")
                       }
                   }
               }
   }
}

HStackの兄弟としてSpacer()を入れるので、挿入位置に注意しながらSpacer()を記入してください。

UI要素全体が画面上部に押し上げられた。

さらに、Apple公式のチュートリアルではMapKitを使って、実際に動作するApple MapをViewとして読み込むというのもやっています。

今のところおそらく英語限定ですが、英語が読めなくてもワンチャン真似すればついていけると思うのでそちらも試してみてください。ARKitやその他のSDKを使って、非プログラマーのUIデザイナーでもリッチなプロトタイプを作ることができる気がするので、オススメです！

以上、うっくんでした。

Creating and combining views | Apple Developer Documentation