SwiftUI/日本語チュートリアル1
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(SwiftUI/日本語チュートリアル1);
*目次 [#na902913]
#contents
*関連ページ [#w8181ad9]
*参考情報 [#sde37380]
*第1回：基本要素を学ぶ ~ビューを作成し，組み合わせる~ [#t...
-[[【第1回】日本語版SwiftUIチュートリアル【基本要素を学ぶ...
**Step 1. プロジェクトの作成 [#nd342d95]
-Xcodeを立ち上げ「Create a new Xcode project」を選択。
-iOSのAppを選択。
--Product NameをLandmarks。
--Organization Identifierは「net.srcw」。
--Interfaceは「SwiftUI」。
**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を押しな...
**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の準備(上記日本語チュートリアルサイトからダ...
-「File > Add Files to 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を作成。「import MapKit」重要。
#pre{{
import SwiftUI
import MapKit
struct MapView: View {
@State private var region = MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 34.011_2...
span: MKCoordinateSpan(latitudeDelta: 0.2, longit...
)
var body: some View {
Map(coordinateRegion: $region)
}
}
}}
-プレビューするにはプレビュー画面の左上の再生ボタン(Live ...
-エラーが発生した場合リビルドすると修正できるかも。
**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を2...
終了行:
&tag(SwiftUI/日本語チュートリアル1);
*目次 [#na902913]
#contents
*関連ページ [#w8181ad9]
*参考情報 [#sde37380]
*第1回：基本要素を学ぶ ~ビューを作成し，組み合わせる~ [#t...
-[[【第1回】日本語版SwiftUIチュートリアル【基本要素を学ぶ...
**Step 1. プロジェクトの作成 [#nd342d95]
-Xcodeを立ち上げ「Create a new Xcode project」を選択。
-iOSのAppを選択。
--Product NameをLandmarks。
--Organization Identifierは「net.srcw」。
--Interfaceは「SwiftUI」。
**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を押しな...
**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の準備(上記日本語チュートリアルサイトからダ...
-「File > Add Files to 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を作成。「import MapKit」重要。
#pre{{
import SwiftUI
import MapKit
struct MapView: View {
@State private var region = MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 34.011_2...
span: MKCoordinateSpan(latitudeDelta: 0.2, longit...
)
var body: some View {
Map(coordinateRegion: $region)
}
}
}}
-プレビューするにはプレビュー画面の左上の再生ボタン(Live ...
-エラーが発生した場合リビルドすると修正できるかも。
**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を2...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
