如何在 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

请将宽度更改为高度： imgView.layer.cornerRadius = imgView.frame.size.height/2.0

Answer 2

在您的 collectionview 单元格中设置约束，如附图所示，即您的图像视图宽度应取决于图像视图高度，您可以使用比率来完成。

然后在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
}

下面是完整代码

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

}

如何在 swift 中所有 iPhone 屏幕尺寸的 Collectionview 单元格中显示三个圆形图像

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

iphone

screen-size

ios

uicollectionview

swift