1

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

Munib
  • 957
  • 1
  • 14
  • 30
Apple_Magic
  • 477
  • 8
  • 26

1 Answers1

5

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

Community
  • 1
  • 1
Bhavin Bhadani
  • 22,224
  • 10
  • 78
  • 108
  • Thanks for your answer. Yes you are right, it was workaround for me. Just need to handle drag view coordinates to handle user drag view with finger. – Apple_Magic Sep 13 '15 at 18:05
  • just a tip if you set self.constHeightBottomView.constant = 0 before animate not inside of animate, the slide effect will work, – Okan Kocyigit Oct 04 '16 at 21:54
  • @El Captain Pardon my ignorance. But where the view 1 pointer is located at, isn't the view 1 background view? And the view 2 is the view that is being swiped up? Please clarify. Thanks – Munib Nov 17 '16 at 18:11
  • @return0 as I said in first couple of lines .. I didn't use gesture here ... so nothing swipes up .. just change of constraints when button press ... and view2 height should be 0 at start .... that grey color stripe is view one ... black one is view2 – Bhavin Bhadani Nov 18 '16 at 11:24
  • @EICaptainv2.0 AH, makes sense. Thanks a lot. – Munib Nov 18 '16 at 22:02
  • @EICaptainv2.0 Hey, sorry to bother again. Where should this code be added? BackgroundView Controller or the 2nd one? Thanks again. – Munib Nov 22 '16 at 22:25