Swift 5 Compositional Layout - itemSize и groupSize, искажающие подпункты элемента - PullRequest
Новая
       7

Swift 5 Compositional Layout - itemSize и groupSize, искажающие подпункты элемента

0 голосов
/ 28 января 2020

Я использую CompositionalLayout для моего collectionView, чтобы создать представление горизонтальной прокрутки в некотором detailView в моем приложении. Мне нужно, чтобы элементы содержали круглые изображения, где я планирую показывать изображения профиля пользователя. Я создал собственный класс для представления элементов, которые будут находиться в группе в этом указанном разделе c в collectionView. Я знаю, что правильно округляю imageView внутри своего customCell, но проблема в том, что imageView внутри ячейки странным образом искажается для каждого отдельного элемента в группе - я замечаю каждый раз, когда меняю значения itemSize и groupSize imageViews искажаются в другой форме.

Чего я пытаюсь достичь: enter image description here

Что я Я получаю:

enter image description here

Это мой код для раздела 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")
    }

}

1 Ответ

0 голосов
/ 05 февраля 2020

Оказывается, проблема была в ограничениях autoLayout, как только я добавил ограничения для ширины и высоты memberPhotoView, я начал получать идеальные круги для элементов.

Я все еще не уверен, почему compositionalLayout исказил круги, когда у них не было этих ограничений.

...