Problem with layout - CollectionView

Question

Created Nov ’21

Replies 6

Boosts 0

Views 1.8k

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:

Screenshot 2021-11-25 at 11.10.58.png 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?:

Screenshot 2021-11-25 at 11.11.56.png

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:

Screenshot 2021-11-25 at 11.21.53.png

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.

Answered by Claude31 in 696210022

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.

Boost

Answer 1

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

Aspect Fit.jpg

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

Answer 2

pawelzet OP

Nov ’21

Ok, I moved on a little bit:

Simulator Screen Shot - iPhone SE (2nd generation) - 2021-11-25 at 14.34.50.png

This is my Collection View Size Inspector:

Screenshot 2021-11-25 at 14.42.56.png

And Collection View Flow Layout:

Screenshot 2021-11-25 at 14.45.39.png

And CollectionViewCell:

Screenshot 2021-11-25 at 15.06.47.png

0

Answer 3

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:

Simulator Screen Shot - iPhone SE (2nd generation) - 2021-11-25 at 19.20.41.png

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

0

Answer 4

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

Answer 5

pawelzet OP

Nov ’21

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

Simulator Screen Shot - iPhone SE (2nd generation) - 2021-11-25 at 21.11.57.png

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

0

Answer 6

pawelzet OP

Nov ’21

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

0