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!

Hopefully this would fulfill your requirements: [Mimic bottom sheet for maps app](https://stackoverflow.com/questions/37967555/how-can-i-mimic-the-bottom-sheet-from-the-maps-app) — Schaheer Saleem, Nov 17 '19 at 17:04
@SchaheerSaleem - the thing is that I need to move from part 1 to 2, that means to increase the width and height and then use it like a normal card view that you can slide up and down and that part is a bit difficult. — Octa CZO, Nov 17 '19 at 17:58

J Erasmus · Accepted Answer · 2019-11-18T09:10:28.347

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.

thanks for the reply but I want to increase the width until the height gets to the point of may be 200 and then to swipe up and down, check the photo — Octa CZO, Nov 17 '19 at 19:16
What causes the initial animation which increases the width and height to that certain point, before you are expecting the swipe up and down? — J Erasmus, Nov 17 '19 at 19:27
So 1 swipe up increases it to let's say a height of 200 and width accordingly. and then the second swipe increases the height to full screen? The the opposite on swipe down? — J Erasmus, Nov 17 '19 at 19:37
or directly, all in one swipe, first increase the height to for ex 200 and the width 100% and then the height to full screen — Octa CZO, Nov 17 '19 at 19:40
But that is what my code is doing? On swipe up the width grows and so does the height. once the width reaches a specific point it stops and only the height grows? The only difference is that mine does not cover the whole screen, but that is easily adjusted by changing the x, y width and height in the control > translation section. I will edit the code to cover full screen. — J Erasmus, Nov 17 '19 at 19:45
Unless you are wanting the speed of the width and height increments to be the same and from that point only the height grows? — J Erasmus, Nov 17 '19 at 19:47
I have adjusted my answer, let me know if that is what you are looking for. you will need to adjust the sizes and animation timing etc. — J Erasmus, Nov 18 '19 at 09:09
Sorry but I wasn't able to reply your answer, because I was at school, only now I opened my computer. I try'ed your code and mainly this is what I wanted but is there a way you can do so the view is following your finger. If I'm swiping now the view reaches the top of the screen first, it should reach it when my finger also reaches the top. — Octa CZO, Nov 18 '19 at 15:37
@J Erasmus can you do that? To grow with your finger. That is exactly what I need, can you help me? — Octa CZO, Nov 19 '19 at 17:26

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

1 Answers1