Swift 中类似控制中心的滑动视图实现

Posted 2023-03-12

【中文标题】Swift 中类似控制中心的滑动视图实现

【英文标题】：Control Center-like sliding view implementation in Swift

【发布时间】：2016-10-05 13:28:24

【问题描述】：

我正在尝试在 App 上创建交互式滑动过渡。

目标是当视图控制器从底部拖动时呈现一个 uiview（而不是从底部边缘，因此它不会与控制中心冲突）并将部分覆盖主视图控制器（就像 ios控制中心）。过渡应该是交互式的，即根据用户的拖动。

很高兴听到有关可用 API 的想法。

【问题讨论】：

我之前做过这个，我没有密码，但是如果你仍然没有答案，我可以在我回家时将它发送给你。

感谢@JacobKing 的快速回复，我正在等待您的答复。

@JacobKing 能否分享一下代码

@user6520705 我不再为该公司工作，所以我无法访问他们的源代码控制存储库......我可能有一个旧的本地副本，但我怀疑它，会看看什么时候我有机会。

【参考方案1】：

以下代码将执行在 Xcode 8 中测试并工作的简单 slideView 动画代码..

 import UIKit

class ViewController: UIViewController,UIGestureRecognizerDelegate 

// I am using VisualView as a slideView
@IBOutlet weak var slideView: UIVisualEffectView!

//Button to open slideView
@IBOutlet weak var button: UIBarButtonItem!

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

    // setting background for sideView
       slideView.backgroundColor = UIColor(patternImage: UIImage(named: "original.jpg")!)

    //Initial hide so it won't show.when the mainView loads...
      slideView.isHidden = true

    // DownSwipe to hide slideView
       let downSwipe = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.handleSwipes(_:)))
       downSwipe.direction = .down
       view.addGestureRecognizer(downSwipe)
    

   // set UIButton to open slideVie...(I am using UIBarButton)
     @IBAction func sdrawButton(_ sender: AnyObject) 

      self.slideView.isHidden = false
      slideView.center.y += view.frame.height

      UIView.animate(withDuration: 0.7, delay: 0, options: UIViewAnimationOptions.curveEaseIn, animations:
        self.slideView.center.y -= self.view.frame.height
        self.button.isEnabled = false
        , completion: nil)  


   func handleSwipes(_ sender:UISwipeGestureRecognizer) 
    if (sender.direction == .down) 
        print("Swipe Down")

        self.slideView.isHidden = true

        self.slideView.center.y -= self.view.frame.height
        UIView.animate(withDuration: 0.7, delay: 0, options: UIViewAnimationOptions.curveEaseOut, animations:
            self.slideView.center.y += self.view.frame.height
            self.button.isEnabled = true
            , completion: nil)
    
  
  

让我知道代码对你有用...

【参考方案2】：

对不起，如果这个问题有点老了。 您可以继承 UIView 并覆盖 touchesBegan(_ , with) 以保存原始触摸位置

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) 
  guard let  touch = touches.first else  print("No touch"); return 
      startPoint = touch.location(in: self)
      startHeight = heightConstraint.constant
      slideDirection = .none
      super.touchesBegan(touches, with: event)
   

和 touchesMoved(_,with) 在手指滑动视图时更新高度约束。

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) 
  guard let touch = touches.first else  print("touchesMovedno touches"); return 

  let endPoint = touch.location(in: self)
  let diff = endPoint.y - startPoint.y

  // This causes the view to move along the drag
  switch anchorLocation 
  case .top :
     heightConstraint.constant = startHeight + diff
  case .bottom :
     heightConstraint.constant = startHeight - diff
  
  self.layoutIfNeeded()

  // Update direction
  if diff == 0.0 
     self.slideDirection = .none
   else 
     self.slideDirection = (diff > 0) ? .down : .up
  
  super.touchesMoved(touches, with: event) 

如果您愿意，可以覆盖 touchesEnded(_, with) 以添加动画

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) 

  self.modifyHeightConstraints()
  self.animateViewTransition(duration: animDuration, delay: animDelay, clearance: animClearance, springDampingRatio: animSpringDampingRatio, initialSpringVelocity: animInitialSpringVelocity, complete: 
     self.slideDirection = .none
  )
  super.touchesEnded(touches, with: event)

我创建了一个组件，它可能具有您想要的确切功能。该组件包括可调整的动画弹跳。您可以在情节提要中的视图上布局和设计子视图。

查看 GitHub 中的链接

https://github.com/narumolp/NMPAnchorOverlayView