CODEWITHSUNDEEP
swiftui
Quim
Quim

Reputation: 31

Aligning image to navigationBarTitle in SwiftUI

I'm trying to add a User Image (button) next to the .navigationBarTitle, but with the code bellow, the image appears on top of the title alignment. (picture attached). Many thanks for your help!

.navigationBarTitle(Text("Watch"))
                .navigationBarItems(trailing:
                    Image("User")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 36, height: 36)
                        .clipShape(Circle())
                )

Image should be bottom - aligned to the text

Upvotes: 1

Views: 972

Answers (2)

Quim
Quim

Reputation: 31

Thanks @Simon, the best option for what I was looking for is to Add the User Icon to the Title (not NavBar) and apply an Offset of y: -55. When scrolling up the icon disappears under the NavBar. The same effect on the Apple TV app (mobile).` VStack(alignment: .leading) { HStack { Text("Children") .font(.title) .fontWeight(.bold) .padding(.leading, 24) .padding(.top, 20)

                        Spacer ()
                        Image("User")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 36, height: 36)
                            .clipShape(Circle())
                            .offset(y: -55)
                            .padding(.trailing, 24)[final result][1]`

Upvotes: 1

Simon
Simon

Reputation: 1850

This code produces this view:

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            List {
                Text("Chocolate")
                Text("Vanilla")
                Text("Strawberry")
            }.navigationBarTitle(Text("Watch"))
            .navigationBarItems(trailing:
                Image(systemName: "person.circle")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 36, height: 36)
                    .clipShape(Circle())
                    .padding(.top, 90)
            )
        }
    }
}

There is a default space for the Items and a default space for the Text. Imagine it like two HStacks in a VStack. Where the Title is in the lower HStack and the items are in the upper one. There is no "real" way on getting in the lower one. I'd recommend to create an own NavigationBar for your purposes.

enter image description here

Upvotes: 1

Related Questions