I have taken collectionview in storyboard and in its cell i have taken ImageView and its below one label

i need to show only three rounded images horzontally and number of rows from JSON vertically in all screen sizes

like below image i need:

in cell for imageview costraints like below

leading = trailing = top = bottom = 5

and in coding:

 class FriendsViewController: UIViewController {

// MARK: - IBOutlets
@IBOutlet weak var galleryCollectionView: UICollectionView!

// MARK: - LifeCycleMethods
override func viewDidLoad() {
    super.viewDidLoad()
  
    let layout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
    layout.scrollDirection = .vertical
    let width = UIScreen.main.bounds.width/4
    let height = width*1.1
    
    layout.minimumInteritemSpacing = 0
    layout.minimumLineSpacing = 5
    layout.itemSize = CGSize(width: width, height: height)
    self.galleryCollectionView.collectionViewLayout = layout
 
}

}

class FriendsCollectionViewCell: UICollectionViewCell {

@IBOutlet weak var imgView: UIImageViewX!
@IBOutlet weak var lblTitle: UILabel!
override func awakeFromNib() {
    super.awakeFromNib()
 imgView.layer.cornerRadius = imgView.frame.height/2.0    }
}

so i am getting weird o/p in different screen sizes why?

o/p of ipodtouch7

CodePudding user response：

In your collectionview cell Set constraints as shown in attached image, i.e. ur image view width should depend on imageview height, you can do it using ratio.

Then in willDisplay method calculate cornerRadius

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath)
{
    guard let cell = cell as? TestCollectionViewCell else
    {
        return
    }
    
     let cellHeight : CGFloat = cell.frame.size.height
    let labelHeight : CGFloat = cell.label?.frame.size.height ?? 0.0
    cell.imageView?.layer.cornerRadius = (cellHeight - labelHeight) / 2.0
}

Below is the entire code

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout

{

@IBOutlet weak var collectionView : UICollectionView? = nil
let horizontalSpaceBetweenCell : CGFloat = 16
let verticalSpaceBetweenCell : CGFloat = 16
let edgeInsets = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16)

override func viewDidLoad()
{
    super.viewDidLoad()
    setup()
}

func setup()
{
    let nib = UINib(nibName: "TestCollectionViewCell", bundle: nil)
    collectionView?.register(nib, forCellWithReuseIdentifier: "TestCollectionViewCell")
}

func numberOfSections(in collectionView: UICollectionView) -> Int
{
    return 1
}
    
   
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
{
    return 40
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
    if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TestCollectionViewCell", for: indexPath) as? TestCollectionViewCell
    {
        return cell
    }
    
    return UICollectionViewCell()
}

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath)
{
    guard let cell = cell as? TestCollectionViewCell else
    {
        return
    }
    
    let cellHeight : CGFloat = cell.frame.size.height
    let labelHeight : CGFloat = cell.label?.frame.size.height ?? 0.0
    cell.imageView?.layer.cornerRadius = (cellHeight - labelHeight) / 2.0
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
    let numberOfCellsPerRow = 3
    let otherSpace = (edgeInsets.left   edgeInsets.right)
    let width = (collectionView.frame.size.width - otherSpace) / CGFloat(numberOfCellsPerRow)
    return CGSize(width: width, height: 80) // Height can be anything 80, 90 ,100
}
    
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 16
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return edgeInsets
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
{
    
}

}

CodePudding user response：

Please change Widhth to height : imgView.layer.cornerRadius = imgView.frame.size.height/2.0