UICollectionView with a custom data Structure - ios

Question

I am trying to create a collection view similar to Apple's shortcuts app. I was able to create the cells themselves but I am having a hard time create an individual data cell (if that makes sense). My goal is to have each cell display a title, subtitle, and possible a play button.
Right now, I am having a hard time figuring out where I am going wrong with my constraints or possible my data structure (its crashing on the background and the text isn't showing on the colored cell).
struct customData {
var title: String
var subtitle: String
}
class ViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
//Mark : All Cards
fileprivate let data = [
customData (title: "iOS", subtitle: "12 Tips"),
customData (title: "iPadOS", subtitle: "11 Tips"),
customData (title: "macOS", subtitle: "10 Tips"),
customData (title: "tvOS", subtitle: "19 Tips"),
customData (title: "watchOS", subtitle: "18 Tips"),
customData (title: "Accessories", subtitle: "17 Tips"),
]
//MARK : Properites
let cellId = "Cell"
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
setupCollectionView()
setupNavigationBarController()
}
//MARK : Setup Methods
fileprivate func setupNavigationBarController() {
self.navigationController?.navigationBar.shadowImage = UIImage()
navigationItem.title = "Lists"
if #available(iOS 13.0, *) {
self.navigationController?.navigationBar.prefersLargeTitles = true
}
}
fileprivate func setupCollectionView() {
collectionView?.backgroundColor = .red
collectionView.register(customCell.self, forCellWithReuseIdentifier: cellId)
collectionView.alwaysBounceVertical = true
}
//MARK : CollectionView Delegate Methods
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// 6
return data.count
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! customCell
cell.data = self.data[indexPath.item]
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: (view.frame.width / 2) - 20, height: 110)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
}
}
class customCell: UICollectionViewCell {
var data: customData? {
didSet {
guard let data = data else { return }
listName.text = data.title
subName.text = data.subtitle
}
}
fileprivate let listName: UILabel = {
let iv = UILabel ()
iv.textColor = .white
iv.font = UIFont(name: "Times" , size: 12)
return iv
}()
fileprivate let subName: UILabel = {
let iv = UILabel ()
return iv
}()
override init(frame: CGRect) {
super.init(frame: frame)
setupCell()
contentView.addSubview(listName)
listName.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
listName.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 30).isActive = true
listName.widthAnchor.constraint(equalTo: contentView.widthAnchor, constant: 12).isActive = true
listName.heightAnchor.constraint(equalTo: contentView.heightAnchor, constant: 80).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: Setup Cell
fileprivate func setupCell() {
roundCorner()
gradientBackgroundColor()
setCellShadow()
}
// MARK: Methods
func setCellShadow() {
self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 1)
self.layer.shadowOpacity = 0.2
self.layer.shadowRadius = 1.0
self.layer.masksToBounds = false
self.layer.cornerRadius = 3
self.clipsToBounds = false
}
func cellRandomBackgroundColors() -> [UIColor] {
//Colors
let red = [#colorLiteral(red: 0.9654200673, green: 0.1590853035, blue: 0.2688751221, alpha: 1),#colorLiteral(red: 0.7559037805, green: 0.1139892414, blue: 0.1577021778, alpha: 1)]
let orangeRed = [#colorLiteral(red: 0.9338900447, green: 0.4315618277, blue: 0.2564975619, alpha: 1),#colorLiteral(red: 0.8518816233, green: 0.1738803983, blue: 0.01849062555, alpha: 1)]
let orange = [#colorLiteral(red: 0.9953531623, green: 0.54947716, blue: 0.1281470656, alpha: 1),#colorLiteral(red: 0.9409626126, green: 0.7209432721, blue: 0.1315650344, alpha: 1)]
let yellow = [#colorLiteral(red: 0.9409626126, green: 0.7209432721, blue: 0.1315650344, alpha: 1),#colorLiteral(red: 0.8931249976, green: 0.5340107679, blue: 0.08877573162, alpha: 1)]
let green = [#colorLiteral(red: 0.3796315193, green: 0.7958304286, blue: 0.2592983842, alpha: 1),#colorLiteral(red: 0.2060100436, green: 0.6006633639, blue: 0.09944178909, alpha: 1)]
let greenBlue = [#colorLiteral(red: 0.2761503458, green: 0.824685812, blue: 0.7065336704, alpha: 1),#colorLiteral(red: 0, green: 0.6422213912, blue: 0.568986237, alpha: 1)]
let kindaBlue = [#colorLiteral(red: 0.2494148612, green: 0.8105323911, blue: 0.8425348401, alpha: 1),#colorLiteral(red: 0, green: 0.6073564887, blue: 0.7661359906, alpha: 1)]
let skyBlue = [#colorLiteral(red: 0.3045541644, green: 0.6749247313, blue: 0.9517192245, alpha: 1),#colorLiteral(red: 0.008423916064, green: 0.4699558616, blue: 0.882807076, alpha: 1)]
let blue = [#colorLiteral(red: 0.1774400771, green: 0.466574192, blue: 0.8732826114, alpha: 1),#colorLiteral(red: 0.00491155684, green: 0.287129879, blue: 0.7411141396, alpha: 1)]
let bluePurple = [#colorLiteral(red: 0.4613699913, green: 0.3118675947, blue: 0.8906354308, alpha: 1),#colorLiteral(red: 0.3018293083, green: 0.1458326578, blue: 0.7334778905, alpha: 1)]
let purple = [#colorLiteral(red: 0.7080290914, green: 0.3073516488, blue: 0.8653779626, alpha: 1),#colorLiteral(red: 0.5031493902, green: 0.1100070402, blue: 0.6790940762, alpha: 1)]
let pink = [#colorLiteral(red: 0.9495453238, green: 0.4185881019, blue: 0.6859942079, alpha: 1),#colorLiteral(red: 0.8123683333, green: 0.1657164991, blue: 0.5003474355, alpha: 1)]
let colorsTable: [Int: [UIColor]] = [0: red, 1: orangeRed, 2: orange, 3: yellow, 4: green, 5: greenBlue, 6: kindaBlue, 7: skyBlue, 8: blue, 9: bluePurple, 10: bluePurple, 11: purple, 12: pink]
let randomColors = colorsTable.values.randomElement()
return randomColors!
}
func gradientBackgroundColor() {
let colors = cellRandomBackgroundColors()
self.contentView.setGradientBackgroundColor(colorOne: colors[0], colorTow: colors[1])
}
func roundCorner() {
self.contentView.layer.cornerRadius = 12.0
self.contentView.layer.masksToBounds = true
self.contentView.layer.borderWidth = 1.0
self.contentView.layer.borderColor = UIColor.clear.cgColor
}
}
This is what I see:

Answer 1

To fix the warnings that say constraint cannot be satisfied you should set translatesAutoresizingMaskIntoConstraints of listName to false.
override init(frame: CGRect) {
super.init(frame: frame)
setupCell()
contentView.addSubview(listName)
listName.translatesAutoresizingMaskIntoConstraints = false // Add this
listName.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
listName.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 30).isActive = true
listName.widthAnchor.constraint(equalTo: contentView.widthAnchor, constant: 12).isActive = true
listName.heightAnchor.constraint(equalTo: contentView.heightAnchor, constant: 80).isActive = true
}