Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwiftUIでProfileアプリを作ろう
Search
harutiro
October 04, 2024
Technology
0
13
SwiftUIでProfileアプリを作ろう
harutiro
October 04, 2024
Tweet
Share
More Decks by harutiro
See All by harutiro
「DroidKaigi2024」 スピーカー体験記
harutiro
0
70
[初心者向けGitHub勉強会資料(VScode版)]How To GitHub In VSCode
harutiro
0
93
モバイル開発をする上での利点とは? Webとの違いを考えてみる
harutiro
0
16
安物サーマルプリンターとAndroidを使って遊んでみる
harutiro
0
33
stmn.LT会.ぱぱっとモバイルでセンサー処理をしてみる
harutiro
0
13
[DroidKaigi2024] 電池寿命を考えた位置情報の監視方法を考える(Geofence)
harutiro
0
84
[GitHub勉強会資料 CLI版]How To Use GitHub In CLI
harutiro
0
190
Other Decks in Technology
See All in Technology
All you need to know about InnoDB Primary Keys
lefred
0
110
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
660
Next Step: Play Time!
trishagee
2
160
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
4
560
DeepSeek on AWS
hariby
1
200
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
15
4.6k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
270
マルチデータプロダクト開発・運用に耐えるためのデータ組織・アーキテクチャの遷移
mtpooh
1
400
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
110
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
14
4.5k
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
490
AIエージェントについてまとめてみた
pharma_x_tech
20
13k
Featured
See All Featured
Speed Design
sergeychernyshev
25
770
For a Future-Friendly Web
brad_frost
176
9.5k
Building Adaptive Systems
keathley
39
2.4k
Practical Orchestrator
shlominoach
186
10k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Unsuck your backbone
ammeep
669
57k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Designing for Performance
lara
604
68k
It's Worth the Effort
3n
184
28k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
4 Signs Your Business is Dying
shpigford
182
22k
Transcript
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
自分流に変更してみよう
今までのコードをちょっと変更してオリジナル化しよ う • 画像の変更 • テキストの変更 • 色の変更 • テキストを増やす
• アイコンを追加してみる アイディア一覧 自由に調べたり、 自分を呼んで実装してみる