こんにちは、hfおじさん（@hfoj3_x）です。
iPhoneアプリ開発を始める宣言をしてからはや５日。
株式会社MIXI様の新卒向け研修資料を使って朝晩やお昼休憩の時間を使ってちょこちょこと勉強しています。
あまりまとまって時間が作れないので進捗はそれほど良くないですが、キリのいいタイミングで途中経過報告兼振り返りをしようかなと思います。
できたもの
アプリ起動時にローディングを表示し、1秒後にモックデータを生成してモックデータをリスト表示まですることができました。
また、リスト中の各データの詳細データを別画面で表示することができるようになりました。
使用した技術やテクニック
NavigationStackを使用してページ遷移の実現
ページ遷移はNavigationStackを使用して以下のように実現しました。
var body: some View {
NavigationStack {
// 一覧画面のリスト要素
List(dataList) { data in
// リスト要素の各行をページ遷移リンクにする
NavigationLink(value: data) {
// リスト要素の行表示
RowView(data: data)
}
}
// 一覧画面タイトル
.navigationTitle("List View Title")
// 遷移先設定
.navigationDestination(for: DataType.self) { data in
// 遷移先表示
DestinationView(data: data)
// 遷移先画面タイトル
.navigationTitle("Destination View Title")
}
}
}モックデータなどのPreviewでしか使わないデータの扱い
動的にデータを取得したり生成したりするアプリではPreviewの確認ができないのでモックデータを使うことがありますが、そのモックデータの扱い方に定石のようなものがあるそうです。
ViewsやModelsとは別に「Preview Content」というフォルダを作成し、その中にモックデータを格納後、プロジェクトの設定で「Development Assets」に作成したフォルダを登録します。（そうすることで最終的に生成されるバイナリから除外されるそうです）
また、モックデータを作成する際には、例えば元のデータファイル名が「DataType.swift」だった場合「DataType+mock.swift」という命名にするそうです。（モックデータをというよりextensionを生やす場合と記載されていましたが）
struct DataType: Identifiable, Hashable {
var id: Int
var name: String
}extension DataType {
static let mock1 = DataType(id: 1, name: "Name1")
static let mock2 = DataType(id: 2, name: "Name")
}画面表示時の処理はonAppearに書く
細かいライフサイクルは置いておいて、画面表示時には「onAppear」、画面終了時には「onDisappear」が呼び出されるのでその中で処理を記述します。
var body: some View {
NavigationStack {
}
.onAppear() {
// 表示時処理
}
}合っているかはわかりませんが、今回のアプリの場合詳細画面から戻ってくる時にはonAppearが呼び出されたくないからNavigationStackを使用してNavigationStackのonAppearに起動時処理を書いているのかなと思いました。
細かいこと
Image要素のサイズを変更する場合はresizableモディファイアを指定する
Image要素のサイズを指定する場合にはresizableモディファイアを指定しないと反映されないです。
Image(.image)
.resizable()
.frame(width: 40, height: 40)レイアウトを寄せる場合はSpacerを使用する
基本的にSwiftUIの要素は画面中央に表示されるので、上寄せ・左寄せ・右寄せ・下寄せする場合にはSpacerを使用します。
HStack {
VStack {
Text("hogehoge")
// 上寄せ
Spacer()
}
// 左寄せ
Spacer()
}Spacerを入れる場所によって寄せられる方向が変わります。
おわりに
この記事を書く際に「このコードってどう言う意味だったっけ？」ってなることが何度かあったのでやっぱり振り返りはした方が良いと思いました。
ようやく資料の「SwiftUIの基本」が終わったところですが、まだまだ使っていないコントロールも沢山あるので研修資料とは別で使っていないコントロールを使ったアプリなど作って勉強していかなければと思います。
この後はWebAPIを使用した非同期処理やテスト設計について学んでいく予定ですが、お仕事でテストコードを書く文化がなかったのでしっかり学んでお仕事にも良い影響を与えられるようにしたいです。
この記事に書かれている内容に間違っている点などありましたら、コメントやXでコソッと教えていただけると幸いです。
コメント