SwiftUIでProfileアプリを作ろう

Transcript

1. SwiftUIで Profileアプリを作ろう 牧野遥斗(はるちろ)
2. 参考にした資料 AndroidDeveloperの誕生日カードとほぼ同じ内容にしています。 https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-3
3. プロジェクトを作ろう
4. XCodeを起動させてプロジェクトをつくろう！ CreateNewProjectを押す
5. iOSのテンプレートを選ぶ iOSが選択されているのを 確認する Appを選択して、 プロジェクトを作成する
6. プロジェクトの情報を入れる。基本は画像通りに アプリ名を設定する ここはアプリを識別するため の部分 学籍番号は自分のもので
7. 保存をする場所を決める 自分のわかりやすい場所にお く 設定ができたらCreateを押す
8. こんな画面が出てこればOKです
9. 文字を置いてみよう
10. 今回作る物 とりあえず、文字を置いてみよう！
11. 文字をおくためのコンポーネントを作る ※コンポーネント=部品という意味 [メッセージ]と[誰からの文章か]を入れたら、簡単に切り替えれるようにする GreetingText( message: "Happy Birthday Sam", from: "From Emma" ) GreetingText
12. 文字をおくためのコンポーネントを作る 何も映らない 部品を作る！
13. 部品を簡単に変えれるようにする messageとfromを 自由に変えれるようになります
14. メッセージを表示してみる 表示されたけど、 文字が小さいし 太くもない... プロパティを 変えてみよう
15. Textのプロパティ(大きさ) .font(.system(size: 100)) 数値で指定する時は 以下のようにやる 参考文献: https://capibara1969.com/1981/
16. Textのプロパティ(太さ) 参考文献: https://capibara1969.com/1981/
17. Textのプロパティ(文字の位置) 左寄せ 真ん中寄せ 右寄せ
18. もし.multilineTextAlignmentで位置が変わらない時 multilineTextAlignment(.trailing) は 複数行のテキストでの左右揃えに使われる 親ビューでのテキストの配置には frame の alignment を使う。
19. 最終的にこうしてみる
20. 画像を追加してみる
21. 今回作る物 画像を置くよ
22. コンポーネントをどのように置くか？ 画像 GreetingText GreetingTextの裏側に 画像を配置して実装をしてみる
23. 画像を重ねるコンポーネントをつくてみる 表示するコンポーネントが 変わっているので注意 画像を表示する コンポーネントを作成する
24. VStack, HStack, ZStackについて 選択するものが変わっているだけ 表示する順序を入れ替えるもの 縦並び、横並び、重ねる https://zenn.dev/rikutosato/books/6cee0a2b8aa796/viewer/b55137
25. さっきと表示が変わらないようにしてみよう
26. 画像をダウンロードしよう 自分の好きな画像をダウンロードするか用意しよう 今回はO-DANを利用して用意してみます https://o-dan.net/ja/ 用意した画像
27. 画像を使えるようにしよう https://capibara1969.com/1861/
28. 画像を使えるようにしよう ここの名前がプログラムで 指定する名前なので、 わかりやすい名前にしてね
29. 最終的にこうしてみる 疲れたから 説明を飛ば したわけで はないよ...
30. 全体コード
31. 答えについて
32. GitHubを用いて答えのソースをおいてあります。 https://github.com/harutiro/ProfileAppTest
33. 自分流に変更してみよう
34. 今までのコードをちょっと変更してオリジナル化しよ う • 画像の変更 • テキストの変更 • 色の変更 • テキストを増やす • アイコンを追加してみる アイディア一覧 自由に調べたり、 自分を呼んで実装してみる