Shuffle iOS Library

You can create an 'infinite' scrolling effect by fetching new models from a network utility and appending them to both your data source and the SwipeCardStack.

When using appendCards(atIndices:), you must calculate the range of new indices based on the previous count of your data source.

To add cards to the top of the stack instead of the bottom, you should insert models into the beginning of your data source and use insertCard(atIndex: 0, position: 0) for each model (ideally in reverse order so the first model in the batch becomes the topmost card).

// Example: Appending new models to the bottom of the stack
private func addCards() {
  NetworkUtility.fetchNewCardModels { [weak self] newModels in
    guard let strongSelf = self else { return }
      
    let oldModelsCount = strongSelf.cardModels.count
    let newModelsCount = oldModelsCount + newModels.count
      
    DispatchQueue.main.async {
      strongSelf.cardModels.append(contentsOf: newModels)
        
      let newIndices = Array(oldModelsCount..<newModelsCount)
      strongSelf.cardStack.appendCards(atIndices: newIndices)
    }
  }
}

To use Shuffle, follow these three steps:

1. Create a SwipeCard: Subclass SwipeCard or configure an instance. You can set swipeDirections, assign a content view, and set direction-specific overlays.
2. Setup SwipeCardStack: Add a SwipeCardStack instance to your view hierarchy and set its frame.
3. Provide Data: Conform to SwipeCardStackDataSource to provide cards via cardStack(_:cardForIndexAt:) and return the total count via numberOfCards(in:).

// 1. Create a card
func card(fromImage image: UIImage) -> SwipeCard {
  let card = SwipeCard()
  card.swipeDirections = [.left, .right]
  card.content = UIImageView(image: image)
  
  let leftOverlay = UIView()
  leftOverlay.backgroundColor = .green
  
  let rightOverlay = UIView()
  rightOverlay.backgroundColor = .red
  
  card.setOverlays([.left: leftOverlay, .right: rightOverlay])
  
  return card
}

// 2. Setup the stack in a ViewController
class ViewController: UIViewController, SwipeCardStackDataSource {
  let cardStack = SwipeCardStack()
  let cardImages = [UIImage(named: "img1")!, UIImage(named: "img2")!]

  override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(cardStack)
    cardStack.frame = view.safeAreaLayoutGuide.layoutFrame
    cardStack.dataSource = self
  }

  // 3. Implement DataSource
  func cardStack(_ cardStack: SwipeCardStack, cardForIndexAt index: Int) -> SwipeCard {
    return card(fromImage: cardImages[index])
  }

  func numberOfCards(in cardStack: SwipeCardStack) -> Int {
    return cardImages.count
  }
}

To update a SwipeCardStack dynamically (e.g., when fetching new data from an API), use the following methods on SwipeCardStack.

Insertion Methods

• insertCard(atIndex: Int, position: Int): Inserts a single card.
  • index: The index of the card/model in your underlying data source.
  • position: The visual position in the stack. This is dynamic and depends on how many cards remain in the stack. To ensure accuracy, calculate this using the numberOfRemainingCards() method.
• appendCards(atIndices: [Int]): Appends multiple cards to the bottom of the stack. The indices refer to the indices in your data source.

Deletion Methods

• deleteCards(atIndices: [Int]): Deletes cards based on their index in the data source.
• deleteCards(atPositions: [Int]): Deletes cards based on their current visual position in the stack.

// Insertion
func insertCard(atIndex index: Int, position: Int)
func appendCards(atIndices indices: [Int])

// Deletion
func deleteCards(atIndices indices: [Int])
func deleteCards(atPositions positions: [Int])