SwiftUIでProfileアプリを作ろう

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

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

プロジェクトを作ろう

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

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

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

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

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

文字を置いてみよう

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

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

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

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

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

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

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

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

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

最終的にこうしてみる

画像を追加してみる

今回作る物画像を置くよ

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

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

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

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

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

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

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

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

全体コード

答えについて

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

自分流に変更してみよう

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

SwiftUIでProfileアプリを作ろう

SwiftUIでProfileアプリを作ろう

More Decks by harutiro

Other Decks in Technology

Featured

Transcript