型を作っておこうかなと思い。
まずはチュートリアルをやってみます!
https://developer.apple.com/tutorials/swiftui/
4時間25分らしいです!頑張りましょう!
SwiftUI essentials Creating and combining views
![](https://wp.grtlab.com/wp-content/uploads/cocoon-resources/blog-card-cache/8c8f6e4facf0020077138aac5f26c7f0.jpg)
swiftUIの必需品!ビューを作るぞー
section 1 ハローワールドだ!
App作成!
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-14-23.32.52-1024x742.png)
Interface : SwiftUI
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-14-23.37.54-1024x693.png)
LandmarksAppを選択すると
@mainがあってここから開始って感じですね
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-14-23.39.48-1024x618.png)
ContentViewを見ると Building … が結構長いです.
ただ開いただけ Prepareing iPhone Simulatorも時間かかる
5分位くらい待っているような?
プレビュー出ました
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-14-23.43.48-615x1024.png)
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-14-23.59.10-1024x887.png)
Editor > Canvas で表示方法選択できるようです
Automatically Refresh Canvasになっているので自動で表示できるようです
消しておくことも
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.06.54-1024x626.png)
Textの中を変えると反映されました。
Section 2 Text View をカスタマイズ
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.09.25.png)
プレビューの左下
左から
Live / Selectable
でSelectableを選択するとテキストをクリックで選択できました。
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.12.54.png)
CTRL + command + クリックで
Show SwiftUI Inspector…などのメニューが表示されます
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.17.05.png)
Textを変えてみる
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.18.47-1024x278.png)
Font を Title / Color を Greenにして反映
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.21.22.png)
codeを更新でももちろん反映
コードを消すと自動でプレビューが反映されます。
Liveモードに戻す。
Section 3 スタックを使用してビューを結合
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.26.43.png)
最初からVStackに入っていましたが、一旦消して
Textの上で CTRL+クリックで Embed in VStackを選択
VStack { Text("Turtle Rock") .font(.title) }
VStackに囲まれる。慣れれば手書きでいいですね
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.49.51-1024x656.png)
右上のプラスボタンをクリックすると
Library が表示されます。
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.52.20-1024x390.png)
Textを追加
Text("Joshua Tree National Park") .font(.subheadline)
fontを設定
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.55.41-1024x313.png)
VStackに alignment:.leadingを入れると 左揃えに
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-0.58.02-1024x298.png)
subheadlineのところをHStackに入れて、そこにTextを追加すると横並びに!
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-1.00.42-1024x326.png)
Textの間にSpacer()を入れると両側に離れて
VStackに.paddingを入れると外周に余白が入りました!
section 4 image view 画像をいれる!
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-1.10.25.png)
Assetsに画像を入れてみました。JPGと大文字の拡張子は警告が出ましたが、jpgにしたら消えました。
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-1.26.56-1024x723.png)
File > New > File で SwiftUI View で Next
ファイル名をCircleImage.swiftで保存
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-1.40.18-1024x601.png)
ImageをいれてclipShape(Circle())にしました。
画像が大きすぎた。はて
struct CircleImage: View { var body: some View { Image("DSC00426_r") .frame(width: 300) .clipShape(Circle()) .overlay{ Circle().stroke(.white,lineWidth: 4) }.shadow(radius:7) } }
適当にframeでサイズをつけて、白枠とシャドーでok
section 5 Use SwiftUI views from other frameworks
?どういう意味かな?
SwiftUI Viewに map viewを入れてみる漢字かな?
File > New > File で SwiftUI View を MapView.swift を作成
import MapKit
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-1.50.20-1024x516.png)
region 座標 と マップ呼び出しを入れると地図が出ました。
section 6 Compose the detail view 詳細ビューを作成?
content view に統合するっぽい
- VStackでさらに囲います。
- MapViewを入れてframeで高さ指定
- CircleImageを追加して、offset, padding
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-2.01.34-640x1024.png)
こんな感じ表示、下に Spacer()を入れると上寄せに!
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-2.03.10-1024x855.png)
ほーという感じですね。1枚だけはこれで作れそうです^^v
チュートリアルのページを最後まで読むと練習問題が4問
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-2.10.49-1024x266.png)
とりあえず良いのかな?
次は!
v2 リスト作成とナビゲーション!楽しみですね!
![](https://grtlab.com/wp-content/uploads//2024/11/ss-2024-11-15-17.37.15-160x90.png)
コメント