我正在尝试制作一张在快速滑动时滑动的卡片

Posted 2023-03-16

【中文标题】我正在尝试制作一张在快速滑动时滑动的卡片

【英文标题】：I'm trying to make a card that slides while on swipe in swift

【发布时间】：2019-11-17 16:48:01

【问题描述】：

我在动画和 PanGestureRecognizers 方面遇到了困难，我想要一个通过用手指向上拖动或黎明时滑动的视图。它有 4 个部分 1 - 2 需要更改高度、宽度和底部约束 2 - 3 高度是最大高度，您可以将其滑入或滑出 3 - 4 卡片处于最大高度，您可以向下滑动它

here is an image for a better understanding

谢谢！

【问题讨论】：

希望这能满足您的要求：Mimic bottom sheet for maps app

@SchaheerSaleem - 问题是我需要从第 1 部分移到第 2 部分，这意味着增加宽度和高度，然后像普通卡片视图一样使用它，您可以上下滑动那部分有点难。

【参考方案1】：

我就是这样做的。

    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


    

您可以随意调整宽度和高度值。

【讨论】：

感谢回复，但是我想增加宽度直到高度达到可能是200的点然后上下滑动，检查照片

在您期待上下滑动之前，是什么导致初始动画将宽度和高度增加到该特定点？

也可以向上或向下滑动

因此向上滑动 1 次将其增加至 200 的高度和相应的宽度。然后第二次滑动将高度增加到全屏？向下滑动时相反？

或直接，一次滑动，首先将高度增加到 200，宽度增加到 100%，然后将高度增加到全屏