Swift iOS pop up button?

Hello every one. :slight_smile:
I am new swift learner. Nowadays i was working on my first project for app store. But once i met a problem. I need a pop up button menus at the bottom of my app. Can any help me in this. My app will have two pages: main page(for showing text), mp3 page (simple page for choosing name of mp3).

Thanks.

What I would normally to to make a popup button is to add a view to the view controller in the storyboard that is the size of the view you would like to appear when required. Place it at the edge where you would like it to appear, for example at the bottom of the view controller on top of the parent view.

Now you create the view that you want to see, with the buttons you want, and hook them up to the view controller for handling as normal.

The view needs to have constraints applied. Probably you will want to make them as follows:
Height - fixed to the height you want the view to appear
Left - to leading edge of parent view
Right - to trailing edge of parent view
Top - to bottom edge of view with a constant equal to the height of the view
Then you make an IBOutlet reference to the constraint that is setting the position of the top of the view.

This positions the view at the bottom of your view, visible, in the position it should be when your buttons are exposed. Now in viewDidLoad you assign the constant set for the constraint to a variable so that you know what it should be when you want to raise it up into view.

var popupViewExposedConstant = popupViewTopConstraint.constant

Then set the constraint to 0 - this will move the view out of the way until you need it.

When you need the view to become exposed, do something like:

self.popupViewTopConstraint.constant = popupViewExposedConstant

UIView.animateWithDuration(0.5, animations: {
    self.view.layoutIfNeeded()
})

The view will animate up into view over the duration you specify. To hide it again do the same, but set the constant to 0.

Doing it this way means you can adjust the height of the view later in the storyboard without changing any code. Because you are reading the value of the constant you set this can change with no extra work on your part.

1 Like

Hello. :grinning: Thank you for helping me. I tried to so as you sent me, but it seems there are other problems with my knowledge. I would be very pleased if you give me more information about this theme. As i said before I am creating an app which has two main pages. At the bottom the first page horizontal pop up buttons should appear. At the second page they have to be near to centre of page. I tried a lot but noting yet. :sweat_smile: I hope there are some tutorials or explaining about my situation. Thanks!!!
1. default view without touching:

2. Changes of pop up buttons while touching:

3. Clicked day pop up button:

4. Clicked date pop up button:

Well, sorry but I can’t read anything in those screenshots!

Let’s start slow and go step-by-step. Grab yourself a new Xcode project to experiment in. When you have worked out how to do it then you can add it to your project that matters.

Start with a view controller with nothing in it but the default view. Change the background of that view controller to a color like yellow.

Add a new UIView. Put it in the middle of the view controller as a child of the main view. Make it a color that contrasts, such as blue. Add constraints to that view for height, leading edge (left), trailing edge (right) and from the top edge of the blue view to the bottom edge of the yellow view. Now drag and resize it so that it is the same width as the yellow view, about the right height for a button, and has its bottom edge sitting at the bottom of the yellow view. Choose “update constrains” on this view to make the constraints reflect the position you have placed it in.

Now you need to find the constraint that you added from the top of the blue view to the bottom of the yellow view, open the Assistant editor, and drag an IBOutlet from that constraint into your view controller so that you can modify that constraint at runtime. Find it in the list to the left of the storyboard editor, or just click on it in the editor - it will look like a line going through the middle of the blue view from top to bottom. topEdgeToParentBottomConstraint might be a suitable name, it’s what I am using below.

Once that is done add the following to viewDidLoad in your view controller:

topEdgeToParentBottomConstraint.constant = 0.0

UIView.animateWithDuration(2.0, animations: {
    self.view.layoutIfNeeded()
})

When your app starts and the view controller loads the view you should see the blue view slowly lower itself until you can’t see it any more. Get this far and we’ll go further, but if you want to experiment try adding a button that raises or lowers the blue view. To do that you will need to record the constant and save it before you set it to zero - then to bring it back, set the constant to its original value.

When you have the ability to do animations and alter constraints like this then you can do a lot of different styles of popup. You can have the view fly in from any edge of the screen to any place on the screen, or you could apply a transform that will expand it from a very small size, or you can just have it fade in from nothing.