Sliding a UIView "Out of nowhere" - swift

Question

i am trying to create a custom dropdown menu. I will have several cards on my view which should have a dropdown menu when tapped.
Right now i am having the dropDownView having cardView.frame.maxY as its frame.origin.y value with a height of 0 and when I tap the card view I set the height of the dropDownView to its real height-value within an animation.
But that looks kind of ugly since it looks like it stretches out of nowhere. I want it to slide out of nowhere.
By that i mean it having its original size right away and sitting below the card view (cardView.frame.maxY = dropDownView.frame.maxY) When the cardView is tapped the dropDownView slides down (dropDownView.frame.origin.y = cardView.frame.maxY) within an animation.
The Problem is, that the dropDownView is bigger than the cardView. So when it sits behind the cardView it is visible above the cardView. I tried to illustrate the Problem :)
This is state A (Before View A[cardView] is tapped) (View C is just some Background View which should be visible above and below View A)
This is state B (after cardView is tapped)
Any Ideas how to solve this problem? Thank you!
In addition heres a little sample code:
class cardViewComplete: UIView {
var card: CardView!
var dropDownMenu: DropDownView!
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(frame: CGRect) {
super.init(frame: frame)
}
func initSubViews() {
self.clipsToBounds = true
card = CardView()
card.frame = self.bounds
card.addTarget(self, action: #selector(YellowTackleTicketComplete.ticketTapped), forControlEvents: .TouchDown)
dropDownMenu = DropDownView()
dropDownMenu.frame = CGRect(x: 0, y: self.bounds.maxY, width: self.bounds.width, height: 350)
dropDownMenu.hidden = true
dropDownMenu.backgroundColor = UIColor.clearColor()
self.addSubview(card)
self.insertSubview(dropDownMenu, belowSubview: card)
dropDownMenu)
}
func showDropdown() {
dropDownMenu.hidden = false
originalHeight = self.frame.size.height
print("showing")
if !animating {
animating = true
UIView.animateWithDuration(
0.7,
delay: 0,
usingSpringWithDamping: 0.7,
initialSpringVelocity: 0.5,
options: [],
animations: {
self.frame.size.height = self.frame.size.height + 350
}, completion: { _ in
self.animating = false
}
)
}
self.setNeedsDisplay()
self.dropDownMenu!.setNeedsDisplay()
dropped = true
}
func ticketTapped() {
showDropdown()
}
}

Answer 1

What I would do is place both View A and View B inside a new view, we can call this containerView.
containerView should be big enough to hold both A and B (when B is moved down). Then set containerView to clip at bounds. So when View B is in the "up" position, it is sitting both behind View A, and clipped at the top of containerView. Therefore it is not seen at all.
Once you're ready for View B to drop to it's "down" position, just animate it going down, where it will appear to come out from the bottom of View A. Since the containerView's frame will extend far enough down to accommodate A and B (in it's down position), nothing will be clipped and both views will be visible.
card = CardView()
card.frame = self.bounds
card.addTarget(self, action: #selector(YellowTackleTicketComplete.ticketTapped), forControlEvents: .TouchDown)
dropDownMenu = DropDownView()
// I changed the frame to place it right underneath the card view
dropDownMenu.frame = CGRect(x: 0, y: card.frame.size.height - 350, width: self.bounds.width, height: 350)
dropDownMenu.hidden = true
dropDownMenu.backgroundColor = UIColor.clearColor()
let containerView = UIView()
containerView.frame = CGRect(x: 0, y: 0, width: bounds.width, height: card.frame.size.height + dropDownMenu.frame.size.height)
containerView.backgroundColor = nil
containerView.clipsAtBounds = true
containerView.addSubview(dropDownMenu)
containerView.addSubview(card)