実行環境
- MacOS 10.15.3
- Xcode Version 11.3.1
最初の章「SwiftUI Essentials」は以下の3章からなってます
- Creating and Combining Views (今回)
- Building Lists and Navigation
- Handling User Input
該当ページからファイルをダウンロードしないと、できない演習がありますので、毎回必ずダウンロードしてからチュートリアルを進めてください。
今回解説するCreating and Combining Viewsは全部で6編あります
- 編集内容がリアルタイムに反映されるよ
- 文字色の変え方
- 縦横リスト、空白等の挿入方法
- 画像の挿入方法や画像加工の方法
- UIkitとMapViewを使ってみよう
- 2〜6の知識をまとめて1つのUIを作ってみよう
という内容になってます。
実際にXcodeで動かしてみてください。
最初の章なので、まっさらなところから書き始めます。
次の章からはページの初めにあるproject Fileをダウンロードして、starting pointのファイルからプロジェクト(チュートリアル)を開始します。
ちなみにcompleteというファイルもありますが、これは演習が全て完了した場合のコードです。エラーが出たときなどに使ってみましょう。
1-1 編集内容がリアルタイムに反映されるよ
要点…Resumeを押すとCanvasに変更内容がリアルタイムで反映される。
用語
・Project navigator...Xcodeの左端にあるファイル図が表示されているエリア。左上のファイルマークをクリックすると表示される(デフォルト)
・Resume…Canvasにコードの結果を表示するボタン。
・Canvas…コード結果を反映するエリアのこと(プレビューエリア)。上のEditorで色々いじれるっぽい
1-2 文字色の変え方
要点…commandキー押しながらプレビューのテキストorコード内のText()をクリックするとそのエリアに対して様々なアクションを起こせる。
今回はShow Swift Inspect(チュートリアルではInspect)を押すことで、コードを書かなくても文字とその関連情報を一括で操作できることを確認する。(ショートカット有)
いろいろなところでコマンドキーを押しながらコードやらプレビューをクリックして慣れよう。
用語
・Inspect...text()内のフォント等を一括でGUI操作するアクション
1-3 縦横リスト、空白等の挿入方法
要点…CSS既習の人には見慣れたライブラリが多い。
Xcodeでは文字を打つだけでなく、左上の「＋」ボタンを押すとライブラリがまとめて表示され、それをエディター部分にドラッグアンドドロップすると、コードが書き込まれるという話。
用語
・VStack…縦方向に要素や配列を揃える。HStackは横
・alignment: .leading (右)とか…CSSでお馴染み(?)のやつ。alignmentは「揃える」という意味。.hogehogeは右、中央、左等に揃える場所を選べる。
・spacer, padding…ライブラリ。前者はスペースを出力。後者はエリア周上に空白を出力
(次からライブラリは用語に書かない。興味ある人はライブラリの説明文と開発者向けドキュメントを読んでください)
今回のライブラリはpadding以外全部「＋」のライブラリにありました。
1-4 画像の挿入方法や画像加工の方法
要点…Xcodeで画像ソース等を使う場合、「Preview content」フォルダの「Preview Assets.xcassets」にドラッグアンドドロップする。
その後、画像編集用のファイルを新規作成しライブラリを使って画像を加工していく。
コードを書いても可能、ライブラリのドラッグアンドドロップも可能。
用語
なし。ライブラリのみ
1-5 UIkitとMapViewを使ってみよう
要点…正直よくわからない。コピーアンドペーストで済ませた。詳細が発覚し次第、書こうと思います。ちなみにIDEあるあるですが、コーディングが完了前にエラーが出続けても、Appleさんは「かまわん、行け」と仰るのでそのまま書き続けましょう。
用語
なし
1-6 2〜6の知識をまとめて1つのUIを作ってみよう
要点…4と5で作ったファイルは他のファイルで呼び出せるので、組み合わせようという話。
用語
なし
まとめ
・なんかあったらcommandキーを押しながら操作してみよう。
・Xcodeの基本的な操作方法が習得できる。
・ファイルを超えて構造体や関数を呼び出せる
そのうちXcode専用用語のまとめとか作れたらいいなーと思ってます
次回→
その他
SwiftUIではデフォルトでプレビューと本体がデフォルトで宣言されるようです。
プレビューは使わないのであれば、該当する行を消しても問題ないと思います
追記
関数じゃなくて構造体を呼び出せるってことだったっぽい