iPadのplaygroundsにて、swiftUIの勉強をしている初心者です。
NavigationViewについて触れていますが、
解釈や内容に不備があると思われます。
前回のおさらい
- 勉強日記をQiitaにぽちぽち書いていくことにしたよ！
- swift…か…。……おもしれーやつ。(
WithAnimationへの感想) - 簡素なカウンターが3の倍数を教えてくれるアプリが出来上がったよ
- Markdown記法…知らない子…ですね…？
Markdown記法について
Markdown記法について、ちょっとずつ調べて書き方がわかってきたので試しながら日記を書いていく。
参考にした記事
記事にとっても優しいコメントがついてましたね。
Qiitaでしたら、投稿欄やコメント欄の右上にある「？」をクリックするとマークダウンの書き方が表示されます。
…いや、違うんですわ、あるのは知ってるんですわ。
今読むには情報量が…いささか多すぎて…えぇ…。
なんかもうちょっとシンプルなやつ…が、ほしいなって…。
こちらもシンプルでとても助かる…
日記という名の備忘録を兼ねているので、こういうのをちまちま書き足していく…
初めて触ってみるNavigationView
前回仕上げたのは、簡素なカウンターが3の倍数を教えてくれるアプリでした。
とりあえず簡単なコントロールを配置して
数字を1つ増やす計算をさせる
これだけの機能。
画面の数を増やしたい(画面遷移)
1画面のみで完結するデザインのもの…は世の中に多くなく、
いろいろなものを作れるようになるには画面遷移ができることは必須。たぶん。
「swiftUI 画面遷移」で検索…
キーワードを拾うために目にした記事
今よく見たら3つ紹介されてるやん…全文読んで無いやん…
はい。
今読んでもよく分からない点だらけではあります。
とりあえず必要なパーツがどれかを探すのに複数記事を斜め読みして共通したキーワードを探すなどしています。
初心者うんこポエム(僕の勉強の進め方について)
※ポエムが書き連ねられており、あとから読み返して気持ち悪かったので畳んでおきました。
慣れてきて、知の引き出しが増えたらもう少し効率の良い学習手順でいけるんでしょうけど、
まだほら、はじめたばっかりなので。
算数の勉強を始めた小学1年生の頃に「1+1は本当に2なの？」というところを突き詰めたりしなかったと思います。
掘り下げるのは、掘り下げられるようになったタイミングで頑張るのがよさそうです。
独学するならやっぱりまずは、ハローワールドとLチカからやってみるべきだと思っています。
始めたばかりの僕の心構えとしては、こんな感じです。
これが僕にとって正解だったかの答え合わせはいずれ結果として出るでしょう。
はい、ポエムおわり。
いずれ理解して読めるようになるといいな。と思いつつ、今回は記事を流し読み…
NavigationViewで画面遷移ができる(っぽい)
画面遷移するために必要なパーツはNavigationViewとNavigationLinkらしい。
この2点がセットで使われるものということだけわかった。
掘り下げてさらに調べてみる…
参考にしたもの
他にも何個か記事を見たけどオプション(というか、プロパティ)が少なめでシンプルに作られていたので、基本の構造がわかりやすかった。
記事を読んでなんとなく理解した、必要そうなこと
- 必要なものは
NavigationViewとNavigationLink - 遷移元のページ(「遷移元の
View」と呼ぶのが正しそうだ)の内部にNavigationViewを配置する - 「遷移先の
View」を、別途書き上げる -
Viewの中のNavigationViewの中に、NavigationLinkを配置することでページ遷移が実現する
もちろんNavigationLinkには「遷移先のView」を紐付ける -
NavigationLinkそのものの見た目を整える
作ってみた。
と、いうことで、NavigationViewとNavigationLinkを配置してみた。
今あった3の倍数を教えてくれるViewとは別に、7の倍数を教えてくれるViewを作成して、2つのビューを行き来できるようにしたかったのだ。
プレビュー君、動いた…！！これよこれ〜
…おや？
自動で戻るボタンが配置されるのか…？戻るの機能の実装について考えなくてよくなった。ラッキーw(この後地獄に落ちます)
アプリとして開いてみた
動作確認はプレビューでもできるが、一旦アプリとして開いてみるか……
な！なんじゃこりゃーー！！！！
なんかなんか思ったんと違うーー！！！
えっ？なんで左側に3の倍数君おるん？？えっ？ナニコレ？？？
なんか見覚えある気がするアイコンとレイアウト
ってあれ？このアイコン…割と見かけることのあるやつだな…？
こいつ。
自動で配置される戻るボタン…
見覚えのあるアイコン…
あっ！もしかしてNavigationViewって、こういうやつ……なんてったらいいのか………
描いた。
こういうやつなんじゃないか？！そうだろ？！なぁ！！
とりあえず書き換えてみる！
書き換えプラン(脳内)
- 見出し系の
Viewを新たに用意
・これをNavigationViewとする
・ここにページ遷移のためのNavigationLinkを配置 - カウンターぽい機能の
Viewはそれぞれ独立したViewにする
作ってみた。今日の仕上がり。
コードも書き出すけど、畳んでおきますね。
コードを表示
import SwiftUI
struct ContentView: View {
@State private var count :Int = 0
@State private var msg :String = "3の倍数やねん！！！！"
@State private var displaymsg :String = ""
var body: some View {
NavigationView{
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
Spacer()
NavigationLink(destination:Multiple7View()){
Text("7の倍数お知らせ君")
.padding()
.background(Color.gray)
}
NavigationLink(destination:Multiple3View()){
Text("3の倍数お知らせ君")
.padding()
.background(Color.gray)
}
Spacer()
}
}
}
}
struct Multiple3View: View {
@State private var count :Int = 0
@State private var msg :String = "3の倍数やねん！！！！"
@State private var displaymsg :String = ""
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
Spacer()
Text("3の倍数お知らせ君")
Spacer()
Text(displaymsg)
Text(String(count))
.font(.largeTitle)
Button("count") {
withAnimation{
count += 1
if(count % 3 == 0){
displaymsg = msg
}else {
displaymsg = ""
}
}
}
.buttonStyle(.bordered)
.font(.title)
Spacer()
Button("reset"){
withAnimation{
count = 0
displaymsg = ""
}
}
.buttonStyle(.bordered)
.font(.title2)
Spacer()
Spacer()
}
}
}
struct Multiple7View: View {
@State private var count :Int = 0
@State private var msg :String = "7の倍数やねん！！！！"
@State private var displaymsg :String = ""
var body: some View {
VStack {
Image(systemName: "globe.asia.australia")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
Spacer()
Text("7の倍数お知らせ君")
Spacer()
Text(displaymsg)
Text(String(count))
.font(.largeTitle)
Button("count") {
withAnimation{
count += 1
if(count % 7 == 0){
displaymsg = msg
}else {
displaymsg = ""
}
}
}
.buttonStyle(.bordered)
.font(.title)
Spacer()
Button("reset"){
withAnimation{
count = 0
displaymsg = ""
}
}
.buttonStyle(.bordered)
.font(.title2)
Spacer()
Spacer()
}
}
}
表紙っぽいページがプレビューに出た！よし、これで立ち上げてみる！
ウッヒョーー！！！これこれこれこれぇ〜！！！！
NavigationViewってこういうやつ…ってコト？！
あっなるほど！！！！！(言語化不可)(語彙貧弱)(すぐ描く)(コーナーで差をつけろ)
NavigationViewってこの型枠のことか！
たぶんそう！
厳密には違うかもしれん、どっちかってーとこういう感じか…？？(すぐ描く)
こんな感じな気がする、ここは要確認だな
ていうか、
Navigationって名乗ってるやないか！！！自ら！！！！
そういうことか！！！細かい点はともかく、とりあえずswiftUI君はこれをナビゲーションって言うてるんや！！なるほど！！！
イメージしてたページ遷移とちょっと違う仕様のやつだったけどまぁよし。
今日のまとめ
-
NavigationViewの基本的な配置の仕方がわかった -
NavigationViewってメーラーとか、PC版のiMassageとか、メモ帳とか、エクスプローラーだとか、そういうやつでよくみるデザインの型枠(だと思われる。要確認) - 細かいプロパティをつけなくても、画面サイズ(比率)によって挙動が変わるものがある
(これに助けられるときも、苦しめられる時もありそう…)
次のやりたいこと
-
NavigationViewではないページ遷移(画面全部ガラッと変わる感じ)を実現する方法を知る - 今日雑に配置した
NavigationLinkを、NavigationViewに相応しいデザインにする(いまのところこっちが先に着手されそうかな) -
NavigationViewの左右バランスを変更してみる(できるのか？)
iPadなどのNavigationViewとリンク先のViewが同時表示可能な場合を想定
選択された場合に詳細情報が右側に表示される…みたいな使い方もできたらおもしろそう - 左側はメインの画面だけど、キャラクターをタップすると右側に詳細が出る…みたいな…
でもこれってNavigationには該当しなくない？ウォウウォw
今後参考にしていくもの(記事編集時点)
いや、画面分割無効にできるんかーーい。
- 「遷移元の
View」ととりあえず呼称していたものは、primaryと呼ぶのが正しそう - 「遷移先の
View」ととりあえず呼称していたものは、secondaryと呼ぶのが正しそう - DoubleColumnナントカと、TripleColumnナントカがありそう
そらをとぶのNavigationViewの動画、Youtubeで NavigationViewって検索したら出てきたわ…見ましたわ。
'NavigationView'の中の'NavigationView'は避けようねって話とか、わかりやすいかも。
ネストとかそういう用語がパッと出てこないのはまだまだだな…
文中にも一度貼り付けたものだけど画面遷移の方法として3+1個紹介されてる
① NavigationLink
② sheet
③ fullScreenCover
④ overlay←カスタム遷移として
ていうかこの記事ちゃんと読んでなかったの、Qiitaの表示が悪いんだよな
これ。これをみてタップして開いたのよ…
1つしか紹介されてないと思ってね！！！
序文に書いてあるやんか！！！ちゃんと読んで僕！！！