CODEWITHSUNDEEP
iosswiftuicollectionview
Pasha Pervii
Pasha Pervii

Reputation: 33

SWIFT - Collection View Cell size

I have an app that uses photos from web and put them into the collection view.

in collection view i have 3 rows of cells 1:1 size which calculates from screen width / 3.

every thing is working good but there is a thing, on for ex. iphone 6s+ the cells are all tightly get together with no spacings at all. but on iphone 5s i getting some spacing between cells, in only vertical way as on the screenshot.

iPhone 6s+ Screenshot

iPhone 5s Screenshot

there is some code:

let screenSize: CGRect = UIScreen.mainScreen().bounds

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
    return CGSize(width: screenSize.width / 3, height: screenSize.width / 3)
}

i have also checked if it is an image view problem but it is not.

What can i do to remove those spacings?

Upvotes: 1

Views: 2574

Answers (4)

user6565175
user6565175

Reputation: 31

Do the original sum, round it down and multiply back by the number of columns.

Adjust the frame width of the collectView to this value and then cell widths will always fit the view perfectly.

Upvotes: 2

user6565175
user6565175

Reputation: 31

I had a similar issue with horizontal and vertical collection views.

I was using a slider to set the number of columns and then resize the UIImages in the collection accordingly to the new cell size

On top of this I cut an image of an arrow in two and placed each half at the sides of the collection view so that when it displayed it had the result of drawing a full arrow in between images... I couldn't be bothered with custom seperator inserts at the time...which is where the arrow "should" have lived.

Hence every now and then I had a pixel wide gap in the arrows depending on screensize and orientation.

It IS all in the rounding up of the division result.

You have to find a width/height that divides as best you can to fit the screen most used.

You can apply some conditional resizing of the views if the values from the sums are not integers but finding the correct value to replace it with meant having to specify every eventuality.

In the end I gave up and "lived" with the single-pixel-wide gap

Upvotes: 0

iamburak
iamburak

Reputation: 3568

Creating CollectionView and then fit cells and spacing programmatically, you can try to add minimumInteritemSpacingForSectionAtIndex and minimumLineSpacingForSectionAtIndex on your own code.

func collectionViewLaunch() {

    // layout of collectionView
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()

    // item size
    layout.itemSize = CGSizeMake(self.view.frame.width / 3, self.view.frame.size.width / 3)

    // direction of scrolling
    layout.scrollDirection = UICollectionViewScrollDirection.Vertical

    // define frame of collectionView
    let frame = CGRectMake(0, 0,
        self.view.frame.size.width, self.view.frame.size.height - self.tabBarController!.tabBar.frame.size.height - self.navigationController!.navigationBar.frame.size.height)

    // declare collectionView
    collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.alwaysBounceVertical = true
    collectionView.backgroundColor = .whiteColor()
    self.view.addSubview(collectionView)

    self.collectionView.hidden = false

    // define cell for collection view
    collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")

    // call function to load posts
    loadPosts()

}

// cell line spacing
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 0
}


// cell inter spacing
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,
    minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 0
}

// cell numb
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return picArray.count
}

Hope help you.

Upvotes: 1

Sam0711er
Sam0711er

Reputation: 894

Since the iPhone 5s' width is 640, dividing it by 3 would result in 213,33333333. Since iOS doesn't like those values, it will correct the value to 213, which will create a spacing when having three of those next to each other, since 213*3 does not equal 640. On the iPhone 6s Plus, the width is 1080 which is equally dividable by 3, resulting in 360, Here, no spacing will occur.

Try finding a divider which equals a natural number for any screen size and the spaces should be gone, or you try to find another solution.

Upvotes: 0

Related Questions