SwiftUI/SwiftUI Essentials
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(SwiftUI/SwiftUI Essentials);
*目次 [#oc089287]
#contents
*関連ページ [#sfc491b8]
-[[Creating and Combining Views — SwiftUI Tutorials | App...
-CreatingAndCombiningViewsの直下に自分のプロジェクトLandm...
*参考情報 [#c54dc451]
-Apple公式サイトからサンプルプロジェクトがダウンロードで...
-これを参考にしつつ自分でプロジェクトを作成するのがよさげ。
*Creating and Combining Views [#q080518e]
**Create a New Project and Explore the Canvas [#i52e8ace]
-新規プロジェクトの作成。
-「Create a new Xcode project」。
-iOSのAppテンプレートを選択。
-プロジェクト名は「Landmarks」。ライフサイクルで「SwiftUI...
-ContentView.swiftを選択。プレビューで確認。
-「Hello World」を「Hello Swift」に変更。
**Customize the Text View [#pea21efd]
-テキストビューをカスタマイズする。
-プレビュー画面でラベルをCmd+クリック。「Show Swift UI In...
-テキストを「Turtle Rock」に。
-Font modifierを「Title」に。
-コードを編集して「.foregroundColor(.green)」に。インスペ...
**Combine Views Using Stacks [#l1bbac0c]
-スタックを使ってビューを積み重ねる。
-テキストビューのイニシャライザをCmd+クリックして、構造化...
-画面右上の「＋」ボタンをクリックしライブラリを表示。テキ...
-テキストビューのプレースホルダを「Joshua Tree National P...
-VStackのイニシャライザを変更。
#pre{{
VStack(alignment: .leading) {
}}
-キャンバスで"Joshua Tree National Park”をCmd-クリックし...
-最終的に以下のように変更する。
#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()
}
}}
*Create a Custom Image View [#oeb1856a]
-アセットに画像を登録。ダウンロードしたプロジェクトのReso...
-新規ファイルで「SwiftUI View」から「CircleImage.swift」...
-さらに円形にクリップする。
#pre{{
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
}
}
}}
-さらに白色のボーダーを追加。さらにシャドーを追加。
#pre{{
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(Circle().stroke(Color.white, lineWid...
.shadow(radius: 7)
}
}
}}
*Use SwiftUI Views From Other Frameworks [#p8977f63]
-MapViewを作成する。
-「File New File」で「Swift UI View」を選び「MapView.swif...
-MapKitをインポートし、地図の位置情報を保存する変数を追加...
#pre{{
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)
}
}
}}
-ライブプレビューで確認できる。左側の再生ボタン。
*Compose the Detail View [#nffc538c]
-これまでのViewを組み合わせる。
-ContentView.swiftを選ぶ。
-MapViewとCircleImage、Spacerを追加。最終的に以下のように。
#pre{{
struct ContentView: View {
var body: some View {
VStack {
MapView()
.ignoresSafeArea(edges: .top)
.frame(height: 300)
CircleImage()
.offset(y: -130)
.padding(.bottom, -130)
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack {
Text("Joshua Tree National Park")
Spacer()
Text("California")
}
.font(.subheadline)
.foregroundColor(.secondary)
Divider()
Text("About Turtle Rock")
.font(.title2)
Text("Descriptive text goes here.")
}
.padding()
Spacer()
}
}
}
}}
-なんか公式サイトの見た目と異なるけどこれでいいのか。
終了行:
&tag(SwiftUI/SwiftUI Essentials);
*目次 [#oc089287]
#contents
*関連ページ [#sfc491b8]
-[[Creating and Combining Views — SwiftUI Tutorials | App...
-CreatingAndCombiningViewsの直下に自分のプロジェクトLandm...
*参考情報 [#c54dc451]
-Apple公式サイトからサンプルプロジェクトがダウンロードで...
-これを参考にしつつ自分でプロジェクトを作成するのがよさげ。
*Creating and Combining Views [#q080518e]
**Create a New Project and Explore the Canvas [#i52e8ace]
-新規プロジェクトの作成。
-「Create a new Xcode project」。
-iOSのAppテンプレートを選択。
-プロジェクト名は「Landmarks」。ライフサイクルで「SwiftUI...
-ContentView.swiftを選択。プレビューで確認。
-「Hello World」を「Hello Swift」に変更。
**Customize the Text View [#pea21efd]
-テキストビューをカスタマイズする。
-プレビュー画面でラベルをCmd+クリック。「Show Swift UI In...
-テキストを「Turtle Rock」に。
-Font modifierを「Title」に。
-コードを編集して「.foregroundColor(.green)」に。インスペ...
**Combine Views Using Stacks [#l1bbac0c]
-スタックを使ってビューを積み重ねる。
-テキストビューのイニシャライザをCmd+クリックして、構造化...
-画面右上の「＋」ボタンをクリックしライブラリを表示。テキ...
-テキストビューのプレースホルダを「Joshua Tree National P...
-VStackのイニシャライザを変更。
#pre{{
VStack(alignment: .leading) {
}}
-キャンバスで"Joshua Tree National Park”をCmd-クリックし...
-最終的に以下のように変更する。
#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()
}
}}
*Create a Custom Image View [#oeb1856a]
-アセットに画像を登録。ダウンロードしたプロジェクトのReso...
-新規ファイルで「SwiftUI View」から「CircleImage.swift」...
-さらに円形にクリップする。
#pre{{
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
}
}
}}
-さらに白色のボーダーを追加。さらにシャドーを追加。
#pre{{
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(Circle().stroke(Color.white, lineWid...
.shadow(radius: 7)
}
}
}}
*Use SwiftUI Views From Other Frameworks [#p8977f63]
-MapViewを作成する。
-「File New File」で「Swift UI View」を選び「MapView.swif...
-MapKitをインポートし、地図の位置情報を保存する変数を追加...
#pre{{
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)
}
}
}}
-ライブプレビューで確認できる。左側の再生ボタン。
*Compose the Detail View [#nffc538c]
-これまでのViewを組み合わせる。
-ContentView.swiftを選ぶ。
-MapViewとCircleImage、Spacerを追加。最終的に以下のように。
#pre{{
struct ContentView: View {
var body: some View {
VStack {
MapView()
.ignoresSafeArea(edges: .top)
.frame(height: 300)
CircleImage()
.offset(y: -130)
.padding(.bottom, -130)
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack {
Text("Joshua Tree National Park")
Spacer()
Text("California")
}
.font(.subheadline)
.foregroundColor(.secondary)
Divider()
Text("About Turtle Rock")
.font(.title2)
Text("Descriptive text goes here.")
}
.padding()
Spacer()
}
}
}
}}
-なんか公式サイトの見た目と異なるけどこれでいいのか。
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
