swiftui

【SwiftUI】日本語版チュートリアルCreating and Combining Views 前編

SwiftUIのチュートリアルを日本語で説明した。

Creating and Combining Views 前編

はじめに

ここからSwiftUIを使って様々な名所とその詳細を表示するマップアプリを作る。 これを始める前ににApple Developper公式ページからProject files をダウンロードしておく。

Section1

プロジェクトを立ち上げる。

Step1

新しいプロジェクトを立ち上げる。

その際、テンプレートは[Single View App]で、

User Interfaceは[Swift UI]にする。

Step2

Project navigatorで[ContentView.swift]を選択する。 このファイルではデフォルトで二つの構造体を宣言している。 1つ目はViewプロトコルに準拠していて、画面を描写しているもの。 2つ目はContentViewのプレビューをキャンバスに映し出す宣言をしている。

          2020 10 10 17 10 28

Step3

もしキャンバスに何も映し出されていなければ、Editor>Editor and Canvasをクリックする。 映し出される。 また、bodyプロパティ の値を変更すると、自動的にプレビューに反映される。

Section2

コードの編集またはインスペクターを使ってText Viewをカスタマイズしていく。 (インスペクターとはどんなコードが書けるか教えてくれるもの。)

SwiftUIでは「コード」、「キャンバス」、「インスペクター」のどれを組み合わせて編集してもプロジェクトにしっかり反映される。

Step1

プレビュー上でHello ,world!をCommand+クリックする。 ポップオーバーが表示されるので、Inspector…を選択。 ポップオーバーは選択した型に応じていろんな選択肢を表示してくれる。テクイネ!

          2020 10 10 17 15 55

Step2

インスペクターを使ってTextを”Turtle Rock”に変更。 コードとプレビューに反映されるのも確認!

          2020 10 10 17 22 32

Step3

フォントをTitleに変更。 お好みのフォントやサイズにカスタマイズ!

          2020 10 10 17 26 49

SwiftUIの画面をviewにいろんな変更を反映させるときはmodifiers(モディファイア?)と呼ばれるメソッドを使う。 いろんなモディファイアを垂直に書き連ねる。

ちなみに.padding()はviewまわりに余白を持たせるメソッド。窮屈な感じがなくなる。

Step4

直接コードを書いてみる。 次の画像のように.foregroundColor(.green)を加える。

          2020 10 11 19 17 27

こんな感じでコードとviewは常に対応している。

Step5

TextをCommand+クリックしてinspector…を開く。 文字の色を黒に戻すためにColorをInheritedにする。

          2020 10 11 19 22 41

結果はこんな感じ。

          2020 10 11 19 23 34

foregroundColor(.green)が消えているのがわかる。

Section3

このセクションでは名所に関する情報(公園や州の名前)を追加していく。 複数のviewを垂直や水平に埋め込む方法を学ぶ。

Step1

TextをCommand+クリックしてEmbed in VStackを選択。(VはVerticalのこと) 意味は「垂直に連ねて埋め込む」的な感じ。 もっというと、「Textという容器に他のviewを垂直に埋め込む」。

          2020 10 11 19 39 23

Step2

実際に埋め込んでいく。 Xcode 右上の+ボタンからTextを”Turtle Rock”のすぐ後にドラックアンドドロップ。

          2020 10 11 19 50 38

追加したTextに”Joshua Tree National Park”(公園の名前)と表示させる。 フォントをsubheadlineに変更。

          2020 10 11 19 55 04

Step3

VStack内のviewを左揃えにするために、VStackを次のように編集する。 この時、.padding()があると、左揃えに見えないので消しておく。

          2020 10 11 20 07 19

Step4

次は公園の名前を表示しているTextに州を表示するTextを水平に埋め込む。 Joshua Tree National ParkをCommand+クリックで、Embed in HStackを選択。(HはHorizontalのこと)

          2020 10 11 20 19 54

州はCalifornia、フォントは.subheadlineにする。

          2020 10 11 20 21 38

Step5

画面を横いっぱいに使うためHStack内の二つのviewの間にSpacer()を追加する。 そして全体的に余白を持たせるためにpadding()を追加しておく。

          2020 10 11 21 03 01

まとめると、容器にviewを埋め込んでるイメージ図はこんな感じ。

3e83aaaf cf87 4f6b 9e1e 59867b268271 4 5005 c

終わりに

プロジェクト立ち上げからStackの使い方までをやった。 少し長かったので前編と後編に分けたが、Creating and Combining Views 後編をやるとこのチュートリアルは完了。

最後まで読んでいただき、ありがとうございました。

Subscribe to テクマガ

Get the latest posts delivered right to your inbox

入力されたアドレス宛に案内のメールが届きます。