iOS: 使用拖拽手势移动子视图 (HeaderView) 并实现动画效果

iOS: 使用拖拽手势移动子视图 (HeaderView) 并实现动画效果

本文介绍了如何在 iOS 开发中，使用 UIPanGestureRecognizer 实现对子视图（HeaderView）的向上和向下拖拽手势操作，并使用动画使 HeaderView 视图跟随拖拽内容移动。

实现步骤

1. 创建 HeaderView 并添加拖拽手势:

   首先，在您的视图控制器中定义一个属性来持有 headerView:

   var headerView: UIView!
   

   在视图加载完成时，创建 headerView 并添加拖拽手势:

   override func viewDidLoad() {
       super.viewDidLoad()
   
       // 创建headerView并设置frame
       headerView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 100))
       headerView.backgroundColor = .red
   
       // 添加拖拽手势
       let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:))) 
       headerView.addGestureRecognizer(panGesture)
   
       // 将headerView添加到view上
       view.addSubview(headerView)
   }
   

2. 处理拖拽手势:

   在 handlePanGesture 方法中处理拖拽手势的开始、移动和结束:

   @objc func handlePanGesture(_ gesture: UIPanGestureRecognizer) {
       let translation = gesture.translation(in: view)
   
       switch gesture.state {
       case .began:
           // 拖拽开始时，保存headerView的初始位置
           headerView.transform = CGAffineTransform(translationX: 0, y: 0)
       case .changed:
           // 根据拖拽的距离移动headerView
           headerView.transform = CGAffineTransform(translationX: 0, y: translation.y)
       case .ended:
           // 停止拖拽时，根据headerView的位置决定是否将其恢复到初始位置或者移动到顶部
           if headerView.frame.origin.y < view.safeAreaInsets.top {
               // 移动headerView到顶部
               UIView.animate(withDuration: 0.3) {
                   self.headerView.transform = CGAffineTransform(translationX: 0, y: -self.headerView.frame.origin.y)
               }
           } else {
               // 将headerView恢复到初始位置
               UIView.animate(withDuration: 0.3) {
                   self.headerView.transform = CGAffineTransform(translationX: 0, y: 0)
               }
           }
       default:
           break
       }
   }
   

代码解释

• UIPanGestureRecognizer: 用于识别拖拽手势。
• translation(in:): 获取手势在指定视图中的平移距离。
• transform: 用于对视图进行平移、旋转等变换。
• UIView.animate(withDuration:): 用于创建动画效果。

总结

通过上述代码，您可以通过拖拽手势向上或向下移动 headerView，并根据 headerView 的位置决定是否将其移动到顶部或者恢复到初始位置。

希望本文能够帮助您理解如何使用拖拽手势移动子视图并实现动画效果。