Swift 5 组合布局 - itemSize 和 groupSize 扭曲项目子视图

Question

我正在为我的 collectionView 使用 CompositionalLayout，以便在我的应用程序的某些 detailView 中创建水平滚动视图。我需要这些项目来容纳我计划显示用户个人资料图片的 imageViews。我做了一个自定义 class 来表示将在 collectionView 的这个特定部分中的组中的项目。我知道我在我的 customCell 中正确地舍入了 imageView 但问题是单元格内的 imageView 对于组中的每个不同项目都以一种奇怪的方式扭曲 - 我注意到每次我更改 [=13= 的值] 和 groupSize 图像视图以另一种形式扭曲。

我想要达到的目标：

我得到的是：

这是我的 CollaboratorsLayoutSection 代码：

func generateCollaboratorsLayout(isWide: Bool) -> NSCollectionLayoutSection {
        let itemSize = NSCollectionLayoutSize(widthDimension: .absolute(120),
                                              heightDimension: .absolute(160))

        let item = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(
            widthDimension: .absolute(150),
            heightDimension: .absolute(120))
        let group = NSCollectionLayoutGroup.vertical(
            layoutSize: groupSize,
            subitem: item,
            count: 1)
        group.contentInsets = NSDirectionalEdgeInsets(
            top: 5,
            leading: 5,
            bottom: 5,
            trailing: 5)

        let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44))
        let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(
            layoutSize: headerSize,
            elementKind: ProjectDetailViewController.sectionHeaderElementKind, alignment: .top)

        let section = NSCollectionLayoutSection(group: group)
        section.boundarySupplementaryItems = [sectionHeader]
        section.orthogonalScrollingBehavior = .groupPaging

        return section
    }

这是我用于项目的自定义单元格：

class CollaboratorsCell: UICollectionViewCell {
    static let reuseIdentifier: String = "CollaboratorsCell"

    // MARK: UILabel properties on each collaborators
    let usernameLabel = UILabel()
    let roleLabel = UILabel()
    let memberPhotoView = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
    let contentContainer = UIView()

    override init(frame: CGRect) {
        super.init(frame: frame)

    }

    func configureCollaboratorCell(with project: Project, indexPath: IndexPath) {
        contentContainer.translatesAutoresizingMaskIntoConstraints = false

        contentView.addSubview(memberPhotoView)
        contentView.addSubview(contentContainer)
        contentContainer.backgroundColor = .blue

        memberPhotoView.translatesAutoresizingMaskIntoConstraints = false
        memberPhotoView.backgroundColor = .green
        memberPhotoView.layer.masksToBounds = false
        memberPhotoView.layer.cornerRadius = memberPhotoView.bounds.width / 2
        memberPhotoView.clipsToBounds = true
        contentContainer.addSubview(memberPhotoView)

        usernameLabel.translatesAutoresizingMaskIntoConstraints = false
        usernameLabel.text = project.members[indexPath.row]
        usernameLabel.textColor = .white
        usernameLabel.font = UIFont(name: "Avenir-Medium", size: 14)
        usernameLabel.adjustsFontForContentSizeCategory = true
        contentContainer.addSubview(usernameLabel)

        roleLabel.translatesAutoresizingMaskIntoConstraints = false
        roleLabel.text = "ROLE: "
        roleLabel.textColor = .white
        roleLabel.font = UIFont(name: "Avenir", size: 12)
        roleLabel.adjustsFontForContentSizeCategory = true
        contentContainer.addSubview(roleLabel)

        let spacing = CGFloat(10)
        NSLayoutConstraint.activate([
            contentContainer.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            contentContainer.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            contentContainer.topAnchor.constraint(equalTo: contentView.topAnchor),
            contentContainer.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),

//            memberPhotoView.leadingAnchor.constraint(equalTo: contentContainer.leadingAnchor, constant: spacing),
//            memberPhotoView.trailingAnchor.constraint(equalTo: contentContainer.trailingAnchor, constant: spacing),
            memberPhotoView.topAnchor.constraint(equalTo: contentContainer.topAnchor, constant: 0),
            memberPhotoView.centerXAnchor.constraint(equalTo: self.contentContainer.centerXAnchor),
//            memberPhotoView.centerYAnchor.constraint(equalTo: self.contentContainer.centerYAnchor),

            usernameLabel.topAnchor.constraint(equalTo: memberPhotoView.bottomAnchor, constant: spacing),
            usernameLabel.leadingAnchor.constraint(equalTo: memberPhotoView.leadingAnchor),
            usernameLabel.trailingAnchor.constraint(equalTo: memberPhotoView.trailingAnchor),

            roleLabel.topAnchor.constraint(equalTo: usernameLabel.bottomAnchor),
            roleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            roleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            roleLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
        ])
    }

    required init?(coder: NSCoder) {
        fatalError("Not happening in CollaborrabotsCell")
    }

}

Answer 1

原来问题出在 autoLayout 约束上，一旦我添加了 memberPhotoView 的宽度和高度约束，我就开始为项目获得完美的圆圈。

我仍然不确定为什么 compositionalLayout 在没有这些约束的情况下会扭曲圆圈。

Swift 5 组合布局 - itemSize 和 groupSize 扭曲项目子视图

Swift 5 Compositional Layout - itemSize and groupSize distorting item subViews

ios

uicollectionview

uicollectionviewcell

swift