Xcode11からSwiftUIという新しいStoryboardに代るUI作成フレームワークが出てきました。最初のプロジェクト作成とSwiftUIのCanvasをざっくり見てみましょう。
SwiftUI
最初は、SwiftUI Essentials の Creating and Combining Views の内容に沿った形でどんなものか見てみます。
Projectの作成
Xcode を起動：
「Finder」が画面下に通常はありますので、それを起動すると、「アプリケーション」フォルダのリストにXcode があります。ここに色々なアプリを入れて置くところです。
それをダブルクリックで「Welcome to Xcode」が現れます。あるいは何も表示されない事もありますが、基本的には Mac の場合はメニューは画面の上にあります。
「Create a new Xcode project」をクリックしてプロジェクトを新規に作成します。
あるいはメニューから
「File」「New」「Project…」を選択
Template の選択ウィンドウが出てきます
「iOS」「Single View App」
を選び「Next」とします。他のテンプレートはいずれ使うかもしれませんが最初は 「Single View Application」で始めましょう
プロジェクトのタイトルなどの設定をします。
| Product Name | TestApp001 などのプロジェクト名 |
| Team | Xcodeで生成できます。 これが設定されていないとエラーになります。 |
| Organization Identifier | 下の Bundle Identifier が決まるため公開を前提にする場合は注意して選びますが、公開しない場合は適当で大丈夫です。 |
| Interface | SwiftUI |
| Life Cycle | SwiftUI App |
| Language | 開発言語は Swift |
SwiftUI
2019年に新しくできたInterfaceです。以前はStoryboardを使っていましたが今後はこれが本格的になるでしょう、簡単にコーディングとレイアウトができるようです。近々にアプリを仕上げる予定があるのであればネット情報を調べて今までのStoryboardでの方法で完成させる方が現実的かもしれません。
プロジェクトの保存先を聞いてきますので適当な場所を指定します
Team がNoneだとStatusがエラーとなります。
登録したApple ID名をTeamに入れます。プルダウンで候補が出てきます。（Apple IDの登録が必要です）
Hello World
MacのOSは macOS Catalina にします。（Mojaveでは一部できない機能があります）
プロジェクトを作成しただけですが既にHello Worldを表示させるコードが記述されています。
この画面にならない場合は左の「Project navigator」にある ContentView.swift をクリックします。
コードが書かれているEditorの隣がCanvasになります。
これはCatalinaにしないと使えません。またCanvasが無い場合はメニューから「Editor」「Canvas」を選択しても表示できます。
Canvasには 「Automatic preview updating paused」となっているので「Resume」をクリックして再開してみます。
すると Hello World が表示されました。
最初は大きすぎるので、下にある100%のサイズから+/-を使って縮小させて50%にしました。
Textの変更
このコードとプレビューが連動しているのを確認してみましょう。
Source Editor:
“Hello World” を “こんにちは” に変更してみます。
|
1 2 3 4 5 6 7 |
import SwiftUI struct ContentView: View { var body: some View { Text("こんにちは") } } |
実際に変更がリアルタイムにPreviewに反映しているのが分かると思います。
Inspector:
今度は逆にPreviewの文字を選択します。
Utility Areaが現れるのでテキストを SwiftUI に変更してみます。
Previewがそれに応じてリアルタイムで変更されています。
またコードも同じく変更されました。
|
1 2 3 4 5 6 7 |
import SwiftUI struct ContentView: View { var body: some View { Text("SwiftUI") } } |
Preview:
「command」キーでPreviewの文字（Hello World）をクリックするとダイアログが表示されるので
「Show SwiftUI Inspector」をクリック
Textを編集するダイアログになりここから編集することができます。
ビルド＆実行
Simulator:
今までのように出来上がったアプリを Simulator で確認してみましょう。
Xcode の左上にある三角印とその右側の iOS Simulator を見てください
Simulator を「iPhone xx」 に設定して三角印をクリックします
Simulator が立ち上がります。
「Window」から「Physical Size」を選ぶと多少サイズを小さくすることもできます。
また「Show Device Bezels」にチェックするとスマホの枠が一緒に表示されます。
SimulatorでもPreviewと同じようになりました。
実機：
SimulatorのターゲットをMacに接続したiPhoneに設定する今までのやり方もありますが、「Preview on Device」で実機テストができます。ボタンをクリックするだけです
UIKit と SwiftUI
今までのUIKitでSwiftUIに対応できそうなものをリストにしてみました。
必ずしも同じように置き換えはできないので、機能的に代変えになりうるという観点です。
| UIKit | SwiftUI |
|---|---|
| UILabel | Text |
| UIImageView | Image |
| UITextField | TextField |
| UITextView | TextとTextFieldをうまく使う |
| UISwitch | Toggle |
| UISlider | Slider |
| UIButton | Button |
| UITableView | List |
| UICollectionView | Listをうまく使う |
| UINavigationController | NavigationView |
| UITabBarController | TabbedView |
| UIAlertController (style .alert) | Alert |
| UIAlertController (style .actionSheet) | ActionSheet |
| UIStackView (horizontal axis) | HStack |
| UIStackView (vertical axis) | VStack |
| UISegmentedControl | SegmentedControl |
| UIStepper | Stepper |
| UIPickerView | Picker |
| UIDatePicker | DatePicker |
| NSAttributedString | Textでうまく代用 |
| UIFont | Font |
| UITapGestureRecognizer | onTapGesture |
| UILongPressGestureRecognizer | onLongPressGesture |
| UIScrollView | ScrollView |
| UITableView | – |
| UINavigationController | – |
| UITabBarController | – |
元情報はこちら、Swift Cheat Sheet