10

AppStore app has an icon with an image on the right side of the NabBar with Large Title: Would really appreciate it if anyone knows how to implement it or ideas on how to do it.

pushpank
  • 242
  • 2
  • 9
  • https://stackoverflow.com/questions/56505528/swiftui-update-navigation-bar-title-color may be from the answer you can get some idea – Prashant Tukadiya Jul 06 '20 at 12:51
  • @ Prashant Tukadiya I have looked into this. But that is different. Thanks for sharing – pushpank Jul 06 '20 at 13:17
  • 1
    As of today SwiftUI is not mature enough for this functionality. You could only do it using UIKit or hiding the navigation bar on your view and then creating a custom look-alike view that stays on the top of your screen. Afterwards it is a hard play with the gestures. – DI.dev Jul 06 '20 at 13:41
  • 1
    I have already created it in UIkit. But not able to create it using swiftUI. – pushpank Jul 06 '20 at 14:51
  • @pushpank Did you find the answer? I am looking for the same thing. – Tulon Jun 18 '21 at 17:53

2 Answers2

-2

This does mostly what you're after. Using displayMode: .automatic when declaring the navigationBarTitle means that it'll show as largeTitle until scrolled at which point the NavBar goes to displayMode: .inline. I'm just using an SF Symbols image for example but you could swap in Cap's shield in the same way. Wrap it in a button if you want interaction.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(0...1000, id: \.self) { _ in
                Text("Sample")
            }
            .navigationBarTitle("Large Title", displayMode: .automatic)
            .navigationBarItems(trailing: Image(systemName: "shield"))
        }
    }
}
Tristan Warner-Smith
  • 9,338
  • 5
  • 46
  • 74
  • trailing bar items never works like shared animation. UI is different you can compare both. – pushpank Aug 09 '20 at 15:49
  • 1
    What you're asking for @pushpank isn't default behaviour. If you specifically don't want to use native behaviour then you're signing up to a lot of complexity. What I put forward gets you 90% there. However, if you want to match the behaviour exactly you could capture the size and position of the nav bar view using `PreferenceKey`s and `GeometryReader` to manually update the position and size of the image. – Tristan Warner-Smith Aug 10 '20 at 18:15
  • 1
    Then I suggest you read up on those two things, https://swiftui-lab.com/communicating-with-the-view-tree-part-1/ is a good place to start. – Tristan Warner-Smith Aug 12 '20 at 07:41
-4

THIS DONE IN UIKIT.

Here is what the code looks like

let viewA = UIView()
let viewB = UIView()

private func setupNavigationBarAppearance() {

        viewA.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didViewA)))
        viewB.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didViewB)))
        
        let leftBarButtonItem = UIBarButtonItem(customView: viewA)
        let rightBarButtonItem = UIBarButtonItem(customView: viewB)
        
        navigationItem.leftBarButtonItem = leftBarButtonItem
        navigationItem.rightBarButtonItem = rightBarButtonItem
        navigationItem.title = "Hello World"
        
    }

@objc private func didViewA() {
        print("Hello")
    }
    
    @objc private func didViewB() {
        print("World")
    }

I used UIView here because ImageView is a subclass of UIView so you can just relate it with your ImageView. You can also remove left or right barButtonItem if you do not need it.

King
  • 1,576
  • 1
  • 17
  • 67