#author("2021-07-26T05:46:49+00:00","default:src128","src128") &tag(SwiftUI); *目次 [#a3e203c9] #contents *関連ページ [#c87f7249] *参考情報 [#aad53e9c] -[[【第1回】日本語版SwiftUIチュートリアル【基本要素を学ぶ】 | HIRO LAB BLOG:https://hirlab.net/nblog/category/programming/art_1375/]]…公式チュートリアルを日本語で解説したもの。 *第1回:基本要素を学ぶ ~ビューを作成し,組み合わせる~ [#tc325936] **Step 1. プロジェクトの作成 [#nd342d95] -Xcodeを立ち上げ「Create a new Xcode project」を選択。 -iOSのAppを選択。 -Product NameをLandmarks。Organization Identifierは「net.srcw」。 **Step 2. 実行してみる [#nf02f026] -実行してみる。 -ContentViewのTextを書き換える。 #pre{{ struct ContentView: View { var body: some View { Text("Hello SwiftUI!") .padding() } } }} -ラベルが書き換わるはず。 **Step 3. テキストをカスタマイズする [#a30e9b99] -以下のようにしてコードからカスタマイズできる。 #pre{{ struct ContentView: View { var body: some View { Text("Hello SwiftUI!") .font(.title).foregroundColor(.green) } } }} -インスペクタでカスタマイズすることもできる。Cmdを押しながら「Text」をクリック。「Show Swift UI Inspector」をクリックする。フォントやフォアグラウンドからーを変更するとコードに反映される。 **Step 4. Stackを使ったビューの組み合わせ [#h54ab5da] -複数のビューを組み合わせスタックに埋め込む。ラベルが縦に並ぶ。 #pre{{ struct ContentView: View { var body: some View { VStack{ Text("Turtle Rock") .font(.title) Text("Joshua Tree National Park") } } } }} -配置。左寄せ。 #pre{{ struct ContentView: View { var body: some View { VStack(alignment: .leading) { Text("Turtle Rock") .font(.title) Text("Joshua Tree National Park") .font(.subheadline) } } } }} -さらに複雑に #pre{{ struct ContentView: View { var body: some View { VStack(alignment: .leading) { Text("Turtle Rock") .font(.title) HStack { Text("Joshua Tree National Park") .font(.subheadline) Spacer() Text("California") .font(.subheadline) } } .padding() } } }} **Step 5. イメージビューのカスタム [#rbd429d6] -Resources.zipを取り込む。 -Resourcesフォルダを選び、「File > Add Files to Landmarks」を選ぶ。Landmarksの中にResourcesフォルダができる。 -Resourcesの中のturtlerock.jpgをAssets.xcassetsにドラッグ。 -Command+Nで「SwiftUI View」を追加。CircleImage.swiftを作成。 #pre{{ import SwiftUI struct CircleImage: View { var body: some View { Image("turtlerock") } } struct CircleImage_Previews: PreviewProvider { static var previews: some View { CircleImage() } } }} -円形に切り抜く場合。 #pre{{ struct CircleImage: View { var body: some View { Image("turtlerock") .clipShape(Circle()) } } }} **Step 6. マップビューを作る [#e278ab49] -MapView.swiftを作成。 #pre{{ import SwiftUI import MapKit struct MapView: View { @State private var region = MKCoordinateRegion( center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868), span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2) ) var body: some View { Map(coordinateRegion: $region) } } }} -プレビューするにはプレビュー画面の左上の再生ボタン(Live Preview)を押す必要がある。 **Step 7. 各ビューを組み合わせる [#b79a278b] -ContentView.swiftを開く。マップビューとイメージビューを垂直に積み上げる。 #pre{{ struct ContentView: View { var body: some View { VStack { MapView() .frame(height: 300) CircleImage() .offset(y: -130) .padding(.bottom, -130) VStack(alignment: .leading) { Text("Turtle Rock") .font(.title) HStack { Text("Joshua Tree National Park") .font(.subheadline) Spacer() Text("California") .font(.subheadline) } } .padding() } } } }} -画像がでかすぎるので、Assets.xcassetsの中のturtlerockを2xの枠に移動する。