SwiftUIとは
iOS開発のフレームワークのことです。
ちなみにUIKitもフレームワークです。
どちらもUIフレームワークと呼ばれています。UIというのは、見た目のことなので、
SwiftUIはiOSアプリを見た目を作るためのプログラムということになります。
モディファイヤとは
Viewの見た目や機能を変えるためのプログラムです
モディファイア一覧
テキストの色を変える
Text("Hello, world!!!")
.foregroundColor(.green)
// .greenの部分を.red .blueなどと指定するとHello, world!!!の色が変わります
リストを作ってみる
List {
Text("りんご")
.padding()
Text("レモン")
.padding()
Text("オレンジ")
.padding()
}
ナビタイトルを作ってみる
NavigationStack {
Text("Hello")
.navigationTitle(Text("ナビタイトル"))
}
ツールバーを作ってみる
ツールバーとは検索ボタンや戻るボタンのことです。
NavigationStack {
Text("Hello")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
// 位置指定をしています。
左寄せ：navigationBarLeading
右寄せ：navigationBarTrailing
Text("戻る")
}
}
HStackを使ってみる
複数のViewを水平方向（横）に配置するためのモディファイア
HStack {
Text("ああああ")
Text("いいいい")
Text("うううう")
}
VStackを使ってみる
複数のViewを垂直方向（縦）に配置するためのモディファイア
VStack {
Text("ああああ")
.padding()
Text("いいいい")
.padding()
Text("うううう")
.padding()
}
fontを使ってみる
文字を大きさを制御するためのモディファイア
サイズ大
largetitle
title
headline
body
callout
fontnote
caption
サイズ小
List {
Text("ああああ")
.padding()
.font(.largeTitle)
Text("ああああ")
.padding()
.font(.title)
Text("ああああ")
.padding()
.font(.headline)
Text("ああああ")
.padding()
.font(.body)
Text("ああああ")
.padding()
.font(.callout)
Text("ああああ")
.padding()
.font(.subheadline)
Text("ああああ")
.padding()
.font(.footnote)
Text("ああああ")
.padding()
.font(.caption)
}
Buttonを使ってみる
実際にボタンを押して、printの中身の"ボタンが押されました"を出力させるためには、シュミレーターか実機でのビルドが必要です。
import SwiftUI
struct ContentView: View {
var body: some View {
Button(action: Report) {
/*@START_MENU_TOKEN@*/Text("Button")/*@END_MENU_TOKEN@*/
}
}
}
func Report() {
print("ボタンが押されました")
}
ForEachを使ってみる
ForEachとはUIパーツを繰り返し生成させるためのモディファイアです。
import SwiftUI
// ForEachを利用するためには、構造体をIdentifiableプロトコルに適応させる必要があります
struct Human: Identifiable {
// Identifiableプロトコルが適応された構造体はidというプロパティが必須
// UUIDとは適当なIDを生成する関数
let id = UUID()
let name: String
}
struct ArrayContentView: View {
let humans = [
Human(name: "田中"),
Human(name: "鈴木"),
Human(name: "佐藤")
]
var body: some View {
List {
// ForEachはListやVStackなど複数のUIパーツを配置できるもの中からしか利用できない。
ForEach(humans) { human in
Text("\(human.name)さん、こんにちは！")
Text(human.id.description)
// TextはStringを引数にとります。human.idはUUID型なので.descriptionとすることでString型にしています。
}
}
}
}
@Stateを使ってみる
@Stateは構造体の中で、値を変更したいプロパティに付与する
@State var lastName = "里見"
var firstName = "太郎"
lastNameは変更可能 。firstNameは変更不可
firstNameを変更しようとするコードを書くと
Cannot assign to property: 'self' is immutable
というエラーが出ます！
@ObservableObjectを使ってみる
@Stateは構造体の中で、値を変更したいプロパティに付与していましたが、@ObservableObjectはインスタンス版です。
@ObservableObjectが付いたインスタンスのプロパティに値変化があった時、Viewが更新されます。
ルール
- インスタンスの基となるクラスはObservableObjectプロトコル準拠
- 値変更したいプロパティは@Publishedを付ける
- @ObservableObject var 変数名 = クラス名()
class UserData: ObservableObject {
@Published var name: String
@Published var age: Int
init(name: String, age: Int) {
self.name = name
self.age = age
}
}
@ObservedObject var userData = UserData(name: "鈴木", age: 20)
@EnvironmentObjectとは
ObservableObjectを複数のViewで共通プロパティとして使えるようにしたもの
ルール
- インスタンスの基となるクラスはObservableObjectプロトコル準拠
- 値変更したいプロパティは@Publishedを付ける
- @EnvironmentObject var 変数名: クラス名
- Appを準拠したクラスの中で
ContentView().environmentObject(クラス名())と記述する