2

How to implement this navigation bar in swiftui .it is looks like default .largeTitle but have different height and right button Navigation as needed

PhilStar
  • 56
  • 2
  • 6
  • 2
    To add navigation buttons, you can check this post here: https://stackoverflow.com/questions/56607175/navigation-stuff-in-swiftui – swifty Aug 31 '19 at 10:24
  • @swifty but i don't want just a button [that what i need](https://imgur.com/a/a5CntwR) – PhilStar Aug 31 '19 at 13:20
  • @swifty the background color may not be important but the arrangement of the elements is important – PhilStar Aug 31 '19 at 13:21

1 Answers1

4

This is the best solution I could come up with. You basically set the title generated by the navigation bar to an empty string, and construct your own title view in the leading view of the navigation bar.

import SwiftUI

struct NavigationBarView: View {
    var body: some View {
        NavigationView {
            Text("NavigationBarView")
                .navigationBarTitle("") //Set title to none so that it won't put the bottom title
                .navigationBarItems(leading:
                    //This is your made up title, put in the leading view so it is up top aligned with the plus button
                    Text("Navigation Bar").font(.largeTitle).bold()
                    //This is the plus button, on the right side, aka trailing view
                    , trailing: Button(action: {

                    }, label: {
                            Image(systemName: "plus.circle")
                    })
            )

        }
    }
}

enter image description here

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
swifty
  • 971
  • 1
  • 8
  • 15
  • Thank you very much. This helped me, but a margin of unknown height appeared to me. How to remove it? [red line is bad margin](https://imgur.com/a/tAocDDe) – PhilStar Aug 31 '19 at 14:14
  • and I don’t clearly understand why you use two buttons – PhilStar Aug 31 '19 at 14:26
  • @VipFilStar, sorry, was my mistake to use two buttons, just copied and pasted in the wrong place, and the second button was the label of the actual button. I have edited the answer to show the image as a label to the button. – swifty Aug 31 '19 at 19:02
  • but what about margin? I wrote about this in a previous post. – PhilStar Aug 31 '19 at 20:22
  • 2
    You can add an offset of -100 points on the y axis for the view that contains that text. This should eliminate that margin. – swifty Sep 02 '19 at 10:52