如何在Swift中的所有iPhone屏幕大小中在CollectionView单元格中显示三个圆形图像

Question

我在故事板中采用了 CollectionView，在其单元格中采用了 ImageView 及其下面的一个标签，

我只需要水平显示三个圆形图像，以及所有屏幕尺寸中垂直显示 JSON 的行数

如下图所示，我需要：

在单元格中用于图像视图约束，如下所示

leading = trailing = top = bottom = 5

和在编码中：

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

所以我在不同的屏幕尺寸中得到奇怪的o/p，为什么？

ipodtouch7的o/p

Answer 1

在您的CollectionView单元组设置约束中，如附件图所示，即您的图像视图宽度应取决于ImageView高度，您可以使用比率进行操作。

然后在Willdisplay方法中计算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
}

​src =“ https://i.sstatic.net/mzqvw.png” alt =“在此处输入图像说明”>

下面是整个代码

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

}

Answer 2

请更改高度：
imgview.layer.cornerradius = imgview.frame.size.height/2.0