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

【问题标题】：Control Center-like sliding view implementation in SwiftSwift 中类似控制中心的滑动视图实现
【发布时间】：2016-10-05 13:28:24
【问题描述】：

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

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

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

【问题讨论】：

我之前做过这个，我没有密码，但是如果你仍然没有答案，我可以在我回家时将它发送给你。
感谢@JacobKing 的快速回复，我正在等待您的答复。
@JacobKing 能否分享一下代码
@user6520705 我不再为该公司工作，所以我无法访问他们的源代码控制存储库......我可能有一个旧的本地副本，但我怀疑它，会看看什么时候我有机会。

标签： swift uiview uigesturerecognizer control-center

【解决方案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

【讨论】：