UICollectionView горизонтальный макет подкачки

Question

Хы, я пытаюсь достичь этого элемента пользовательского интерфейса, который кажется (мне) как горизонтальный UIPickerView. Вот пример GIF-файла при создании памятки на iOS:

Пример GIF

Я пытался сделать это с помощью UICollectionView и пользовательского UICollectionViewFlowLayout. Но без особой удачи.

То, что я до сих пор пробовал, использует

func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint

Чтобы остановить прокрутку в каждой ячейке, придавая ей ощущение подкачки. Но для того, чтобы сделать это, я на самом деле должен сделать

var collectionViewContentSize: CGSize

Возвращает намного больший размер контента, чем он есть на самом деле, иначе он просто отскочит collectionView и ничего не встанет на место, независимо от того, что я возвратил в предыдущей функции.

Я также пытался использовать

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

Чтобы установить collectionView.contentOffset, но это вызывало странные скачки в анимации, и опять-таки это не изменило это должным образом. Помимо постраничного разбиения на ячейку, я хотел бы добиться того, что для этого элемента пользовательского интерфейса, небольшой хаптической обратной связи на каждом свитке при прохождении через элементы и постепенного появления и исчезновения левого и правого элементов на границе. Если кто-нибудь может указать мне правильное направление, может быть, UICollectionView - это не тот путь? Я был бы очень признателен. Спасибо

Answer 1

Мне удалось добиться этого с помощью пользовательского UICollectionViewFlowLayout

final class PaginatedCollectionViewFlow: UICollectionViewFlowLayout {

    /* Distance from the midle to the other side of the screen */
    var availableDistance: CGFloat = 0.0


    var midX: CGFloat = 0
    var lastElementIndex = 0

    let maxAngle = CGFloat(-60.0.degree2Rad)

    override func prepare () {
        minimumInteritemSpacing = 40.0
        scrollDirection = .horizontal
    }

    /* This should be cached */
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard
            let layoutAttributes = super.layoutAttributesForElements(in: rect),
            let cv = collectionView else { return nil }

        /* Size of the collectionView */
        let visibleRect = CGRect(origin: cv.contentOffset, size: cv.bounds.size)

        let attributes: [UICollectionViewLayoutAttributes] = layoutAttributes.compactMap { attribute in
            guard let copy = attribute.copy() as? UICollectionViewLayoutAttributes else { return nil }

            /* Distance from the middle of the screen to the middle of the cell attributes */
            let distance = visibleRect.midX - attribute.center.x

            /* Normalize the distance between [0, 1] */
            let normalizedDistance = abs(distance / availableDistance)

            /* Rotate the cell and apply alpha accordingly to the maximum distance from the center */
            copy.alpha = 1.0 - normalizedDistance
            copy.transform3D = CATransform3DMakeRotation(maxAngle * normalizedDistance, 0, 1, 0)

            return copy
        }

        return attributes
    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

Убедитесь, что после добавления UICollectionView установлены параметры UICollectionViewFlowLayout:

guard let flow = collectionView.collectionViewLayout as? PaginatedCollectionViewFlow else { return }

       /* Distance from the middle to the other side of the screen */
       flow.availableDistance = floor(view.bounds.width / 2.0)

       /* Middle of the screen */
       flow.midX = ceil(view.bounds.midX)

       /* Index of the last element in the collectionView */
       flow.lastElementIndex = vm.numberOfItems - 1

       /* Left and Right Insets */
       flow.sectionInset.left = flow.midX - 30.0
       flow.sectionInset.right = flow.midX - 30.0

И, наконец, послев соответствии с UICollectionViewDelegate для получения UIScrollView методов делегата:

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    scrollToPosition(scrollView: scrollView)
}

func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    guard !decelerate else { return }

    scrollToPosition(scrollView: scrollView)
}

internal func scrollToPosition(scrollView: UIScrollView) {
    guard let ip = indexPathForCenterCell else { return }

    scrollToIndex(ip.row, animated: true)
}

internal func scrollToIndex(_ index: Int, animated: Bool) {
    let ip = IndexPath(item: index, section: 0)

    guard let attributes = collectionView.layoutAttributesForItem(at: ip) else { return }

    let halfWidth = collectionView.frame.width / CGFloat(2.0)
    let offset = CGPoint(x: attributes.frame.midX - halfWidth, y: 0)

    collectionView.setContentOffset(offset, animated: animated)

    guard let cell = collectionView.cellForItem(at: ip) else { return }

    feedbackGenerator.selectionChanged()
    cell.isHighlighted = true
    collectionView.visibleCells.filter { $0 != cell }.forEach { $0.isHighlighted = false }
}

internal var indexPathForCenterCell: IndexPath? {
    let point = collectionView.convert(collectionView.center, from: collectionView.superview)

    guard let indexPath = collectionView.indexPathForItem(at: point) else { return collectionView.indexPathsForVisibleItems.first }

    return indexPath
}

/* Gets the CGSize based of a maximum size available for the provided String */
func sizeFor(text: String) -> CGSize {
    guard let font = UIFont(font: .sanFranciscoSemiBold, size: 15.0) else { return .zero }

    let textNS = text as NSString
    let maxSize = CGSize(width: collectionView.frame.width / 2, height: collectionView.frame.height)
    let frame = textNS.boundingRect(with: maxSize, options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font : font], context: nil)

    return frame.size
}

Это обеспечивало разбиение на страницы UICollectionViewCells, одновременно «привязывая» его к ближайшей ячейке, а также используя UISelectionFeedbackGenerator для генерации тактильной обратной связи.Надеюсь, это поможет кому-то с той же проблемой, с которой я столкнулся.