Question 72270 in IOS Swift Question posted in
The official documentation can be found here.

How to show three rounded images in Collectionview cell in all iPhone screen sizes in swift – Ios swift

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

enter image description here

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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. enter image description here

    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
}

    enter image description here

    enter image description here

    enter image description here

    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)
{
    
}

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search