2

Since I am from an hybrid app background I want to achieve an UI in iOS which contains a logo and a text. Below is a blue strip which contains a "Back" and a "Registration" as the title. On Clicking back, it goes to the previous controller. How can I achieve this UI? I tried with a given code below: But I am not sure how to proceed further.

func addNavBarImage() {
        let navController = navigationController!
        let image = UIImage(named: "logo-signIn6.png") //Your logo url here
        let imageView = UIImageView(image: image)
        let bannerWidth = navController.navigationBar.frame.size.width
        let bannerHeight = navController.navigationBar.frame.size.height
        let bannerX = bannerWidth / 2 - (image?.size.width)! / 2
        let bannerY = bannerHeight / 2 - (image?.size.height)! / 2
        imageView.frame = CGRect(x: bannerX, y: bannerY, width: bannerWidth, height: bannerHeight)
        imageView.contentMode = .scaleAspectFit
        navigationItem.titleView = imageView
    }

Below is the image of UI which I want to achieve .enter image description here

DuDa
  • 3,718
  • 4
  • 16
  • 36
user16780334
  • 422
  • 5
  • 20

1 Answers1

5

You can assign a custom view to navigationItem.titleView. Here is a really simple code to assign an image and a text to titleView. I encourage you to create a separate view class, where you would define your custom view, that you then assign to titleView

override func viewDidLoad() {
    super.viewDidLoad()

    let imageView = UIImageView()
    imageView.heightAnchor.constraint(equalToConstant: 30).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 30).isActive = true

    let titleLabel = UILabel()
    titleLabel.text = "Your title"

    let stackView = UIStackView(arrangedSubviews: [imageView, titleLabel])
    stackView.spacing = 5
    stackView.alignment = .center

    // This will assing your custom view to navigation title. 
    navigationItem.titleView = stackView
}
πter
  • 1,899
  • 2
  • 9
  • 23
  • Thanks and what about the blue strip below it? Should I need to design it in storyboard ? "Blue Strip" – user16780334 Jan 21 '21 at 13:02
  • Yes you can design your "Blue strip" in your storyboard, but will have to handle the back action manually. Another note: An other solution for your issue is that you are not displaying the navigation bar, but instead you are using a custom view(a fake navigation view) for it. Its advantage is that you are not restricted with the navigationBar given height. But it is just a side not, it really depends on your needs. Hiding navigation bar: https://stackoverflow.com/questions/29209453/how-to-hide-a-navigation-bar-from-first-viewcontroller-in-swift – πter Jan 21 '21 at 13:12