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.