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

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

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

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

  • vstack
    垂直方向にUIコンポーネントを並べていくために使います
  • hstack
    水平方向にUIコンポーネントを並べていくために使います。
  • zstack
    画面の奥行き方向にUIコンポーネントを並べるために使います。

ClockClipには?

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

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

下準備

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

その後

 

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

配置するコンポーネント

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

さっそくvstack

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

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

two line with VStack

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

まずは、ImageView

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

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

次のGADBannerViewが難しそう・・・

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です