Carousel Effect

Carousel Effect

• 회전목마를 뜻하고 슬라이드 형태로 슬라이드되어 보여지는 UI

CollectionView를 이용한 Carousel Zoom Paging효과

 

 

CollectionView cell에 마진이 있기때문에 scrollViewWillEndDragging Delegate를 사용하여 페이징 처리

(cell의 width와 cell사이 간격을 포함한offset에 collectionView의 Inset을 뺀만큼 스크롤)

 

// CollectionView cell scroll
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity:CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    guard let layout = self.collectionView.collectionViewLayout as?UICollectionViewFlowLayout else { return }
    let cellWidthIncludingSpacing = layout.itemSize.width + layout.minimumLineSpacing
    var offset = targetContentOffset.pointee
    let index = (offset.x + scrollView.contentInset.left) / cellWidthIncludingSpacing
    let roundedIndex = round(index)
    offset = CGPoint(x: roundedIndex * cellWidthIncludingSpacing - scrollView.contentInset.left,
                        y: scrollView.contentInset.top)
    targetContentOffset.pointee = offset
}

 

 

scrollViewDidScroll을 이용한 zoom효과 적용

 

// scroll For cell Zooming
func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard let layout = self.collectionView.collectionViewLayout as?UICollectionViewFlowLayout else { return }
    let cellWidthIncludeSpacing = layout.itemSize.width + layout.minimumLineSpacing
    let offsetX = collectionView.contentOffset.x
    let index = (offsetX + collectionView.contentInset.left) / cellWidthIncludeSpacing
    let roundedIndex = round(index)
    let indexPath = IndexPath(item: Int(roundedIndex), section: 0)
    if let cell = collectionView.cellForItem(at: indexPath) {
        zoomFocusCell(cell: cell, isFocus: true)
    }
    if Int(roundedIndex) != previousCellIndex {
        let preIndexPath = IndexPath(item: previousCellIndex, section: 0)
        if let preCell = collectionView.cellForItem(at: preIndexPath) {
            zoomFocusCell(cell: preCell, isFocus: false)
        }
        previousCellIndex = indexPath.item
    }
}

 

cell transform을 이용한 zoom effect

 

// Cell Zoom In, Out
private func zoomFocusCell(cell: UICollectionViewCell, isFocus: Bool ) {
     UIView.animate( withDuration: 0.2, delay: 0, options: .curveEaseOut, animations: {
         if isFocus {
             cell.transform = .identity
         } else {
             cell.transform = CGAffineTransform(scaleX: 0.5, y: 0.5)
         }
     }, completion: nil)
 }

 

참고 : https://nsios.tistory.com/45