Menu below navigation bar with animation in Swift

Question

My problem is really simple, I don't know how to display a list (menu) below the Navigation bar, when I click on it (on the Navigation Bar).

I would like to do the same thing than this image:

I tried to do this:

func doSomething(){

      let navigationBarHeight = self.navigationController?.navigationBar.frame.height ?? 0
      print(navigationBarHeight)
      let heightTotal = UIApplication.shared.statusBarFrame.height + navigationBarHeight

      DispatchQueue.main.async(execute: {
         appDelegate.infoView(message: "test", Yorigin: heightTotal, color: colorBlueFollow)
      })
   }

And this in appDelegate:

func infoView(message: String, Yorigin: CGFloat ,color: UIColor){
      if infoViewIsShowing == false{
         infoViewIsShowing = true

//         let infoViewHeight = self.window!.bounds.height / 14.2
         let infoViewHeight = self.window!.bounds.height / 4.2
         let infoViewY = Yorigin - infoViewHeight

         let infoView = UIView(frame: CGRect(x: 0, y: infoViewY, width: self.window!.bounds.width, height: infoViewHeight))
         infoView.backgroundColor = color
         self.window!.addSubview(infoView)

         let infoLabelWidth = infoView.bounds.width
         let infoLabelHeight = infoView.bounds.height + UIApplication.shared.statusBarFrame.height/2

         let infoLabel = UILabel()
         infoLabel.frame.size.width = infoLabelWidth
         infoLabel.frame.size.height = infoLabelHeight
         infoLabel.numberOfLines = 0

         infoLabel.text = message
         infoLabel.font = UIFont(name: "HelveticaNeue", size: 11)
         infoLabel.textColor = UIColor.white
         infoLabel.textAlignment = .center

         infoView.addSubview(infoLabel)

         // Animate errorView
         UIView.animate(withDuration: 0.2, animations: {

            // Move down
            infoView.frame.origin.y = Yorigin

         }, completion: { (finished: Bool) in
            if finished{

               UIView.animate(withDuration: 0.2, delay: 3, options: .curveLinear, animations: {
                  // move up
                  infoView.frame.origin.y = infoViewY

               }, completion: { (finished: Bool) in
                  if finished {
                     infoView.removeFromSuperview()
                     infoLabel.removeFromSuperview()
                     self.infoViewIsShowing = false
                  }
               })

            }
         })


      }
   }

The problem is that, the view shown is passing above the Navigation Bar, it's not the effect that I would like. Do you have an idea about how I can do that?

score 1 · Answer 1 · answered May 30 '17 at 20:35

Did you look on cocoapods?: https://cocoapods.org/?q=popover

A lot of ready-to-use component are available. Maybe You should find a component which fits your needs.

Did you tried bring to front the infoView?: Bringing a subview to be in front of all other views

score 1 · Accepted Answer · answered May 30 '17 at 20:35

1

This line

self.window!.addSubview(infoView)

Puts it on top of all other views in the window (including the navigation bar).

You should search through the view controller hierarchy, starting with rootViewController to find the one to add the view to.

Look at the answers to this question for some options: iPhone -- How to find topmost view controller

answered May 30 '17 at 20:35

Lou Franco

87,846
14
132
192

Thanks for your answer, I moved my code from AppDelegate to the current View Controller and I changed self.window! to self.view. It was that simple aha ! – KevinB Jun 01 '17 at 08:14

score 0 · Answer 3 · answered May 30 '17 at 21:29

Assuming you subclass UIViewController then you can set it's property 'navigationItem' as follow.

self.navigationItem.title = "Your text"

One of the common ways to set title text on a navigation controller is to override the below tableview delegate method and copy it's cell's textLabel's text to a subclass ViewController's nav item.

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
      self.navigationItem.title = tableView.cellForRow(at: indexPath)?.textLabel?.text
   }

Menu below navigation bar with animation in Swift

3 Answers3