I have added Scroll View and Stack View in it, but it does not seems to be the solution. I would like to have an effect like below: One photo and 3 labels under the photo in a container. I have 12 items like this, that is why I need ScrollView. Any ideas how to make it step by step? Here is the solution (airbnb app) I would like to have (I needed to put it on imgur, because there was an error, while adding a photo here):
https://imgur.com/pFY3DX5
So do I need scrollView than if I have more items to place?
No, collectionView already manages the scrolling. You will have more items than you can display, and CollectionView will automatically take care.
- To create a CollectionView, just drag the object in InterfaceBuilder inside your VC.
- Then declare the class as the dataSource and Delegate.
- In code, declare that class conforms to UICollectionViewDelegate and UICollectionViewDataSource.
You will be asked to provide some func to conform to protocols. Follow steps.
- Then create a UICollectionViewCell class (with its xib).
- Define all elements (image, labels) inside.
Code in class would be like:
class FirstCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var imageCell: UIImageView!
@IBOutlet weak var title: UILabel!
@IBOutlet weak var subTitle: UILabel!
@IBOutlet weak var dateOfPublish: UILabel!
// MARK: - View LifeCycle
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
}
- In the class that contains the Collection, register the nib:
let nib = UINib(nibName: "FirstCollectionViewCell", bundle: nil) // FirstCollectionCell is name of Nib, also name of class
collectionView.register(nib, forCellWithReuseIdentifier: "FirstCollectionCell")
- Back to IB, in the storyboard where you have put the CollectionView, set the identifiers for the CollectionViewCell.
- Set the scroll direction of CollectionViewto vertical.
- Set the constraints so that Cell is equal width
So now, start and tell if you have problems.