SwiftUI レイアウト編(2) 作ってみましょうvstack

前回は、プロジェクトを作るところまでやりましたので、今回は実際にGUIを作っていきましょう。

やはり、vstack, hstackからでしょう

基本的なレイアウトのために使えるStack系のものとして、以下の３種類。

ClockClipには？

ImageViewが１つどーんとあるだけなので、何も使う必要ないかとも思いますが、GoogleAdmobを使うことを想定してみましょう。
メインのImageViewの枠の下側に広告がついているのがよくあるパターンなので、上のリストから、vstackを使ってみようということになるかと。

設定画面へ遷移するためのボタンを配置したいのですが、それはvstackの後に考えましょう。

下準備

Google Admob使うためには、cocoapodを使って、Googleのライブラリを追加しなければいけません（SwiftUIと全く関係ないけど）
必要なPodfileを書いて、以下のコマンドで追加

platform :ios, '13.0'
target '<project name>' do
  pod 'Google-Mobile-Ads-SDK'
end

その後

＃ pod install

cocoapodを使ったので、これ以降では、.xcworkspaceを開くことが必要なことに気をつけて。

配置するコンポーネント

配置したいコンポーネントは、"UIImageView"と、"GADBannerView"。
3rd partyのGADBannerViewも扱えるのかは興味のあるところ。

さっそくvstack

ContentViewの要素に追加していく必要があるので、編集すべきファイルは、ContentView.swift。
さまざまな修正をいっぺんに行うとわからなくなっちゃうので、すこしづつ。
まずは、最初のコードにあるTextを複数にしてみて、動作のチェック。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World1!")
            Text("Hello, World2!")
        }
    }
}

無事、プレビューに二行のテキストが表示されました。
シミュレータでも以下の通り。

ちなみに、VStackをつけずに、Text行を二行にするとエラーが発生します。

まずは、ImageView

上側のTextViewをImageViewに変えてみよう。ちなみに、使うコンポーネントは、UIImageViewではなく、ラップされたImage
イメージファイルを用意していなかったので、システムで用意されている"pencil"を使ってみました。

    var body: some View {
        VStack {
            Image(systemName: "pencil")
            Text("Hello, World2!")
        }
    }

プレビューに鉛筆画像がでて、成功。

次のGADBannerViewが難しそう・・・