Problem with layout - CollectionView

UI Frameworks UIKit
pawelzet OP
Created Nov ’21
Replies 6
Boosts 0
Views 2.2k
Participants 2

Hello, as discussed in my previous topic with @Claude31 (Link ) I have a problem with riding off layout. Should I register the nib somewhere and in nib put constraints for a cell? Below I'm showing What I've got so far and how it looks like on device:

I have tried many solution but nothing helped, so i just putted constraints for collection view. I dont know how to put constraints for the cell (It is greyd out), maybe in nib file?:

I have defined there class and identifier.

Here is how it looks like on device:

I would like it to look like in the first screen shot (storyboard).

Here are my files connected with collectionview vc:

First one is Controller with code, another two are connected with the cell.

Here is the ModernizmCollectionViewCell file:

import UIKit

class ModernizmCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var imageCell: UIImageView!
    @IBOutlet weak var navButton: UIIButton!
    @IBOutlet weak var title: UILabel!
    @IBOutlet weak var subTitle: UILabel!
    @IBOutlet weak var locationLabel: UILabel!
    
    
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

}

Many thank for your help.

Replies  6
Boosts  0
Views  2.2k
Participants  2
Claude31 OP
Nov ’21

In such a case, I prefer creating a customCell and register its nib, but you could try to do it directly in the cell. But it seems you have created the custom cells ? Anyway, constraints setting will be similar.

First step is to set the size of cell in CollectionView:

In your case, width should be equal to the full collectionView Width as defined here:

Then set constraint for the imageView in the cell: control drag from ImageView up to the CellView in the list, ans set leading, trailing, top, bottom (value for bottom: 60)

Set the ImageView View aspect to Aspect fit

Then place the Label and set its constraints relative to image view:

  • leading, trailing (may be less than the full image), top
  • define the Label font as Autoshrink (in Attributes inspector) with minimum size factor of 0.5

Procede in the same way for other objects in cell.

Do this and tell what you get.

Note: if that does not work, please post temporarily a mail address so that we can share files by mail.

1
pawelzet OP
Nov ’21

Ok, I moved on a little bit:

This is my Collection View Size Inspector:

And Collection View Flow Layout:

And CollectionViewCell:

0
pawelzet OP
Nov ’21

Ok, so I have added this in ViewController.swift:

 override func viewDidLoad() {

        super.viewDidLoad()

        collectionView.delegate = self

        collectionView.dataSource = self

        collectionView.collectionViewLayout = UICollectionViewFlowLayout()

       

    }

extension TrasyOpisyController: UICollectionViewDelegateFlowLayout{

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        return CGSize(width: 700, height: 700)

    }

}

And it looks much better:

Now I need to realize how to center it to be in the center of VC, like here:

0
Claude31 OP
Nov ’21
Accepted Answer

It would be so much easier if you sent project by mail…

.

Ok, so I have added this in ViewController.swift:

Yes, and this could be done in IB as well.

To have the image fit into its area, set the ImageView View aspect to Aspect fit

And set constraints for the ImageView relative to its container (cell).

To create rounded corners, you will need to use layer. But that will be done later.

1
pawelzet OP
Nov ’21

@Claude31 - with UICollectionViewDelegateFlowLayout I have managed to do that:

It looks much better, but photos arent the same size, as you can see on the screenshot.

0
pawelzet OP
Nov ’21

I have made it with Scale to fill aspect for ImageView and it look perfect. Closing.

0
Problem with layout - CollectionView
First post date Last post date
 
 
Q