SOLVED: Button near the navigation title

@solid0x

Nov '21

Hi! How can I create a button on the same line as navigation title? The code with ToolbarItemGroup and navigationBarLeading placement gives this result:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("(o_o)")
                .navigationTitle("Today")
                .toolbar {
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                        NavigationLink(destination: ContentView()) {
                            Image(systemName: "person.crop.circle").font(.title)
                        }
                    }
                }
        }
    }
}

The result

What I want to get is this:

Need this

3

@ericlewis

Nov '21

You would need to hide the navigation bar and implement a custom one. Or you could pin the navigation title's size to large, and attempt to use .offset(x:y:) to lower the Button. Or you don't have to pin the navigation bar title's size to large, use .offset(x:,y:) and monitor ScrollView offsets to move the button up or down depending on scroll position.

It's not exactly easy.

3

@NigelGee HWS+

Nov '21

If you offset when you scroll up then the Navigation title changing to .inline and the Image will be out.

The App Store "Today" is in the body and therfore not a Navigation Title.

This will give you them same as the App Store

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    HStack {
                        Text("Today")
                            .font(.largeTitle.bold())

                        Spacer()

                        NavigationLink {
                            Text("Person View")
                        } label: {
                            Image(systemName: "person.crop.circle")
                                .font(.largeTitle)
                                .foregroundColor(.blue)
                        }

                    }
                }
                .padding()
            }
            .navigationBarHidden(true)
        }
    }
}

However I would use .navigationBarTitleDisplayMode(.inline) instead of .navigationBarHidden(true) as when scrolling up the text goes out of the safe area (eg the notch and time etc), but you use .inline display mode then it scroll under it.

4

@solid0x

Nov '21

Thanks for your replies.

@NigelGee, I would add also .navigationTitle("Today") before .navigationBarHidden(true) to replace the "Back" button text inside the navigation bar on Person View 🙂

3

Archived topic