Swift DropDown View Animation

SwiftAnimation1

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) {
            self.hideDropDownView()
        } else {
            GetNewListAPI.sharedInstance().getPortfolioList{
                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
                        self.allWatchlists.addObject(listName)
                    }
                    
                    //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
                    self.dropDownView.reloadData()
                    self.showDropDownView()
                }
            }
        }
    }
    
    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) {
                    completion()
                }
            })
        }
    }
    
    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
    }

 

Output:

animation slide down

 

Worth read:

http://www.appcoda.com/view-animation-in-swift/

 https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html

http://www.objc.io/issue-12/animations-explained.html

 

Advertisements

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