Как сделать так, чтобы эффект UIScroll был похож на эффект в приложении AirBNB для iOS, как на картинке ниже

Question

Мне нужно иметь возможность применить эффект прокрутки, аналогичный тому, который можно найти в iOS AirBNB, где при прокрутке выделяется изображение ячейки представления коллекции пользовательского интерфейса.

У меня не получается прокрутка и остановка и выделение одной ячейки.

iOS AirBNB App Collection Просмотр прокрутки

Что я сделал до сих пор:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let itemsPerRow:CGFloat = 2.3
    let hardCodedPadding:CGFloat = 15
    let itemWidth = (collectionView.bounds.width / itemsPerRow) - hardCodedPadding
    let itemHeight = collectionView.bounds.height - (2 * hardCodedPadding)
    return CGSize(width: itemWidth, height: itemHeight)
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    let indexPath = IndexPath(row: collectionView.indexPathsForVisibleItems[0].row, section: 0)

    collectionView.scrollToItem(at: indexPath, at: UICollectionViewScrollPosition.left, animated: true)
    (collectionView.cellForItem(at: indexPath) as! productImageCell).productImage.layer.borderWidth = 5

}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    let cellWidth = (collectionView.bounds.width / 3)
    return UIEdgeInsetsMake(0, 5 , 0, cellWidth/3)
}

Answer 1

Первое, что вам нужно сделать, это использовать UICollectionViewDelegate, UICollectionViewDataSource а также UICollectionViewDelegateFlowLayoutВы также должны создать некоторые важные переменные

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    // Used to calculate the position after the user end dragging
    var cellWidth: CGFloat? 

    // Used to set the layout for the collectionView
    var layout: UICollectionViewFlowLayout? 

    // The collection view
    var collectionView: UICollectionView?
}

Затем вы создадите экземпляр макета и представления коллекции, установите некоторые параметры, добавите представление коллекции в представление и, наконец, зарегистрируете наш класс ячеек. Это можно сделать в вашем viewDidLoad() метод:

override func viewDidLoad() {
    super.viewDidLoad()

    // You can change the width of the cell for whatever you want
    cellWidth = view.frame.width*0.5

    // instantiate the layout, set it to horizontal and the minimum line spacing
    layout = UICollectionViewFlowLayout()
    layout?.scrollDirection = .horizontal
    layout?.minimumLineSpacing = 0 // You can also set to whatever you want

    let cv = UICollectionView(frame: self.view.frame, collectionViewLayout: layout!)
    cv.backgroundColor = .green
    cv.delegate = self
    cv.dataSource = self
    collectionView = cv
    collectionView?.allowsSelection = true

    guard let collectionView = collectionView else {
        return
    }

    // Add to subview
    view.addSubview(collectionView)

    // Set auto layout constraints
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    collectionView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
    collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    collectionView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true

    // Register cell class
    collectionView.register(MyCollectionViewCell.self, forCellWithReuseIdentifier: "cell")

}

Последнее, что нужно сделать в вашем ViewController выбрать правильную ячейку после перетаскивания пользователя, вы собираетесь использовать scrollViewWillEndDragging(...) метод для этого:

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    guard let cellWidth = cellWidth else {
        return
    }

    var cellNumber = 0
    let offsetByCell = targetContentOffset.pointee.x/cellWidth

    // If the user drag just a little, the scroll view will go to the next cell
    if offsetByCell > offsetByCell + 0.2 {
        cellNumber = Int(ceilf(Float(offsetByCell)))
    } else {
        cellNumber = Int(floorf(Float(offsetByCell)))
    }

    // Avoiding index out of range exception
    if cellNumber < 0 {
        cellNumber = 0
    }

    // Avoiding index out of range exception
    if cellNumber >= (collectionView?.numberOfItems(inSection: 0))! {
        cellNumber = (collectionView?.numberOfItems(inSection: 0))! - 1
    }

    // Move to the right position by using the cell width, cell number and considering the minimum line spacing between cells
    targetContentOffset.pointee.x = cellWidth * CGFloat(cellNumber) + (CGFloat(cellNumber) * (layout?.minimumLineSpacing)!)

    // Scroll and select the correct item
    let indexPath = IndexPath(item: cellNumber, section: 0)
    collectionView?.scrollToItem(at: indexPath, at: .left, animated: true)
    collectionView?.selectItem(at: indexPath, animated: true, scrollPosition: .left)
}

Это все, что вы должны установить в вашем контроллере представления.

Наконец, последнее, что вы должны сделать в своем коде, - это перейти в свою пользовательскую ячейку (в моем случае MyCollectionViewCell) и добавить наблюдателя к selected Свойство, в моем классе я просто изменяю цвет фона выбранной ячейки, но вы можете поместить любую логику, которую вы хотите:

import UIKit

class MyCollectionViewCell: UICollectionViewCell {

    override var isSelected: Bool {
        didSet {
            backgroundColor = isSelected ? UIColor.blue : UIColor.white
        }
    }

    override init (frame: CGRect){
        super.init(frame: frame)
        backgroundColor = .white

    }

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

}

Надеюсь, это поможет вам достичь того, что вам нужно.