iWatch iWatch - 17 days ago 8
Swift Question

Show a view as a swipe up gesture in front of another view

Hello I am developing app which has UI like below images..

I am not able to understand how to create bottom swipe up view.
I have tried swipe up gesture on bottom view to open it.
But I want to open bottom view with finger (means slow upward drag of view should reveal bottom view slowly)

I am using auto layout and storyboard. How do I achieve this ?

I have searched a lot and I got this https://github.com/crocodella/PullableView but I am not able to add this view with storyboard and auto layout.

enter image description here

enter image description here

Answer

I Just want say before solution is that this is not gonna be drag like effect for that you need to use gesture...but It gives you similar effect if you strongly need it with button click.. I think its not what you want but this give you an option if you want

For drag bottom view to top,you shold use gesture and this may help you

Drag Down UIView in iOS 5

or this

http://www.jondev.net/articles/Dragging_View_with_Finger_(iPhone)

You got the similar effect using constant property of constraints..like Give the height constraint to bottom view and use constant property on click event to swipe up and down.

Still confused!!! Here is the solution

UI setup

enter image description here

Constraints Setup

enter image description here

After that You just need to make some outlets and click event of button...

  • make an outlet of height constraint of bottom view
  • make an outlet of button to change its title to up/down
  • make and click event of button

After this procedure you need to code on button action, So here is that code

class ViewController: UIViewController {

   // Button outlet
   @IBOutlet weak var btnUp: UIButton! 

   // Height Constraint outlet
   @IBOutlet weak var constHeightBottomView: NSLayoutConstraint!

   // Boolean property to handle click
   var clicked = true

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

@IBAction func btnUpClicked(sender: UIButton) {
    if clicked{
        self.clicked = !clicked
        UIView.animateWithDuration(0.2, animations: {
            self.btnUp.setTitle("Down", forState: .Normal)
            self.constHeightBottomView.constant = 200
            self.view.layoutIfNeeded()
        })

    }
    else{
        self.clicked = true

        UIView.animateWithDuration(0.2, animations: {
            self.btnUp.setTitle("Up", forState: .Normal)
            self.constHeightBottomView.constant = 0
            self.view.layoutIfNeeded()
        })
    }
}

}

and the output of this work would be

enter image description here

Comments