Different spacing between cells with UICollectionView and FlowLayout - swift

I have a problem with dynamic cell sizing in a UICollectionView, or maybe a logic problem. I would like to calculate the width of the cells in sizeForItemAt indexPath: IndexPath. I have a minimum spacing of 1. The problem is that the board/spacing between my three cells is not the same as you can see in the picture. The spacing between the first and second cell looks bigger than the spacing between the second and the third cell.
My code:
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 9
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CustomCell
cell.backgroundColor = UIColor.gray
cell.name.text = "My Textfield"
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = mycollectionView.frame.width
let cellsInLine: CGFloat = 3
let widthWithoutSpacing = width - (spacing * (cellsInLine - 1))
let cell = CGSize(width: widthWithoutSpacing / cellsInLine, height: 50)
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return spacing
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return spacing
}

Related

I have CollectionView cells in TableViewCells. I am facing issue in adjusting UIImageView width according to different simluators

I have used CGSize(width: 370, height: 240) in collection view layout function sizeForItemAt which is not dynamic. Width:370 is perfect for iPhone 12/Pro but not for other cases. Hence I'm getting the output below:- iPhone Mini Simulator
My extension in file are:
extension EventAttendTableCell : UICollectionViewDelegateFlowLayout,UICollectionViewDelegate,UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
eventAttendArray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = collectionViewEventAttend.dequeueReusableCell(withReuseIdentifier: "EventAttendCollectionCell", for: indexPath) as? EventAttendCollectionCell else {fatalError("Error to create TableViewCell")}
let attendData = eventAttendArray[indexPath.row]
cell.imgAttend.image = UIImage(named: attendData.imgEventAttendModel)
cell.lblAttend1.text = attendData.lblEventAttendModelTop
cell.lblAttend2.text = attendData.lblEventAttendModelMiddle
cell.lblAttend3.text = attendData.lblEventAttendModelBottom
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
20
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
20
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 370, height: 240)
}
}
"eventAttendArray" is the Data array from the Model file.

create menu page with collectionView

I'm struggle a lot. I want to make a menu page with collectionView like this.
I set my width collectionView like this
addSubview(menuCollectionView)
menuCollectionView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
menuCollectionView.leadingAnchor.constraint(equalTo: leadingAnchor),
menuCollectionView.bottomAnchor.constraint(equalTo: bottomAnchor),
menuCollectionView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -129),
menuCollectionView.heightAnchor.constraint(equalToConstant: 33)
])
menuCollectionView.register(MenuCell.self, forCellWithReuseIdentifier: cellID)
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellID, for: indexPath)
cell.backgroundColor = .red
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: frame.width / 2, height: frame.height)
}
but it end up like this
the cell not fit with the width I setup, and it scroll to down. I was trying to replicate this tutorial from youtube pageMenuVideo but it behave differently. please help me :(

Change vertical cell size space created with a XIB file

How can I change the space between the cells? It currently looks like this:
Nothing that I've tried works, this is my current setup:
and this is where I'm defining the cell:
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// return products.count
return 3
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// This determines the size of the cell on the featured slider
return CGSize(width: UIScreen.main.bounds.width, height: 350)
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FeaturedPostsCollectionViewCell", for: indexPath) as! FeaturedPostsCollectionViewCell
let product = products[indexPath.row]
cell.featuredImage.image = UIImage(named: "4")
cell.lbName.text = product.Name!
cell.lbDesc.text = product.desc!
return cell
}
I've looked around but can't find what is it that is giving it so much space...
I just found the solution, it happened that I had to fix the width to my preferred value:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 310, height: 350)
}

How do you set inner spacing in a collection view cell with 2 cells per row?

Ive been stuck on this for two weeks now. Searched everywhere and still can't find a solution. I want to bring the cells closer to the middle. Also have another collection view with 3 cells per row I need to do the same thing with. Thanks
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 153, height: 241)
}
//
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsetsMake(10, 11, 10, 11)
}
//
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
//
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, maximumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
Jusr read comment , don't forget to setup your cell at let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! UICollectionViewCell
extension ViewController :UICollectionViewDelegate , UICollectionViewDelegateFlowLayout,UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 100 // data source
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! UICollectionViewCell
cell.backgroundColor = .red
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// 3 cell same size in each row space between them 4
let spaceBetweenCell :CGFloat = 4.0 // if you change this parmters you have to change minimumInteritemSpacingForSectionAt ,
let screenWidth = UIScreen.main.bounds.size.width - CGFloat(2 * spaceBetweenCell)
let totalSpace = spaceBetweenCell * 2.0; // there is 2 between 3 item
return CGSize(width: (screenWidth - totalSpace)/3, height: (screenWidth-totalSpace)/3)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 4.0 // space between sections
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 4.0 // space between items in row
}
}
If you're happy with your cell sizes and just want to move them closer, then adjust your left and right insets (which are the 2nd and 4th inputs to UIEdgeInsetsMake):
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsetsMake(10, 16, 10, 16)
}

Changing size of selected UICollectionView Cell

I have a simple UICollectionViewController that returns X amount of cells. I want to have it so when a cell is selected, that specific selected cell will change it's size and become larger in height as all of the other cells stay the same. How do I achieve this? Here's my code:
class HomeController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
let cellId = "cellId"
override func viewDidLoad() {
super.viewDidLoad()
collectionView?.backgroundColor = UIColor(white: 0.90, alpha: 1.0)
collectionView?.register(PostCell.self, forCellWithReuseIdentifier: cellId)
collectionView?.showsVerticalScrollIndicator = false
collectionView?.alwaysBounceVertical = true
}
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 4
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! PostCell
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let height = (view.frame.width) * 9 / 16
return CGSize(width: view.frame.width, height: height + 50 + 50)
}
}
You can check to see if the indexPath from sizeForItemAt is selected. If it is, you return a different height otherwise return the standard height.
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
collectionView.performBatchUpdates(nil, completion: nil)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
switch collectionView.indexPathsForSelectedItems?.first {
case .some(indexPath):
return CGSize() // your selected height
default:
let height = (view.frame.width) * 9 / 16
return CGSize(width: view.frame.width, height: height + 50 + 50)
}
}