Question

我在ViewController中有一个collectionView。当我滑动时，它会滑动到另一个Collection View Cell，它是view.frame的高度和宽度

我希望每当我开始滑动时都会启动动画，然后只要集合视图锁定到单元格的中心就会完成，就像下面的gif一样。我的代码中没有标签或文本视图，但您能指出我如何做到这一点的正确方向吗？这是我的相关代码：

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

lazy var collectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    layout.minimumLineSpacing = 0
    let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
    cv.backgroundColor = .white
    cv.dataSource = self
    cv.delegate = self
    cv.isPagingEnabled = true
    cv.showsHorizontalScrollIndicator = false
    return cv
}()

let cellId = "cellId"
let loginCellId = "loginCellId"

let pages: [Page] = {
    let firstPage = Page(imageName: "introduction_1")
    let secondPage = Page(imageName: "introduction_2")
    let thirdPage = Page(imageName: "introduction_3")
    let fourthPage = Page(imageName: "introduction_4")
    return [firstPage, secondPage, thirdPage, fourthPage]
}()

lazy var  pageControl: UIPageControl = {
    let pc = UIPageControl()
    pc.pageIndicatorTintColor = .lightGray
    pc.currentPageIndicatorTintColor = .darkGray
    pc.numberOfPages = self.pages.count + 1
    return pc
}()

override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(collectionView)
    view.addSubview(pageControl)

    _ = pageControl.anchor(nil, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 40)

    collectionView.anchorToTop(view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor)

    registerCells()
}

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

    let pageNumber = Int(targetContentOffset.pointee.x / view.frame.width)
    pageControl.currentPage = pageNumber
}

fileprivate func registerCells() {
    collectionView.register(PageCell.self, forCellWithReuseIdentifier: cellId)
    collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: loginCellId)

}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return pages.count + 1
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    if indexPath.item == pages.count {
        let loginCell = collectionView.dequeueReusableCell(withReuseIdentifier: loginCellId, for: indexPath)
        return loginCell
    }

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! PageCell

    let page = pages[indexPath.item]
    cell.page = page

    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: view.frame.width, height: view.frame.height)
}

}

class PageCell: UICollectionViewCell {

var page: Page? {
    didSet {
        guard let page = page else {
            return
        }
        imageView.image = UIImage(named: page.imageName)
    }
}

override init(frame: CGRect) {
    super.init(frame: frame)

    setupViews()
}

let imageView: UIImageView = {
    let iv = UIImageView()
    iv.contentMode = .scaleAspectFill
    iv.backgroundColor = .yellow
    iv.clipsToBounds = true
    return iv
}()

func setupViews() {

    addSubview(imageView)

    imageView.anchorToTop(topAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor)
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

}

Answer 1

从我的观点来看，在你的情况下，最好使用UIPageViewController而不是UICollectionView。它有很多功能可供您实现上面显示的UI。关于这个主题有一个很好的教程 - https://www.veasoftware.com/posts/uipageviewcontroller-in-swift-xcode-62-ios-82-tutorial?rq=page

滑动集合视图时如何设置动画

1 个答案: