はじめに
今回は勉強会向けの資料で、SwiftUIについてです。
さて、みなさんGWはどこかに出かけていますか？
今年は外出自粛の真っ只中で、あまり出かけられませんね。
僕も毎年旅行してましたが、今年はしょうがないのでSwiftUIの世界を旅することにしました（って書き始めはちょい無理があるな…）
SwiftUIはまだ制限が多く、iOS 13以上でしか使えないので、業務でまともに使えるのは来年以降だと思います。
その時に思い出せるよう、軽く「触りの部分」を全5回でまとめます。
第1回はSwiftUI Tutorialsに沿った内容で、基本的な画面を作っていきます。
準備
プロジェクト作成
User InterfaceでSwiftUIを選びます。
プレビュー表示
右上のResumeを押すと、ビルド＆プレビューされます。
このプレビュー表示は閉じてしまっても、メニューのEditor→Canvasで開けます。
また、コードを変えると↓リアルタイムに反映されます。
基本
第一歩
プロジェクトを作った直後の状態です。Hello, World!
struct ContentView: View {
var body: some View {
Text("Hello, World!")
}
}
コード上でフォントと色を変える
試しにfontとforegroundColorを指定してみます。
struct ContentView: View {
var body: some View {
Text("Tonio Nagauzzi")
.font(.title)
.foregroundColor(.green)
}
}
Inspectorからフォントと色と諸々を変える
これらをコード上で入力しなくても、便利な方法があります。
コード上のTextか、プレビューされたパーツのどちらかを、Command押しながらクリックします。
メニューのShow SwiftUI Inspectorで、色々設定できます。
実はふきだし内はスクロールできます（罠）
struct ContentView: View {
var body: some View {
Text("この度は拙宅落成にあたりましてご丁寧なご祝詞ならびに結構なるお祝いの品をいただきまして有り難く厚くお礼申しあげます。")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.green)
.multilineTextAlignment(.center)
.lineLimit(5)
.frame(width: 300.0)
}
}
Stackで複数のビューを整列させる
TextをCommandクリックして、Embed in VStackを選びます。
右上の＋からTextを選び、ドラッグ＆ドロップで2つ目のTextとして配置します。
2つ目のTextも1つ目と同様に装飾します。
struct ContentView: View {
var body: some View {
VStack {
Text("Tonio Nagauzzi")
.font(.title)
.foregroundColor(.green)
Text("@tonionagauzzi")
.font(.subheadline)
.foregroundColor(.blue)
}
}
}
[NOTE] VStackは子のビューを縦方向に並べる
今度は2つ目のTextのInspectorを開き、Embed in HStackを選びます。
3つ目のTextを配置し、同様に装飾します。
struct ContentView: View {
var body: some View {
VStack() {
Text("Tonio Nagauzzi")
.font(.title)
.foregroundColor(.green)
HStack {
Text("Twitter:")
.font(.subheadline)
Text("@tonionagauzzi")
.font(.subheadline)
.foregroundColor(.blue)
}
}
}
}
[NOTE] HStackは子のビューを横方向に並べる
Alignment、Spacer、Paddingでビュー位置を調整する
VStackをCommandクリックしてInspectorを選び、AlignmentとPaddingを設定します。
また、SpacerをHStackのTextの間に入れます。
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Tonio Nagauzzi")
.font(.title)
.foregroundColor(.green)
HStack {
Text("Twitter:")
.font(.subheadline)
Text("@tonionagauzzi")
.font(.subheadline)
.foregroundColor(.blue)
Spacer()
Text("Follow me!")
.font(.footnote)
.foregroundColor(.accentColor)
}
}
.padding(.all, 20.0)
}
}
[Note] Spacerは前後のビューを限界まで離す
画像を置く
Imageを配置し、Assetカタログ内の画像のIDを指定します。
また、ImageのInspectorから、Clip ShapeやOverlayを設定します。
struct ContentView: View {
var body: some View {
VStack() {
Image("tonionagauzzi")
.clipShape(Circle())
.overlay(
Circle().stroke(
Color.gray,
lineWidth: 3
)
)
Text("Tonio Nagauzzi")
.font(.title)
.foregroundColor(.green)
HStack {
Text("Twitter:")
.font(.subheadline)
Text("@tonionagauzzi")
.font(.subheadline)
.foregroundColor(.blue)
}
}
}
}
こんな感じでビューを次々並べていくことができます。
最後に
ここまでで、SwiftUI TutorialsのSection 1〜4に相当する内容をやりました。
向こうはSection 5以降もビューを並べる演習が続きますが、その前にまずはSwiftUIが動く仕組みを把握したいので、次回はプロジェクト構成の話をします。
※macbookを修理してたのでもう3日目なんですけど、気分はGW1日目です 🏎=3=3