Tweet
Tweet

Slide 1

Slide 1 text

SwiftUIで Profileアプリを作ろう 牧野遥斗(はるちろ)

Slide 2

Slide 2 text

参考にした資料 AndroidDeveloperの誕生日カードとほぼ同じ内容にしています。 https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-3

Slide 3

Slide 3 text

プロジェクトを作ろう

Slide 4

Slide 4 text

XCodeを起動させてプロジェクトをつくろう！ CreateNewProjectを押す

Slide 5

Slide 5 text

iOSのテンプレートを選ぶ iOSが選択されているのを 確認する Appを選択して、 プロジェクトを作成する

Slide 6

Slide 6 text

プロジェクトの情報を入れる。基本は画像通りに アプリ名を設定する ここはアプリを識別するため の部分 学籍番号は自分のもので

Slide 7

Slide 7 text

保存をする場所を決める 自分のわかりやすい場所にお く 設定ができたらCreateを押す

Slide 8

Slide 8 text

こんな画面が出てこればOKです

Slide 9

Slide 9 text

文字を置いてみよう

Slide 10

Slide 10 text

今回作る物 とりあえず、文字を置いてみよう！

Slide 11

Slide 11 text

文字をおくためのコンポーネントを作る ※コンポーネント=部品という意味 [メッセージ]と[誰からの文章か]を入れたら、簡単に切り替えれるようにする GreetingText( message: "Happy Birthday Sam", from: "From Emma" ) GreetingText

Slide 12

Slide 12 text

文字をおくためのコンポーネントを作る 何も映らない 部品を作る！

Slide 13

Slide 13 text

部品を簡単に変えれるようにする messageとfromを 自由に変えれるようになります

Slide 14

Slide 14 text

メッセージを表示してみる 表示されたけど、 文字が小さいし 太くもない... プロパティを 変えてみよう

Slide 15

Slide 15 text

Textのプロパティ(大きさ) .font(.system(size: 100)) 数値で指定する時は 以下のようにやる 参考文献: https://capibara1969.com/1981/

Slide 16

Slide 16 text

Textのプロパティ(太さ) 参考文献: https://capibara1969.com/1981/

Slide 17

Slide 17 text

Textのプロパティ(文字の位置) 左寄せ 真ん中寄せ 右寄せ

Slide 18

Slide 18 text

もし.multilineTextAlignmentで位置が変わらない時 multilineTextAlignment(.trailing) は 複数行のテキストでの左右揃えに使われる 親ビューでのテキストの配置には frame の alignment を使う。

Slide 19

Slide 19 text

最終的にこうしてみる

Slide 20

Slide 20 text

画像を追加してみる

Slide 21

Slide 21 text

今回作る物 画像を置くよ

Slide 22

Slide 22 text

コンポーネントをどのように置くか？ 画像 GreetingText GreetingTextの裏側に 画像を配置して実装をしてみる

Slide 23

Slide 23 text

画像を重ねるコンポーネントをつくてみる 表示するコンポーネントが 変わっているので注意 画像を表示する コンポーネントを作成する

Slide 24

Slide 24 text

VStack, HStack, ZStackについて 選択するものが変わっているだけ 表示する順序を入れ替えるもの 縦並び、横並び、重ねる https://zenn.dev/rikutosato/books/6cee0a2b8aa796/viewer/b55137

Slide 25

Slide 25 text

さっきと表示が変わらないようにしてみよう

Slide 26

Slide 26 text

画像をダウンロードしよう 自分の好きな画像をダウンロードするか用意しよう 今回はO-DANを利用して用意してみます https://o-dan.net/ja/ 用意した画像

Slide 27

Slide 27 text

画像を使えるようにしよう https://capibara1969.com/1861/

Slide 28

Slide 28 text

画像を使えるようにしよう ここの名前がプログラムで 指定する名前なので、 わかりやすい名前にしてね

Slide 29

Slide 29 text

最終的にこうしてみる 疲れたから 説明を飛ば したわけで はないよ...

Slide 30

Slide 30 text

全体コード

Slide 31

Slide 31 text

答えについて

Slide 32

Slide 32 text

GitHubを用いて答えのソースをおいてあります。 https://github.com/harutiro/ProfileAppTest

Slide 33

Slide 33 text

自分流に変更してみよう

Slide 34

Slide 34 text

今までのコードをちょっと変更してオリジナル化しよ う ● 画像の変更 ● テキストの変更 ● 色の変更 ● テキストを増やす ● アイコンを追加してみる アイディア一覧 自由に調べたり、 自分を呼んで実装してみる