탭바에 맞춰 변화하는 네비게이션 바

를 만들었습니다.


어때? 아래의 TabBar에 맞추어 위의 NavigationBar도 전환하고 있습니다!
좋은 느낌 이군요 ~. 아주 좋은 느낌으로 만들어졌습니다.

보통 네비게이션 바는 NavigationView 를 사용해 만들어 갑니다만, 나는 NavigationView에는 이미지와 텍스트를 함께 둘 방법은 없다고 생각하며 HStack 를 만들었습니다.

다음은 코드입니다. (스포일러이지만 이것은 실패의 예입니다.)
작동 방식은 NavigationBarView 파일에서 이미지와 텍스트를 아직 설정하지 않은 탐색 모음을 만듭니다. 그리고 네비게이션 바를 표시하고 싶은 파일로 NavigationBarView 를 호출해, 인수에 적절한 이미지와 텍스트를 넣는 것으로, 각각의 화면마다 네비게이션 바에 표시되는 이미지와 텍스트를 바꾸고 있는 것입니다. 아, 전혀 천재라든지 아니야///💦

NavigationBarView

import SwiftUI

struct NavigationBarView: View {
    let image: Image
    let titleName: String

    var body: some View {

        HStack {
            VStack(alignment: .leading) {
                image
                    .resizable()
                    .frame(width: 30, height: 30)
                    .foregroundColor(.white)
                    .padding(10)
            }
            ZStack {
                Text("\(titleName)")
                    .fontWeight(.medium)
                    .foregroundColor(.white)
                    .font(.title)
            }
            Spacer()
        }
        .background(Color.orange)
    }
}

ProfileListView

import SwiftUI

struct ProfileListView: View {

    var width = UiComponent.screenWidth
    var height = UiComponent.screenHeight - 50


    var body: some View {
        ZStack {
            VStack {
                ForEach(0 ..< 4) {_ in
                    ProfileRow()
                }
            }
            VStack {
                VStack {
                    NavigationBarView(
                        image: Image(systemName: "list.bullet"),
                        titleName: "プロフィール一覧"
                    )
                    .frame(width: width, height: 50)
                }
                Spacer()
            }
        }
    }
}

struct ProfileListView_Previews: PreviewProvider {
    static var previews: some View {
        ProfileListView()
    }
}

ProfileRegisterView

import SwiftUI

struct ProfileRegisterView: View {
    var width = UiComponent.screenWidth

    var body: some View {
        ZStack {
            HStack {
                Text(/*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
            }
            VStack {
                VStack {
                    NavigationBarView(
                        image: Image(systemName: "person.circle.fill"), titleName: "プロフィール登録"
                    )
                    Spacer()
                }
            }
        }
    }
}

struct TabRegister_Previews: PreviewProvider {
    static var previews: some View {
        ProfileRegisterView()
    }
}

그러나 문제가 있습니다.

실은, 사양으로서 코알라 타로의 카드를 탭하면 화면 천이 하고 싶습니다만, swiftUI의 화면 천이에는 NavigationLink 가 사용되고 있어 NavigationLink 는 NavigationView 가 필요합니다. 그래서 이대로는 무리하게 화면 천이시키려고 NavigationLink 와 NavigationView 를 추가하면 다음과 같이 됩니다.

먼저 ProfileListView 파일을 다음과 같이 변경합니다.

ProfileListView

import SwiftUI

struct ProfileListView: View {

    var width = UiComponent.screenWidth
    var height = UiComponent.screenHeight - 50


    var body: some View {
        NavigationView{
            ZStack {
                VStack {
                    ForEach(0 ..< 4) {_ in
                        NavigationLink(destination: EmptyView()){
                        ProfileRow()
                        }
                    }
                }
                VStack {
                    VStack {
                        NavigationBarView(
                            image: Image(systemName: "list.bullet"),
                            titleName: "プロフィール一覧"
                        )
                        .frame(width: width, height: 50)
                    }
                    Spacer()
                }
            }
        }
    }
}

struct ProfileListView_Previews: PreviewProvider {
    static var previews: some View {
        ProfileListView()
    }
}

그러면 레이아웃이 무너집니다.


화면 천이는 할 수 있습니다만, 천이처의 타이틀 바가, 작성한 타이틀 바와 분위기가 다르기 때문에 레이아웃의 통일감이 없어져 버립니다.



이건... 안돼...

츄라.......

해결책

이렇게 쓰자.

ProfileListView

​
import SwiftUI
​
struct ProfileListView: View {

    var width = UiComponent.screenWidth
    var numbers = [1, 2, 3, 4, 5]

    init() {
        UINavigationBar.appearance().backgroundColor = UIColor.orange
    }

    var body: some View {
        // ナビゲーションビュータグで囲む(ナビゲーション遷移するため)
        NavigationView {
            VStack {
                ForEach(0 ..< 5) {_ in
                    // ナビゲーション遷移
                    NavigationLink(destination: EmptyView()){
                        ProfileRow()
                    }
                }
            }
            // ナビゲーションバータイトルをつける
            .navigationBarTitleDisplayMode(.inline)
            // カスタムナビゲーションを作る（中でHSTackのView）
            .toolbar {
                ToolbarItem(placement: .principal) {
                    HStack {
                        Image(systemName: "person.circle.fill")
                        Text("プロフィール登録").font(.headline)
                    }.foregroundColor(.orange)
                }
            }
        }
    }
}
​
​
​
struct ProfileListView_Previews: PreviewProvider {
    static var previews: some View {
        ProfileListView()
    }
}

이제 이것만으로 갈 수 있습니다 ...
NavigationBarView 라든지...

이런 느낌이 듭니다.

화면 전환도 제대로 할 수 있습니다.
캡처를 취하는 것을 잊었을 수 있습니다. STAP 세포가 있습니다.

쓰라단탄! ! ! ! ! ! ! ! ! ! !
네! ! ! 끝! ! ! ! ! ! ! ! ! ! ! ! ! ! !