Collection View Design Layout Ios - ios

Question

So, I am right now making an app with a collection view layout and was wondering how to go about designing it to make it look nice. I found a picture online that I would like it to look like and was wondering how I should go about making it.
Here is the picture:
The collection view I would like to replicate is the one in the middle.
Here is how my current cells look like:
My Cells after the first answer:
This is my current code for configuring the cells:
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "channelCell", for: indexPath) as? ChannelCollectionViewCell
let channel = channels[indexPath.row]
// Configure the cell
cell?.configureCell(channel: channel)
return cell!
}
My guess is there would be 2 main things to making the deisgn I want which brings me to two specific questions.
How do I make a cell have rounded corners?
How do I space a cell from the side of screen and reduce gaps between cells?

Answer 1

ViewController Class
class YourClass: UIViewController {
//MARK:-Outlets
#IBOutlet weak var yourCollectionView: UICollectionView!
//Mark:-Variables
var cellWidth:CGFloat = 0
var cellHeight:CGFloat = 0
var spacing:CGFloat = 12
var numberOfColumn:CGFloat = 2
//MARK:-LifeCycle
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
yourCollectionView.contentInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
if let flowLayout = yourCollectionView.collectionViewLayout as? UICollectionViewFlowLayout{
cellWidth = (yourCollectionView.frame.width - (numberOfColumn + 1)*spacing)/numberOfColumn
cellHeight = 100 //yourCellHeight
flowLayout.minimumLineSpacing = spacing
flowLayout.minimumInteritemSpacing = spacing
}
}
extension YourClass:UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as? YourCollectionViewCell{
//Configure cell
return cell
}
return UICollectionViewCell()
}
}
extension YourClass:UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: cellWidth, height: cellHeight)
}
}
CollectionViewCell Class
class YourCollectionViewCell:UICollectionViewCell{
override func awakeFromNib() {
super.awakeFromNib()
self.layer.cornerRadius = 10 //customize yourself
self.layer.masksToBounds = true
}
}