SwiftUIチュートリアルⅠ
本家のSwiftUIのチュートリアルをもとに、自分の勉強も兼ねて解説していきます。
初心者の視点で下記の人を対象に記載します。
- iOSアプリを作ってみたいけど何から始めれば良いかわからない人
- SwiftUIに初めて触れる人
SwiftUIとは？
SwiftUIとはSwift言語で使用できるUI構築フレームワークです。
iOSのネイティブアプリを構築するための言語がSwiftで、そのUI部分を担当するのがSwiftUIとなります。
SwiftUIではソースコードに記載した内容がリアルタイムにプレビュー画面に更新されます。
SwiftUIチュートリアル
下記４つのチャプターから構成されていますので、第1章から順に確認していきます。
- Chapter 1SwiftUI Essentials
- Chapter 2Drawing and Animation
- Chapter 3App Design and Layout
- Chapter 4Framework Integration
Chapter 1SwiftUI Essentials
第1章は大きく下記３つの構成になっていますが、本記事では1について解説していきます。
なお、チュートリアルに必要なリソースファイルなどは下記リンク先でプロジェクトファイルをダウンロードしてください。
ビューを作成し結合する（Creating and Combining Views）
ここでは複数のビューを作成して、それを結合することで、下記のような画面を作成していきます。
大きくマップの表示、画像の表示、地名・概要の表示の３つを作成して結合しています。
プロジェクトの作成
まず最初にプロジェクトの作成方法から学びます。
Xcodeを起動して「Create a new Xcode project」を選択します。
テンプレート選択画面で「iOS」、「App」を選択し、「Next」をクリックします。
Product Nameを「Landmarks」、Interfaceを「SwiftUI」、Languageを「Swift」にします。
その他はデフォルトのままで良いと思います。
次に保存場所を決めるので、適当な場所に保存してください。
保存場所を選択後Gitレポジトリの作成失敗などのエラーが出るかもしれませんが、ここでは割愛します。
作成が完了するとプロジェクトナビゲータが下記のように表示されます。
（本チュートリアルでは「Landmarks > Landmarks」配下のファイルのみ使用します。）
「LandmarksApp.swift」を選択してください。
プロジェクトナビゲータで「ContentView.swift」を選択してください。
下記プレビュー画面で「Resume」を選択してください。
そうすると下記のようにHello, World!と出力されます。
次にソースコードを下記のようにText(“”)内の文字を直すと、プレビュ画面の内容も更新されます。
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello SwiftUI!")
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
テキストのカスタマイズ
ここではテキストの装飾などのカスタマイズ方法について学びます。
プレビュー画面のテキストをクリックすると右側にフォント等が表示されるので、そのFontを「Title」に変更します。また、Colorを「Green」に変更してプレビュー画面で変更が確認できたらColorは「Inherited」に戻してください。今回はプレビュー画面上で編集しましたが、下記のようにソースコードで編集も可能です。
struct ContentView: View {
var body: some View {
Text("Hello SwiftUI!")
.font(.title)
.foregroundColor(Color.green)
.padding()
}
}
ソースコードの「Text」文字列をcommandキーを押しながらクリックするとポップアップが表示されるので、「Embed in VStack」を選択します。
VStackの部分を下記のように書き換えます。 VStack(alignment: .leading)とすることで左揃えになります。
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
Text("Joshua Tree National Park")
.font(.subheadline)
}次にプレビュー画面の「Joshua Tree National Park」上でcommandキーを押しながらクリックすると、ポップアップ画面が表示されるので、「Embed in HStack」を選択します。（先ほどと同様にソースコード上でcommad＋クリックするのと同じ動作です。）
HStack以下の部分を下記のように書き換えます。HStackのテキスト間にSpacer()を入れることでテキスト間の余白を入れます。また、VStackの後にpadding()を入れることで全体的に余白を追加しています。
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()
}
}カスタム画像ビューの作成
Assets.xcassetsを開きます。
チュートリアルページでダウンロードしたプロジェクトファイルのResourcesフォルダに「turtlerock@2x.jpg」があるので、このファイルをドラッグすると下記のようになります。
[File]>[New]>[File…]を選択します。[User Interface]セクションで、[SwiftUI View]を選択し、[Next]をクリックします。ファイル名を「CircleImage.swift」としてファイルを作成します。
body内の内容を下記のようにして、画像を整えます。
struct CircleImage: View {
var body: some View {
Image("turtlerock") // turtlerockの画像を表示
.clipShape(Circle()) //円形にする
.overlay {
Circle().stroke(.white, lineWidth: 4)
} //白色のストロークを被せる
.shadow(radius: 7) //半径7のシャドーを追加
}
}すると下記のような画像が完成します。
他のフレームワークからのSwiftUIビューを使用する
[File]>[New]>[File…]を選択します。[User Interface]セクションで、[SwiftUI View]を選択し、[Next]をクリックします。ファイル名を「MapView.swift」としてファイルを作成します。
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) //状態変数の前に$をつけることで、その値を参照できる
}
}
struct MapView_Previews: PreviewProvider {
static var previews: some View {
MapView()
}
}下記のようにプレビュー画面がpausedとなっていたら「Resume」をクリックする
赤枠内（ライブプレビューボタン）をクリックしてライブプレビューモードにすると、マップが表示されます。
詳細ビューを作成する
ContentView.swiftを開きます。
VStackを追加して、その中にMapView()を追加します。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
MapView()
.frame(height: 300)
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack {
Text("Joshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
}
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}ライブプレビューボタンをクリックすると、下図のように表示されます。
さらに赤字部分を追加します。
import SwiftUI
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) //HStack内のフォントを変更
Divider() // 仕切り線の追加
Text("About Turtle Rock")
.font(.title2)
Text("Descriptive text goes here.")
}
.padding()
Spacer() //Spacerを追加することでコンテンツを上部に押し上げる
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}すると下図のようなUIになります。
ここまででCreating and Combining Viewsは完了となります。色々と試しながらライブプレビューで変化を確認すると理解につながると思いますので試してみてください。
コメント