I am trying to create this collection view cells with kinda paging behavior. In every cell; I made a card flip animation. But flip function does not work. I know that function is OK because; before I create these UICollectionViewCell model, I tried everything in UICollectionView itself and it worked out perfect. But since I need paging behavior, I need multiple pages with card view inside and in every cell when user tabs the card it should flip. So, after I migrated all the code from CollectionView to CollectionViewCell; the card view stopped flipping. Even print(...) statement does not return in Xcode. So I guess Xcode doesn't sense user touch. Anyway, I am so junior so I ll be appreciated if someone solves this out. Here is the code for my collectionView:
import UIKit
class AK11ViewController: AltKategoriViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource, UICollectionViewDelegate {
var ak11cv: UICollectionView!
private let ak11CellId = "ak11CellId"
let image1Names = ["bear_first", "heart_second", "leaf_third"]
override func viewDidLoad() {
super.viewDidLoad()
background()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return image1Names.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = ak11cv.dequeueReusableCell(withReuseIdentifier: ak11CellId, for: indexPath) as! AK11PageCell
//cell.translatesAutoresizingMaskIntoConstraints = false
let image1Name = image1Names[indexPath.item]
cell.cardView1.image = UIImage(named: image1Name)
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: view.frame.width, height: view.frame.height)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
private func background() {
tabBarController?.tabBar.tintColor = UIColor.white
tabBarController?.tabBar.isTranslucent = false
navigationController?.navigationBar.prefersLargeTitles = false
navigationController?.navigationBar.isTranslucent = true
let ak11Layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
ak11Layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
ak11Layout.scrollDirection = .horizontal
ak11cv = UICollectionView(frame: self.view.frame, collectionViewLayout: ak11Layout)
ak11cv.dataSource = self
ak11cv.delegate = self
ak11cv.isPagingEnabled = true
ak11cv.isUserInteractionEnabled = true
ak11cv.backgroundColor = UIColor.brown
ak11cv.register(AK11PageCell.self, forCellWithReuseIdentifier: ak11CellId)
view.addSubview(ak11cv)
}
}
And here is the code for my collectionViewCell:
import UIKit
class AK11PageCell: UICollectionViewCell {
let mainCardView: UIView = {
let mcv = UIView()
mcv.translatesAutoresizingMaskIntoConstraints = false
mcv.isUserInteractionEnabled = true
return mcv
}()
let frontContainerView: UIView = {
let fcv = UIView()
fcv.translatesAutoresizingMaskIntoConstraints = false
fcv.backgroundColor = .blue
fcv.isUserInteractionEnabled = true
return fcv
}()
let backContainerView: UIView = {
let bcv = UIView()
bcv.translatesAutoresizingMaskIntoConstraints = false
bcv.backgroundColor = .purple
bcv.isUserInteractionEnabled = true
//bcv.isHidden = true
return bcv
}()
let pageControlContainerView: UIView = {
let pcv = UIView()
pcv.translatesAutoresizingMaskIntoConstraints = false
pcv.backgroundColor = .green
pcv.isUserInteractionEnabled = false
return pcv
}()
var cardView1: UIImageView = {
let cv1 = UIImageView()
cv1.translatesAutoresizingMaskIntoConstraints = false
cv1.contentMode = .scaleAspectFit
cv1.isUserInteractionEnabled = true
cv1.image = UIImage(named: "bear_first")
return cv1
}()
var cardView2: UIImageView = {
let cv2 = UIImageView()
cv2.translatesAutoresizingMaskIntoConstraints = false
cv2.contentMode = .scaleAspectFit
cv2.isUserInteractionEnabled = true
cv2.image = UIImage(named: "heart_second")
return cv2
}()
let flipToBack: UIButton = {
let ftb = UIButton(type: .system)
ftb.isUserInteractionEnabled = true
ftb.translatesAutoresizingMaskIntoConstraints = false
ftb.addTarget(self, action: #selector(flip), for: .touchUpInside)
return ftb
}()
let flipToFront: UIButton = {
let ftf = UIButton(type: .system)
ftf.isUserInteractionEnabled = true
ftf.translatesAutoresizingMaskIntoConstraints = false
ftf.addTarget(self, action: #selector(flip), for: .touchUpInside)
return ftf
}()
var flippedCard = false
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.cyan
setupViews()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
fileprivate func setupViews() {
addSubview(mainCardView)
mainCardView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: frame.width * 0.1).isActive = true
mainCardView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: frame.width * -0.1).isActive = true
mainCardView.topAnchor.constraint(equalTo: topAnchor, constant: frame.height * 0.05).isActive = true
mainCardView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: frame.height * -0.25).isActive = true
mainCardView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
mainCardView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
mainCardView.addSubview(frontContainerView)
frontContainerView.leadingAnchor.constraint(equalTo: mainCardView.leadingAnchor).isActive = true
frontContainerView.trailingAnchor.constraint(equalTo: mainCardView.trailingAnchor).isActive = true
frontContainerView.topAnchor.constraint(equalTo: mainCardView.topAnchor).isActive = true
frontContainerView.bottomAnchor.constraint(equalTo: mainCardView.bottomAnchor).isActive = true
frontContainerView.centerXAnchor.constraint(equalTo: mainCardView.centerXAnchor).isActive = true
frontContainerView.centerYAnchor.constraint(equalTo: mainCardView.centerYAnchor).isActive = true
mainCardView.addSubview(backContainerView)
backContainerView.leadingAnchor.constraint(equalTo: mainCardView.leadingAnchor).isActive = true
backContainerView.trailingAnchor.constraint(equalTo: mainCardView.trailingAnchor).isActive = true
backContainerView.topAnchor.constraint(equalTo: mainCardView.topAnchor).isActive = true
backContainerView.bottomAnchor.constraint(equalTo: mainCardView.bottomAnchor).isActive = true
backContainerView.centerXAnchor.constraint(equalTo: mainCardView.centerXAnchor).isActive = true
backContainerView.centerYAnchor.constraint(equalTo: mainCardView.centerYAnchor).isActive = true
frontContainerView.addSubview(cardView1)
cardView1.centerXAnchor.constraint(equalTo: frontContainerView.centerXAnchor).isActive = true
cardView1.centerYAnchor.constraint(equalTo: frontContainerView.centerYAnchor).isActive = true
cardView1.leadingAnchor.constraint(equalTo: frontContainerView.leadingAnchor).isActive = true
cardView1.trailingAnchor.constraint(equalTo: frontContainerView.trailingAnchor).isActive = true
cardView1.topAnchor.constraint(equalTo: frontContainerView.topAnchor).isActive = true
cardView1.bottomAnchor.constraint(equalTo: frontContainerView.bottomAnchor).isActive = true
frontContainerView.addSubview(flipToBack)
flipToBack.centerXAnchor.constraint(equalTo: frontContainerView.centerXAnchor).isActive = true
flipToBack.centerYAnchor.constraint(equalTo: frontContainerView.centerYAnchor).isActive = true
flipToBack.leadingAnchor.constraint(equalTo: frontContainerView.leadingAnchor).isActive = true
flipToBack.trailingAnchor.constraint(equalTo: frontContainerView.trailingAnchor).isActive = true
flipToBack.topAnchor.constraint(equalTo: frontContainerView.topAnchor).isActive = true
flipToBack.bottomAnchor.constraint(equalTo: frontContainerView.bottomAnchor).isActive = true
backContainerView.addSubview(cardView2)
cardView2.centerXAnchor.constraint(equalTo: backContainerView.centerXAnchor).isActive = true
cardView2.centerYAnchor.constraint(equalTo: backContainerView.centerYAnchor).isActive = true
cardView2.leadingAnchor.constraint(equalTo: backContainerView.leadingAnchor).isActive = true
cardView2.trailingAnchor.constraint(equalTo: backContainerView.trailingAnchor).isActive = true
cardView2.topAnchor.constraint(equalTo: backContainerView.topAnchor).isActive = true
cardView2.bottomAnchor.constraint(equalTo: backContainerView.bottomAnchor).isActive = true
backContainerView.addSubview(flipToFront)
flipToFront.centerXAnchor.constraint(equalTo: backContainerView.centerXAnchor).isActive = true
flipToFront.centerYAnchor.constraint(equalTo: backContainerView.centerYAnchor).isActive = true
flipToFront.leadingAnchor.constraint(equalTo: backContainerView.leadingAnchor).isActive = true
flipToFront.trailingAnchor.constraint(equalTo: backContainerView.trailingAnchor).isActive = true
flipToFront.topAnchor.constraint(equalTo: backContainerView.topAnchor).isActive = true
flipToFront.bottomAnchor.constraint(equalTo: backContainerView.bottomAnchor).isActive = true
addSubview(pageControlContainerView)
pageControlContainerView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
pageControlContainerView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
pageControlContainerView.bottomAnchor.constraint(equalTo: mainCardView.bottomAnchor, constant: 20).isActive = true
pageControlContainerView.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 0.075).isActive = true
}
@objc func flip() {
print("tabbed")
flippedCard = !flippedCard
let fromView = flippedCard ? backContainerView : frontContainerView
let toView = flippedCard ? frontContainerView : backContainerView
UIView.transition(from: fromView, to: toView, duration: 0.5, options: [.transitionFlipFromRight, .showHideTransitionViews])
}
}
Please ignore my data model because I did not set it yet; I just want my mainCardView, which is super view for frontCardView and backCardView, to flip. But any suggestions for other stuff are also welcomed.
Thank you!
