I'm trying to make a card that slides while on swipe in swift

Question

I'm having a hard time with animations and PanGestureRecognizers, I want a view that slides by dragging up or dawn with your finger. It has 4 parts 1 - 2 the height, width and bottom constraints need to be changed 2 - 3 the height is the maximum height and you can slide it in or out 3 - 4 the card is at its maximum height and you can swipe it down

here is an image for a better understanding

thanks!

Answer 1

this is how I would do it.

    var theView = UIView()
    override func viewDidLoad() {
        super.viewDidLoad()

        // First create your view.
        theView = UIView(frame: CGRect(x: 40, y: self.view.bounds.height - 120, width: self.view.frame.width - 80, height: 100))
        // set its background color
        theView.backgroundColor = UIColor.black
        // Create the round corners
        theView.layer.cornerRadius = 20
        // And add it to the view
        self.view.addSubview(theView)

        // Create the UIPanGestureRecognizer and assign the function to the selector
        let gS = UIPanGestureRecognizer(target: self, action: #selector(growShink(_:)))
        // Enable user interactions on the view
        theView.isUserInteractionEnabled = true
        // Add the gesture recognizer to the view
        theView.addGestureRecognizer(gS)

    }

        // The control value is used to determine wether the user swiped up or down
    var controlValue:CGFloat = 0
    var animating = false
    // The function called when the user swipes
    @objc func growShink(_ sender:UIPanGestureRecognizer){
        let translation = sender.location(in: theView)

        // Check the control value to see if it has been set
        if controlValue != 0 && !animating{

            // if it has been set check that the control value is greater than the new value recieved by the pan gesture
            if  translation.x < controlValue{
                animating = true
                // If it is, change the values of the frame using animate
                UIView.animate(withDuration: 0.5, animations: {
                    self.theView.frame = CGRect(x: 0, y: self.view.bounds.height - 300, width: self.view.frame.width, height: 300)
                }, completion: {finished in
                    UIView.animate(withDuration: 1.0, animations: {
                    self.theView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
                    }, completion: {finished in self.animating = false; self.controlValue = 0})})
            }else if translation.x > controlValue{
                animating = true
                // else, change the values of the frame back.
                UIView.animate(withDuration: 0.5, animations: {
                    self.theView.frame = CGRect(x: 0, y: self.view.bounds.height - 300, width: self.view.frame.width, height: 300)
                }, completion: {finished in
                    UIView.animate(withDuration: 1.0, animations: {
                    self.theView.frame = CGRect(x: 40, y: self.view.bounds.height - 120, width: self.view.frame.width - 80, height: 100)
                    }, completion: {finished in self.animating = false; self.controlValue = 0})})
            }
        }
        // set the control value to the value received from the pan gesture
        controlValue = translation.x


    }
}

You can adjust the width and height values however you want.