Swift DropDown View Animation


Sorry for the child-like layout to describe the scenario. When user tapped navBar, the dropDownView will be toggle to show or hide.

DropDownView is positioned behind the navbarview in storyboard but I need to recalculate the height and position again because my dropdownview content changes dynamically from time to time.

    @IBOutlet var tableViewHeight: NSLayoutConstraint!
    @IBOutlet var tableViewYAlignment: NSLayoutConstraint!
    var allWatchlists:NSMutableArray = []
    var animating: Bool = false
    var dropDownViewIsDisplayed: Bool = false

    @IBAction func barButtonItemPressed(sender: UIButton?) {
        if (self.dropDownViewIsDisplayed) {
        } else {
                response, error in
                if error == nil && response != nil{
                    var responses = response as! NSArray
                    var name = "name"
                    self.allWatchlists = []
                    for item in responses{
                        var listName = item[name] as! String
                    //DROPDOWN - you can just use this portion
                    let height:CGFloat = CGFloat(self.allWatchlists.count) *  self.rowHeight  //count tableView frame height dynamically
                    self.tableViewHeight.constant = height
                    self.tableViewYAlignment.constant = 0 //hide under navBarView
                    self.dropDownView.frame.size.height = height
    func hideDropDownView() {
        var yAlign: CGFloat = 0.0 //hide the dropdownview bottom view exactly same as navbarview
        self.animateDropDownToFrame(yAlign) {
            self.dropDownViewIsDisplayed = false
    func showDropDownView() {
        //+ 10 means push the dropdownview above navbarview
        //- 10 means push the dropdownview below navbarview - in this case we want neg value of dropdownview height
        var yAlign: CGFloat = self.tableViewYAlignment.constant - self.tableViewHeight.constant 
        self.animateDropDownToFrame(yAlign) {
            self.dropDownViewIsDisplayed = true
    func animateDropDownToFrame(yCoordinate: CGFloat, completion:() -> Void) {
        if (!self.animating) {
            self.animating = true
            //Here is the magic happenned! Core Animation - it will animate from the item original state to the state you wished to become
            UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
                self.tableViewYAlignment.constant = yCoordinate //we change the position of the dropdownview
                self.view.layoutIfNeeded() //essential for animation carry out if not view changes abruptly
            }, completion: { (completed: Bool) -> Void in
                self.animating = false
                if (completed) {
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return allWatchlists.count
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell = tableView.dequeueReusableCellWithIdentifier("DropDownRowCell", forIndexPath: indexPath) as! UITableViewCell
        cell.backgroundColor = UIColor.clearColor()
        cell.textLabel!.text = allWatchlists[indexPath.row] as? String
        return cell



animation slide down


Worth read:






Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s