如何在所有iPhone螢屏尺寸的Collectionview單元格中快速顯示三個圓形影像

我在情節提要中使用了 collectionview，在它的單元格中我使用了 ImageView 及其下面的一個標簽

我只需要水平顯示三個圓形影像，并在所有螢屏尺寸中垂直顯示 JSON 的行數

如下圖我需要：

在單元格中用于 imageview 成本約束，如下所示

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

所以我在不同的螢屏尺寸下變得很奇怪，為什么？

iPhone11 中的 o/p

o/p 的 ipodtouch7

uj5u.com熱心網友回復：

在您的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)
{
    
}

}

uj5u.com熱心網友回復：

請將寬度更改為高度：imgView.layer.cornerRadius = imgView.frame.size.height/2.0

標籤：IOS 迅速 苹果手机 uicollectionview 屏幕尺寸

上一篇：在C#中，如何將字串文本中的字符限制為一定數量而不削減單詞？[復制]

下一篇：SwiftUI-單擊TabItem后的TabView初始化