SmallDesk 前回は、プロジェクトを作るところまでやりましたので、今回は実際にGUIを作っていきましょう。
やはり、vstack, hstackからでしょう
基本的なレイアウトのために使えるStack系のものとして、以下の３種類。
- vstack
垂直方向にUIコンポーネントを並べていくために使います - hstack
水平方向にUIコンポーネントを並べていくために使います。 - zstack
画面の奥行き方向にUIコンポーネントを並べるために使います。
ClockClipには？
ImageViewが１つどーんとあるだけなので、何も使う必要ないかとも思いますが、GoogleAdmobを使うことを想定してみましょう。
メインのImageViewの枠の下側に広告がついているのがよくあるパターンなので、上のリストから、vstackを使ってみようということになるかと。
設定画面へ遷移するためのボタンを配置したいのですが、それはvstackの後に考えましょう。
下準備
Google Admob使うためには、cocoapodを使って、Googleのライブラリを追加しなければいけません（SwiftUIと全く関係ないけど）
必要なPodfileを書いて、以下のコマンドで追加
|
1 2 3 4 |
platform :ios, '13.0' target '<project name>' do pod 'Google-Mobile-Ads-SDK' end |
その後
|
1 |
＃ pod install |
cocoapodを使ったので、これ以降では、.xcworkspaceを開くことが必要なことに気をつけて。
配置するコンポーネント
配置したいコンポーネントは、”UIImageView”と、”GADBannerView”。
3rd partyのGADBannerViewも扱えるのかは興味のあるところ。
さっそくvstack
ContentViewの要素に追加していく必要があるので、編集すべきファイルは、ContentView.swift。
さまざまな修正をいっぺんに行うとわからなくなっちゃうので、すこしづつ。
まずは、最初のコードにあるTextを複数にしてみて、動作のチェック。
|
1 2 3 4 5 6 7 8 |
struct ContentView: View { var body: some View { VStack { Text("Hello, World1!") Text("Hello, World2!") } } } |
無事、プレビューに二行のテキストが表示されました。
シミュレータでも以下の通り。
ちなみに、VStackをつけずに、Text行を二行にするとエラーが発生します。
まずは、ImageView
上側のTextViewをImageViewに変えてみよう。ちなみに、使うコンポーネントは、UIImageViewではなく、ラップされたImage
イメージファイルを用意していなかったので、システムで用意されている”pencil”を使ってみました。
|
1 2 3 4 5 6 |
var body: some View { VStack { Image(systemName: "pencil") Text("Hello, World2!") } } |
プレビューに鉛筆画像がでて、成功。
次のGADBannerViewが難しそう・・・
Sponsor Link