CODEWITHSUNDEEP
iosswiftcarousel
Uffo
Uffo

Reputation: 10046

Swift Carousel with collection views POD

So I'm trying to achieve something like this:

enter image description here

A carousel where I can swipe left and right, but I'm not sure how can I achieve this, I have a collection view all setup with horizontal scroll right now.

Is there any other way to do it? Is there a POD or something that I can use? it doesn't need to use collection views I just tested using this.

Any help will be appreciated

Upvotes: 2

Views: 3212

Answers (3)

玉垒浮云
玉垒浮云

Reputation: 1

Using CardCarousel, you can easily achieve this effect. CardCarousel is a carousel component that I wrote. Example:

import CardCarousel
import SwiftUI

struct SwiftUIView: View {
    @State var data = [...]

    var body: some View {
        CardCarouselView(data)
            .cardLayoutSize(widthDimension: .fractionalWidth(0.7), heightDimension: .fractionalHeight(0.7))
            .cardTransformMode(.liner(minimumScale: 0.9))
            .cardCornerRadius(10)
            .frame(height: 600)
    }
}

picture

Upvotes: 0

Chris Comas
Chris Comas

Reputation: 216

A great pod that I've used is called "CollectionViewPagingLayout" it's very simple

  1. install the pod here (https://github.com/amirdew/CollectionViewPagingLayout#installation)
  2. create a custom cell class. Import CollectionViewPagingLayout and conform to transformable view. Then conform to the protocol stub (transform) and customize the carousel however you want like so:
import UIKit
import CollectionViewPagingLayout

class MyCustomCell: UICollectionViewCell, TransformableView {

  func transform(progress: CGFloat) {
     //customize it however you want
  }
}
  1. if you don't want to customize your own you can use 3 of the pre-set options he offers. Just change "TransformableView" to either "StackTransformView", "SnaphotTransformView", or "ScaleTransformView". Then replace the transform func with one of his pre-set variables like so:
import UIKit
import CollectionViewPagingLayout

class MyCustomCell: UICollectionViewCell, ScaleTransformView {

    var scaleOptions = ScaleTransformViewOptions(
        minScale: 0.6,
        scaleRatio: 0.4,
        translationRatio: CGPoint(x: 0.66, y: 0.2),
        maxTranslationRatio: CGPoint(x: 2, y: 0),
    )
}
  1. Now go to your ViewController (with the collectionView) and import collectionViewpaginglayout. Then create a layout constant that conforms to the CollectionViewPagingLayout. Finally, under view did load, connect your collectionView to the layout class like so:
import UIKit
import CollectionViewPagingLayout

class viewController: UIViewController {

//Outlets
@IBOutlet var myCollectionView: UICollectionView!

//Variables
let layout = CollectionViewPagingLayout()

//View did load
override func viewDidLoad() {
        super.viewDidLoad()
     //collectionViewPagingLayout setup
      layout.delegate = self
      myCollectionView.collectionViewLayout = layout
      myCollectionView.isPagingEnabled = true
}

}
  1. Set up your collectionView how you normally do with the delegates and such. And you're all set. You can use the layout delegate method it offers to do things like change the page or count which number page you are in. like so:
extension ViewController: CollectionViewPagingLayoutDelegate {
    
    func onCurrentPageChanged(layout: CollectionViewPagingLayout, currentPage: Int) {
       print(currentPage)
    }
}
  • Note 1 - when setting up your custom collectionView cell (in storyboard or nib), add the constrains as center horizontally in container and center vertically in container or else it won't show the 2 other cells peeking.
  • Note 2 - You can set the number of visible items to an int so that it doesn't load all the cells at once (this is better explained in the github page). ex: layout.numberOfVisibleItems = 3 you would put this within viewdidload()

Upvotes: 5

Manikanta Adimulam
Manikanta Adimulam

Reputation: 25

In Swift 3.

extension UICollectionView {

var centerPoint : CGPoint {

    get {

        return CGPoint(x: self.center.x + self.contentOffset.x, y: self.center.y + self.contentOffset.y);
    }
}

var centerCellIndexPath: IndexPath? {

    if let centerIndexPath = self.indexPathForItem(at: self.centerPoint) {

        return centerIndexPath
    }

    return nil
 }
}

To make Curosel with Item cells:

func curosel() {

    if myCollectionView.centerCellIndexPath != nil {

        var index = (myCollectionView.centerCellIndexPath?.row)!

        if  myCollectionView.centerCellIndexPath! == IndexPath(item: 0, section: 0) {

            myCollectionView.cellForItem(at: myCollectionView.centerCellIndexPath!)?.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)

            index += 1

            myCollectionView.cellForItem(at: IndexPath(item: index, section: 0))?.transform = CGAffineTransform.identity

        } else {

            myCollectionView.cellForItem(at: myCollectionView.centerCellIndexPath!)?.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
            index -= 1
            myCollectionView.cellForItem(at: IndexPath(item: index, section: 0))?.transform = CGAffineTransform.identity
            index += 2
            myCollectionView.cellForItem(at: IndexPath(item: index, section: 0))?.transform = CGAffineTransform.identity
        }
        myCollectionView.scrollToItem(at:IndexPath(item: index-1, section: 0), at: .centeredHorizontally, animated: true)
     }
  }
}

Upvotes: 1

Related Questions