UICollectionView 3x in one row - ios

I'm trying to make an app that will show images in a UICollectionView, each row there must be 3 images. I've tried different a way like taking the whole view width and dividing it by 3, but it did not work for devices other than the iPhone 6+. Is there anyway I can make it such that it would be able to. One example of what I am trying to do is the instagrame timeline or suggested photos where the photos are in a 3x grid.

You have the right idea of taking the whole width and dividing by 3. You have to find the screen size within the code.
class CollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let width = collectionView.frame.width
let size = CGSize(width: width, height: 50)
return size
}
}
You might also have to play with minimumInteritemSpacingForSectionAtIndex and insetForSectionAtIndex to get the size and margins exactly the way you want it.

Related

How to resize UICollectionViewCell based on device screen

I have a UICollectionView with a custom cell, however, I am trying to impose constraints on the UICollectionView, so it is always half the width of the screen and half the height of the screen. The one issue I continually encounter is that while the UICollectionView changes according to what device the app is deployed on, the UICollectionViewCells hold the exact same pixel width and height dimensions. This is the code I have tried to implement to make each cell the same height and width as the CollectionView.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let height = collectionView.frame.height
let width = collectionView.frame.width
return CGSize(width: width, height: height)
}
This code, however, doesn't work as the size of the cells are simply the values that are specified in the size inspector for the UICollectionView.
I'm unable to figure out what I am doing wrong here with my code. Thank you very much in advance for your help.
The issue is your collection view cell size is fixed always. So the cell size is not adjust according to screen size.Use view frame size.(remove values from size inspector)
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: view.frame.width, height: view.frame.height)
}

Collection View Cell Size/Fitting issue

I am working on an iOS app in swift 4. I have implemented collection view and there are two cells at the front as shown in the image:
When I run my app on bigger screen sizes like iPhone 6/7/8 Plus, then it Shows two complete cells with one-half cell. What I want to achieve is that it shows two cells in front of every screen size, Please help.
Implement the UICollectionViewDelegateFlowLayout protocol in your ViewController, then implement:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let cellSize = //calculate cell size based on the width of the view and padding between cells
return cellSize
}
Check out the documentation for the UICollectionViewDelegateFlowLayout and implement its methods to modify the spacing between the cells.

UiCollectionView cells issue

I have an collectionview with various cells but I have a problem:
if I execute code on iPhone 6s simulator I get this (I want this on every device):
if I execute it on iPad Retina I get this:
and if I execute it on iPhone 5 (I dont see cells):
How do I solve this problem?
Can you help me?
//UPDATE:
if I remove all object in uicollectionviewcell (in this case only the image view) everything work fine (the cells are the same on iPad, iPhone 5 I see the cell) but naturally in the cell I havent objects
Have you tried implementing sizeForItemAtIndexPath to give a width equal to the collection view's width?
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.size.width, height: /* your height */)
}

Access custom cell from XIB in UICollectionViewController for sizeForItemAtIndexPath

I have spent 3 days of searching and reading. In my IOS app I have a custom Cell for UICollectionView with xib File. In this custom cell I have 3 labels, images and buttons. 1 label from it is in the middle and always gets different sizes because it's multiline.
So I must calculate all items height. It's not the problem but the problem is only with this one multiline label. So I want calculate the size for each cell and get the size for sizeForItemAtIndexPath in UICollectionViewController.
After 3 days I think I cannot access this. Can I do this from the custom cell class? If yes, how? If I can access it in UICollectionViewController, how?
//MARK: - CollectionView Flow Layout
extension PhotosCollectionViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let viewSize = super.view.bounds.size
let spacing: CGFloat = 0.5
let width = (viewSize.width) - spacing - 10
/*
Here I need my cell with label name "Beschreibungstext"
to calculate the hight from the label with help from rectangle.
return CGSize(width: width, height: customhight)
*/
return CGSize(width: width, height: CGFloat(400))
}
}

Display Instagram photos correctly in a CollectionView on all screen sizes

This one has me perplexed. Ok, here we go.
I'm pulling down IG images, they come in 3 sizes:
150x150, 306x306, 640x640
What I would like to do is display them 3 across, on all iPhone screen sizes (5,5S,6,6+). The 306x306 sizes come down super fast, and look great. So that's my starting point (150x150 are a bit blurry, 640x640 is also an option, I can also use those, just trying to save some bandwidth).
The edges can be flush to the sides, with a 1 px/pt line between them. I have kind of wracked my brain around this. My understanding is that the function (below) should override any other setting in my Storyboard, and where I should be focused (I've printed out the sizes I've captured from println().
My challenge is finding out the final widths and heights needed to work on all screens. I've tried a number of permutations, but have not nailed it yet. I'm close, but no cigar. This is all using a CollectionView in storyboards. Advice appreciated. It's a heck of a problem, spent all day on this one.
I don't think autolayout can help at all, it all has to be done in code, but who knows?
Thanks [lots!] :-)
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
var width = CGRectGetWidth(collectionView.bounds)
println("width: \(width)")
// iphone5 320
// iphone5S 320
// iphone6 375
// iphone 6+ 414
return CGSize(width: NeedCorrectWidthHere, height: NeedCorrectHeightHere)
}
This does partially work, with a gap between images:
var screenWidth = CGRectGetWidth(collectionView.bounds)
var cellWidth = screenWidth/3
return CGSize(width: cellWidth-10, height: cellWidth-10)
This seemed to work. A pretty simple solution in the end.
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
var screenWidth = CGRectGetWidth(collectionView.bounds)
var cellWidth = screenWidth/3
return CGSize(width: cellWidth-2, height: cellWidth-2)
}
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return 3
}
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return 3
}

Resources