将自定义 UIView 笔尖的宽度设置为其父 CollectionViewCell

Posted 2023-02-26

【中文标题】将自定义 UIView 笔尖的宽度设置为其父 CollectionViewCell

【英文标题】：Set width of custom UIView nib to it's parent CollectionViewCell

【发布时间】：2019-03-21 12:11:26

【问题描述】：

这就是我所拥有的：

一个包含 2 列且每列距离相等的集合视图。

每个单元格加载 SmallCardView.xib。 SmallCardView 包含一个方形图像，下面有一些文本。

问题：

我希望视图的宽度与其父级（单元格）的宽度相匹配。比较屏幕尺寸可以很好地说明这一点

正如您在上面看到的，单元格（紫色轮廓）在两个屏幕上的大小都正确，但 SmallCardView 的大小保持不变

这是我的集合视图控制器中的代码：

viewDidLoad -

private let spacing: CGFloat = 20.0

override func viewDidLoad() 
    super.viewDidLoad()

    let layout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
    self.collectionView?.collectionViewLayout = layout

sizeForItemAt -

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    let numberOfItemsPerRow: CGFloat = 2
    let spacingBetweenCells: CGFloat = 20

    let totalSpacing = (2 * self.spacing) + ((numberOfItemsPerRow - 1) * spacingBetweenCells) // Amount of total spacing in a row

    if let collection = self.collectionView 
        let width = (collection.bounds.width - totalSpacing)/numberOfItemsPerRow
        return CGSize(width: width, height: width * 1.2)
     else 
        return CGSize(width: 0, height: 0)
    

谢谢！

【问题讨论】：

请提供用于将SmallCardView.xib 嵌入到您的单元格中的代码

【参考方案1】：

您可以将带有约束的视图嵌入到边缘：

extension UIView 

    func makeEdges(to view: UIView, useMargins: Bool = false) -> [NSLayoutConstraint] 
        return [
            (useMargins ? layoutMarginsGuide.leftAnchor : leftAnchor).constraint(equalTo: view.leftAnchor),
            (useMargins ? layoutMarginsGuide.rightAnchor : rightAnchor).constraint(equalTo: view.rightAnchor),
            (useMargins ? layoutMarginsGuide.topAnchor : topAnchor).constraint(equalTo: view.topAnchor),
            (useMargins ? layoutMarginsGuide.bottomAnchor : bottomAnchor).constraint(equalTo: view.bottomAnchor)
        ]
    

    func edges(to view: UIView, useMargins: Bool = false) 
        NSLayoutConstraint.activate(makeEdges(to: view, useMargins: useMargins))
    

并将其用作：

let cardView = ...
cardView.translatesAutoresizingMaskIntoConstraints = false
let cell = ...
cell.contentView.addSubview(cardView)
cell.contentView.edges(to: cardView, useMargins: true)

【参考方案2】：

首先从情节提要中获取collectionview。设置它的约束如下：-

领先空间到集装箱 - 20 到容器的尾随空间 - 20 到容器的顶部空间 - 20 到容器的底部空间 - 20

然后选择 collectionview 并删除默认为 10 的行填充。因此，更新为 20。因此，cellpadding 应为每边 10。

然后转到 viewcontroller 文件并添加所有 3 个代理 1. UICollectionViewDelegate 2. UICollectionView数据源 3. UICollectionViewDelegateFlowLayout

然后在您的 swift 文件中添加以下代码：-

   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 

       return CGSize(width: (self.view.frame.size.width - 60) / 2, height: (self.view.frame.size.width - 60) / 2)