Question

我到处寻找答案，但找不到答案。我正在创建一个应用程序，该应用程序具有一个使用按钮和动画从左侧弹出的菜单。菜单本身是一个集合视图。当前，当按下菜单按钮时，整个集合视图将从左侧弹出。我想做同样的事情，但是我希望集合视图响应从左到右的滑动。请记住，我不希望移动集合视图内部的单个内容，而希望集合视图本身作为一个整体菜单。我将如何去做呢？

Answer 1

晚上好！

如果我正确理解您的问题。您只需要一个按钮即可用来为UICollectionView的幻灯片动画化。这是我会做的：

创建一个新的集合视图类：（如果您希望collectionView具有不同的帧大小，请记住在两个动画以及showSlideCollectionView的初始设置中都对其进行更改

import UIKit

class CollectionViewLauncher : NSObject {

lazy var collectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
    cv.backgroundColor = UIColor.white
    return cv
}()

// reuseidentifier for the cells in the collectionview
let cellId = "cellId"

var viewController: UIViewController?

func showSlideCollectionView() {

    if let window = UIApplication.shared.keyWindow {

        window.addSubview(collectionView)

        let width: CGFloat = window.frame.width * 0.55

        //this is the original frame for the collectionview (so it is off screen by default)
        collectionView.frame = CGRect(x: -window.frame.width, y: 0, width: width, height: window.frame.height)

        //this animates the collectionview on screen
        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseInOut, animations: {

            self.collectionView.frame = CGRect(x: 0, y: 0, width: width, height: window.frame.height)

        }, completion: nil)

    }
}

func hideSlideCollectionView() {
    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseInOut, animations: {
        //sliding the collectionview off screen
        if let window = UIApplication.shared.keyWindow {
            self.collectionView.frame = CGRect(x: window.frame.width, y: 0, width: self.collectionView.frame.width, height: self.collectionView.frame.height)
        }
    }, completion: nil)
}

override init() {
    super.init()
    collectionView.dataSource = self
    collectionView.delegate = self

    //register your own cell class type here. The code wont work unless you create a cell class of type UICollectionViewCell and customise it there and then register the cell here. (you can also create a nib file and register that.
    collectionView.register(YourCell.self, forCellWithReuseIdentifier: cellId)


    }
}

extension CollectionViewLauncher: UICollectionViewDataSource, UICollectionViewDelegate {

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 3
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! YourCell //your cell class

        //setup what you need in the cells
        return cell
  }

      //add additional UICollectionView Data source methods if you need further customisation of the collectionview.
}

在overrode init()内的CollectionViewLauncher方法中注册单元格类。

在您的ViewController中执行以下操作。

   lazy var collectionViewLauncher : CollectionViewLauncher = {
        let launcher = CollectionViewLauncher()
        launcher.viewController = self
        return launcher
   }()

       //in your button action you call the following to animate the collection view to appear. 
       collectionViewLauncher.showSlideCollectionView()

       //when you want it to dissapear call the following to animate it away (perhaps in a UITapGestureRecognizer or something).
       collectionViewLauncher.hideSlideCollectionView()

   //example button action
   @objc func yourButtonsAction(sender: UIButton) {
       collectionViewLauncher.showSlideCollectionView()
   }

编辑：

如果您有需要从视图控制器传递到此集合视图的数据，我建议直接在与视图控制器相同的类中实现它。（只需做完全相同的事情，但将内容放到viewDidLoad的init()方法中，其余的放到ViewController类中。）

如果希望使用拖动手势使其可滑动。您应该在此处的编辑中使用该方法，然后使用平移手势来移动它，而不是使用show / hideSlideCollectionView方法。

我希望这会有所帮助。

使集合视图快速滚动出侧边菜单

1 个答案: