将自定义 UIView nib 的宽度设置为其父级 CollectionViewCell

Question

这是我的：

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

ItemAt 大小 -

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

谢谢！

Answer 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)

Answer 2

首先从故事板中获取collectionview。设置它的约束如下：-

引导 space 到容器 - 20
尾随 space 到容器 - 20
顶部 space 到容器 - 20
底部 space 到容器 - 20

然后 select 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)

   }

将自定义 UIView nib 的宽度设置为其父级 CollectionViewCell

Set width of custom UIView nib to it's parent CollectionViewCell

xib

nib

ios

uicollectionview

swift