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

我正在我的collectionView中使用CompositionalLayout在我的应用程序的某个detailView中创建一个水平滚动视图。我需要的项目举行圆形图像视图，我计划显示用户的个人资料图片。我创建了一个自定义类来表示collectionView的这个特定部分中的组中的项目。我知道我在customCell中对imageView进行了适当的舍入，但问题是，对于组中的每个不同项目，单元格中的imageView都以一种奇怪的方式扭曲-我注意到每次我更改

itemSize

和

groupSize

的值时，imageView都会以另一种形式扭曲

我正在努力实现的目标：

我得到的：

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

}

这是我在CollaboratorsLayout部分的代码：

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

}

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

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

}

---

原来问题在于自动布局约束，一旦我为

memberPhotoView

的宽度和高度添加了约束，我就开始为这些项目创建完美的圆圈

---

我仍然不知道为什么

compositionalLayout

在没有这些约束的情况下扭曲了圆圈。

原来问题在于自动布局约束，一旦我为

memberPhotoView

的宽度和高度添加了约束，我就开始为这些项目创建完美的圆圈

---

我仍然不知道为什么

合成布局
在没有这些约束的情况下扭曲了圆。
将这一行
memberPhotoView.layer.cornerRadius=memberPhotoView.bounds.width/2
替换为
memberPhotoView.layer.cornerRadius=memberPhotoView.bounds.height/2该行多次从“.width”切换到“.height”，反之亦然。我相信这与CompositionLayout中的itemSize和groupSize有关，因为当我修改这些尺寸时，形状会发生变化：/您的第三个项目看起来很完美，我认为您的collectionview没有完全重新加载将这一行
memberPhotoView.layer.cornerRadius=memberPhotoView.bounds.width/2
替换为
memberPhotoView.layer.cornerRadius=memberPhotoView.bounds.height/2
@Niraj_iOS我多次将该行从“.width”切换到“.height”反之亦然——我确实相信这与CompositionLayout中的itemSize和groupSize有关，因为当我修改这些尺寸时形状会发生变化：/您的第三个项目看起来很完美，我认为您的collectionview没有完全重新加载