Display cards in overlap using UICollectionView - Swift3 - ios

Question

I'm trying to arrange cards into UICollectionView in a overlap manner as like below,
i am using https://github.com/ra1028/RAReorderableLayout to order items into UICollectionView cell with drag drop gesture.
now the cards displays without overlap and drag drop works fine,
Mycode:
class HandController: UIViewController, RAReorderableLayoutDelegate, RAReorderableLayoutDataSource {
let game = Game.sharedInstance
#IBOutlet weak var collectionView: UICollectionView!
private var books = [CardViewButton]()
override func viewDidLoad() {
debugPrint("?? Hand300Controller ?...")
super.viewDidLoad()
collectionView.backgroundColor = UIColor.clear
title = "RAReorderableLayout"
collectionView.register(BookCell.self, forCellWithReuseIdentifier: "cell")
collectionView.delegate = self
collectionView.dataSource = self
(collectionView.collectionViewLayout as! RAReorderableLayout).scrollDirection = .horizontal
let aScalars = "A".unicodeScalars
let zScalars = "Z".unicodeScalars
let aAsciiCode = aScalars[aScalars.startIndex].value
let zAsciiCode = zScalars[zScalars.startIndex].value
//books = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14"]/*
game.deck?.shuffleRandom()
// containerForCardTable.addSubview(Game.sharedInstance.table.cardTableView)
for index in 0...12{
//print(game.deck?.cards[index].value)
game.deck?.cards[index].isFaceUp = true
books.append(((game.deck?.cards[index])?.cardView.cardViewButton)!)
}
}
// collectionView delegate datasource
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return books.count
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 60.0, height: 100.0)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsetsMake(0, 20.0, 0, 20.0)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 15
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
var cell: BookCell
cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! BookCell
//book = CardView(frame:CGRect(x: 15.0, y: 30.0, width: bounds.width - 16.0, height: 30.0),)
cell.book = CardViewButton(frame:books[(indexPath as NSIndexPath).item].frame,value:books[(indexPath as NSIndexPath).item].value,id:books[(indexPath as NSIndexPath).item].id,isFaceUp : true)
//cell.book = books[(indexPath as NSIndexPath).item]
cell.contentView.addSubview(cell.book)
return cell
}
func collectionView(_ collectionView: UICollectionView, at: IndexPath, willMoveTo toIndexPath: IndexPath) {
let temp = books[at.row]
books[at.row] = (books[toIndexPath.row])
books[toIndexPath.row] = temp
}
func collectionView(_ collectionView: UICollectionView, at: IndexPath, didMoveTo toIndexPath: IndexPath) {
// let book = books.remove(at: (toIndexPath as NSIndexPath).item)
// books.insert(book, at: (toIndexPath as NSIndexPath).item)
}
func scrollTrigerEdgeInsetsInCollectionView(_ collectionView: UICollectionView) -> UIEdgeInsets {
return UIEdgeInsetsMake(0, 50, 0, 50)
}
func scrollSpeedValueInCollectionView(_ collectionView: UICollectionView) -> CGFloat {
return 15.0
}
}
class BookCell: UICollectionViewCell {
private var backCoverView: UIView!
private var pagesView: UIView!
private var frontCoverView: UIView!
private var bindingView: UIView!
var book: CardViewButton!
/*var book: CardView? {
didSet {
titleLabel.text = book?.title
color = book?.color
}
}*/
var color: UIColor? {
didSet {
backCoverView.backgroundColor = getDarkColor(color, minusValue: 20.0)
frontCoverView.backgroundColor = color
bindingView.backgroundColor = getDarkColor(color, minusValue: 50.0)
}
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(frame: CGRect) {
super.init(frame: frame)
configure()
}
override func prepareForReuse() {
super.prepareForReuse()
// book.
}
private func configure() {
backCoverView = UIView(frame: bounds)
backCoverView.backgroundColor = getDarkColor(UIColor.white, minusValue: 20.0)
backCoverView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
pagesView = UIView(frame: CGRect(x: 15.0, y: 0, width: bounds.width - 25.0, height: bounds.height - 5.0))
pagesView.backgroundColor = UIColor.white
pagesView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
frontCoverView = UIView(frame: CGRect(x: 0, y: 0, width: bounds.width, height: bounds.height - 10.0))
frontCoverView.backgroundColor = UIColor.red
frontCoverView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
bindingView = UIView(frame: CGRect(x: 0, y: 0, width: 15.0, height: bounds.height))
bindingView.backgroundColor = getDarkColor(backCoverView?.backgroundColor, minusValue: 50.0)
bindingView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
bindingView.layer.borderWidth = 1.0
bindingView.layer.borderColor = UIColor.black.cgColor
}
private func getDarkColor(_ color: UIColor?, minusValue: CGFloat) -> UIColor? {
if color == nil {
return nil
}
var r: CGFloat = 0
var g: CGFloat = 0
var b: CGFloat = 0
var a: CGFloat = 0
color!.getRed(&r, green: &g, blue: &b, alpha: &a)
r -= max(minusValue / 255.0, 0)
g -= max(minusValue / 255.0, 0)
b -= max(minusValue / 255.0, 0)
return UIColor(red: r, green: g, blue: b, alpha: a)
}
}
How to arrange the cards in overlap display and drag drop work for overlap design