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

Posted

技术标签:

【中文标题】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

【讨论】:

以上是关于Swift 中类似控制中心的滑动视图实现的主要内容,如果未能解决你的问题,请参考以下文章

iOS 控制中心触摸传递到我的滚动视图?

Swift - 游戏中心不可用

在 Swift 中创建滑动转场

iOS Swift:如何实现类似用户界面的堆叠卡片?

如何在 ionic/cordova 中隐藏控制中心?

在计时器的帮助下,Swift 4 在页面视图控制器中自动滑动