App Row Cells
AppStore JSON APIs
In this lesson, we'll go ahead and design the subview components that will represent each cell in our main Apps page. Furthermore, you will be able to see how to customize each item to have its own custom look and feel. Along the way, we'll integrate some more extension initializers to speed up development.

Comments (6)
TWei
4 years ago
never thought StackView could be this powerful, xiexie huangzong.
Ally Makongo
4 years ago
Stackview hands-down!!
Nebojsa Nadj
4 years ago
I can't see my nameLabel and companyLabel, can you please explain me why i cant see it. Only what i see is imageView and getButton, one on left, and another on right. if i do not implement VerticalStackView i see both of them. But if i implement VerticalStackView inside of another stackView, i dont see it. they go blank. Can you please help. Also your tutorials are helpful :) class AppRowCell: UICollectionViewCell { var imageView: UIImageView! var nameLabel: UILabel! var companyLabel: UILabel! var getButton: UIButton! override init(frame: CGRect) { super.init(frame: frame) backgroundColor = .white setup() AppRowStackView() } fileprivate func setup() { imageView = UIImageView(cornerRadius: 8) imageView.backgroundColor = .yellow imageView.constrainWidth(constant: 64) imageView.constrainHeight(constant: 64) addSubview(imageView) nameLabel = UILabel(text: "App Name", font: .systemFont(ofSize: 20)) addSubview(nameLabel) companyLabel = UILabel(text: "Company Name", font: .systemFont(ofSize: 13)) addSubview(companyLabel) getButton = UIButton(title: "GET") getButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 16) getButton.backgroundColor = UIColor(white: 0.95, alpha: 1) getButton.constrainWidth(constant: 80) getButton.constrainHeight(constant: 32) getButton.layer.cornerRadius = 32 / 2 addSubview(getButton) } fileprivate func AppRowStackView() { let stackView = UIStackView(arrangedSubviews: [imageView, VerticalStackView(arrangedSubviews: [ nameLabel, companyLabel ], spacing: 4 ), getButton]) stackView.spacing = 16 stackView.alignment = .center addSubview(stackView) stackView.fillSuperview() } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } }
Brian Voong
4 years ago
stonypig1
4 years ago
what is keyword convenience do or mean when add in front of init ? thanks
Brian Voong
4 years ago
e.tavares
4 years ago
Hi Brian! My appNameLabel and companyLabel have disappeared.I copied your code from appRowCell to my swift file appRowCell and it did not show the labels.What might be wrong? thank you
ghandirekt
4 years ago
In your AppsHorizontalController, make sure you are registering AppRowCell as the cell to be dequed later in the cellForItemAt indexPath function. viewDidLoad() of AppsHorizontalController: collectionView.register(AppRowCell.self, forCellWithReuseIdentifier: cellId) This is my cellForItemAt: override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! AppRowCell //cell.backgroundColor = .red return cell }
DeltaWhiskey
4 years ago
Hey Brian. This course is great. Thanks for making such great content. I am running into a perplexing error with the AppRowCell class. I have recently started receiving the "Unable to satisfy constraints..." error and the error is referencing the imageView with the width and height constraints of 64. If I comment out these two lines: imageView.constrainWidth(constant: 64) imageView.constrainHeight(constant: 64) the error goes away, but as expected I no longer see the imageView. I tried setting the imageView.translatesAutoresizingMaskIntoConstraints to false and I tried replacing my AppRowCell class with the one from the project download, neither fixes the error. I feel like this is a weird Xcode bug or something. Not sure how to solve this. Any help would be appreciated.
jdhindsa
4 years ago
It's probably due to this line at the bottom of init(frame: CGRect) in AppRowCell.swift: stackView.fillSuperview(padding: .init(top: 8, left: 8, bottom: 8, right: 8)) I think there's a conflicting height constraint there. Not sure how to fix it? Brian?
DeltaWhiskey
4 years ago
@jdhindsa - You are right, it does appear to be a conflicting height constraint, however in my AppRowCell.swift I'm not using the padding you mention above. I just have: stackView.fillSuperview(). When I run the code the app operates fine and all the views look correct. I would really like to fix the conflict though.
Funkablast
3 years ago
Same problem, don't how to fix it
Jose Jonas Abesamis
3 years ago
check the UICollectionViewController that called your AppRowCell and try to make the HEIGHT for the collectionView - sizeforrowat bigger. from 250 to 300 if I'm not mistaken.
HELP & SUPPORT