fix: profile field wrong layout margin issue

This commit is contained in:
CMK 2021-05-27 14:36:16 +08:00
parent db71850fb3
commit 6f55c0288c
4 changed files with 24 additions and 9 deletions

View File

@ -28,6 +28,10 @@ extension ProfileFieldSection {
case .field(let field, let attribute):
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: String(describing: ProfileFieldCollectionViewCell.self), for: indexPath) as! ProfileFieldCollectionViewCell
let margin = max(0, collectionView.frame.width - collectionView.readableContentGuide.layoutFrame.width)
cell.containerStackView.layoutMargins = UIEdgeInsets(top: 0, left: margin, bottom: 0, right: margin)
cell.separatorLineToMarginLeadingLayoutConstraint.constant = margin
// set key
cell.fieldView.titleTextField.text = field.name.value
field.name
@ -38,7 +42,6 @@ extension ProfileFieldSection {
cell.fieldView.titleTextField.text = name
}
.store(in: &cell.disposeBag)
// set value
cell.fieldView.valueActiveLabel.configure(field: field.value.value, emojiDict: attribute.emojiDict.value)
@ -89,6 +92,10 @@ extension ProfileFieldSection {
case .addEntry(let attribute):
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: String(describing: ProfileFieldAddEntryCollectionViewCell.self), for: indexPath) as! ProfileFieldAddEntryCollectionViewCell
let margin = max(0, collectionView.frame.width - collectionView.readableContentGuide.layoutFrame.width)
cell.containerStackView.layoutMargins = UIEdgeInsets(top: 0, left: margin, bottom: 0, right: margin)
cell.separatorLineToMarginLeadingLayoutConstraint.constant = margin
cell.bottomSeparatorLine.isHidden = attribute.isLast
cell.delegate = profileFieldAddEntryCollectionViewCellDelegate

View File

@ -37,6 +37,7 @@ final class ProfileFieldAddEntryCollectionViewCell: UICollectionViewCell {
return button
}()
var separatorLineToMarginLeadingLayoutConstraint: NSLayoutConstraint!
var separatorLineToEdgeTrailingLayoutConstraint: NSLayoutConstraint!
var separatorLineToMarginTrailingLayoutConstraint: NSLayoutConstraint!
let bottomSeparatorLine = UIView.separatorLine
@ -70,11 +71,12 @@ extension ProfileFieldAddEntryCollectionViewCell {
contentView.addSubview(containerStackView)
NSLayoutConstraint.activate([
containerStackView.topAnchor.constraint(equalTo: contentView.topAnchor),
containerStackView.leadingAnchor.constraint(equalTo: contentView.readableContentGuide.leadingAnchor),
containerStackView.trailingAnchor.constraint(equalTo: contentView.readableContentGuide.trailingAnchor),
containerStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
containerStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
containerStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
containerStackView.heightAnchor.constraint(equalToConstant: 44).priority(.defaultHigh),
])
containerStackView.isLayoutMarginsRelativeArrangement = true
containerStackView.addArrangedSubview(editButton)
containerStackView.addArrangedSubview(fieldView)
@ -83,13 +85,14 @@ extension ProfileFieldAddEntryCollectionViewCell {
editButton.setContentHuggingPriority(.required - 1, for: .horizontal)
bottomSeparatorLine.translatesAutoresizingMaskIntoConstraints = false
separatorLineToMarginLeadingLayoutConstraint = bottomSeparatorLine.leadingAnchor.constraint(equalTo: contentView.leadingAnchor)
separatorLineToEdgeTrailingLayoutConstraint = bottomSeparatorLine.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
separatorLineToMarginTrailingLayoutConstraint = bottomSeparatorLine.trailingAnchor.constraint(equalTo: readableContentGuide.trailingAnchor)
separatorLineToMarginTrailingLayoutConstraint = bottomSeparatorLine.trailingAnchor.constraint(equalTo: contentView.readableContentGuide.trailingAnchor)
addSubview(bottomSeparatorLine)
NSLayoutConstraint.activate([
separatorLineToMarginLeadingLayoutConstraint,
bottomSeparatorLine.bottomAnchor.constraint(equalTo: bottomAnchor),
bottomSeparatorLine.leadingAnchor.constraint(equalTo: readableContentGuide.leadingAnchor),
bottomSeparatorLine.heightAnchor.constraint(equalToConstant: UIView.separatorLineHeight(of: self)).priority(.defaultHigh),
])

View File

@ -44,6 +44,7 @@ final class ProfileFieldCollectionViewCell: UICollectionViewCell {
return imageView
}()
var separatorLineToMarginLeadingLayoutConstraint: NSLayoutConstraint!
var separatorLineToEdgeTrailingLayoutConstraint: NSLayoutConstraint!
var separatorLineToMarginTrailingLayoutConstraint: NSLayoutConstraint!
let bottomSeparatorLine = UIView.separatorLine
@ -76,11 +77,12 @@ extension ProfileFieldCollectionViewCell {
contentView.addSubview(containerStackView)
NSLayoutConstraint.activate([
containerStackView.topAnchor.constraint(equalTo: contentView.topAnchor),
containerStackView.leadingAnchor.constraint(equalTo: contentView.readableContentGuide.leadingAnchor),
containerStackView.trailingAnchor.constraint(equalTo: contentView.readableContentGuide.trailingAnchor),
containerStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
containerStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
containerStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
containerStackView.heightAnchor.constraint(equalToConstant: 44).priority(.defaultHigh),
])
containerStackView.isLayoutMarginsRelativeArrangement = true
containerStackView.addArrangedSubview(editButton)
containerStackView.addArrangedSubview(fieldView)
@ -92,13 +94,14 @@ extension ProfileFieldCollectionViewCell {
reorderBarImageView.setContentCompressionResistancePriority(.required - 1, for: .horizontal)
bottomSeparatorLine.translatesAutoresizingMaskIntoConstraints = false
separatorLineToMarginLeadingLayoutConstraint = bottomSeparatorLine.leadingAnchor.constraint(equalTo: contentView.leadingAnchor)
separatorLineToEdgeTrailingLayoutConstraint = bottomSeparatorLine.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
separatorLineToMarginTrailingLayoutConstraint = bottomSeparatorLine.trailingAnchor.constraint(equalTo: readableContentGuide.trailingAnchor)
separatorLineToMarginTrailingLayoutConstraint = bottomSeparatorLine.trailingAnchor.constraint(equalTo: contentView.readableContentGuide.trailingAnchor)
addSubview(bottomSeparatorLine)
NSLayoutConstraint.activate([
separatorLineToMarginLeadingLayoutConstraint,
bottomSeparatorLine.bottomAnchor.constraint(equalTo: bottomAnchor),
bottomSeparatorLine.leadingAnchor.constraint(equalTo: readableContentGuide.leadingAnchor),
bottomSeparatorLine.heightAnchor.constraint(equalToConstant: UIView.separatorLineHeight(of: self)).priority(.defaultHigh),
])

View File

@ -159,6 +159,8 @@ final class ProfileHeaderView: UIView {
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])
let section = NSCollectionLayoutSection(group: group)
// note: manually set layout inset to workaround header footer layout issue
// section.contentInsetsReference = .readableContent
let headerFooterSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(1))
let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerFooterSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)