From 05bda7076de3334ff73532509a74e4dfe431b4b2 Mon Sep 17 00:00:00 2001 From: "Pfeil, Scott Robert" Date: Wed, 12 Feb 2020 14:39:38 -0500 Subject: [PATCH] Layout constraint helpers --- MVMCoreUI.xcodeproj/project.pbxproj | 2 +- .../Items => BaseClasses}/TableViewCell.swift | 13 +++- .../NSLayoutConstraintExtension.swift | 74 +++++++++++-------- .../ImageHeadlineBody.swift | 19 +---- .../Molecules/Items/StackItemModel.swift | 2 +- .../HeadlineBodyLinkToggle.swift | 2 +- .../ToggleMolecules/HeadlineBodyToggle.swift | 2 +- .../ToggleMolecules/LabelToggle.swift | 2 +- 8 files changed, 64 insertions(+), 52 deletions(-) rename MVMCoreUI/{Molecules/Items => BaseClasses}/TableViewCell.swift (97%) diff --git a/MVMCoreUI.xcodeproj/project.pbxproj b/MVMCoreUI.xcodeproj/project.pbxproj index 8812759f..c8e5f8d8 100644 --- a/MVMCoreUI.xcodeproj/project.pbxproj +++ b/MVMCoreUI.xcodeproj/project.pbxproj @@ -919,7 +919,6 @@ D22479912316A9EF003FCCF9 /* Items */ = { isa = PBXGroup; children = ( - D2755D7A23689C7500485468 /* TableViewCell.swift */, 01EB368923609801006832FA /* ListItemModel.swift */, 01509D8E2327EC6F00EF99AA /* MoleculeTableViewCell.swift */, 012A88C1238D7BCA00FE3DA1 /* CarouselItemModel.swift */, @@ -1378,6 +1377,7 @@ D2B18B7E2360913400A9AEDC /* Control.swift */, D2B18B802360945C00A9AEDC /* View.swift */, 0AE14F63238315D2005417F8 /* TextField.swift */, + D2755D7A23689C7500485468 /* TableViewCell.swift */, 0A5D59C323AD488600EFD9E9 /* Protocols */, ); path = BaseClasses; diff --git a/MVMCoreUI/Molecules/Items/TableViewCell.swift b/MVMCoreUI/BaseClasses/TableViewCell.swift similarity index 97% rename from MVMCoreUI/Molecules/Items/TableViewCell.swift rename to MVMCoreUI/BaseClasses/TableViewCell.swift index cd8a3cdf..81b61d34 100644 --- a/MVMCoreUI/Molecules/Items/TableViewCell.swift +++ b/MVMCoreUI/BaseClasses/TableViewCell.swift @@ -28,6 +28,8 @@ import UIKit private var heroAccessoryCenter: CGPoint? + private var initialSetupPerformed = false + // MARK: - Styling open func style(with styleString: String?) { guard let styleString = styleString else { @@ -102,12 +104,19 @@ import UIKit // MARK: - Inits public override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) { super.init(style: style, reuseIdentifier: reuseIdentifier) - setupView() + initialSetup() } public required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) - setupView() + initialSetup() + } + + public func initialSetup() { + if !initialSetupPerformed { + initialSetupPerformed = true + setupView() + } } // MARK: - MFViewProtocol diff --git a/MVMCoreUI/Categories/NSLayoutConstraintExtension.swift b/MVMCoreUI/Categories/NSLayoutConstraintExtension.swift index bf6c8f65..4057a88c 100644 --- a/MVMCoreUI/Categories/NSLayoutConstraintExtension.swift +++ b/MVMCoreUI/Categories/NSLayoutConstraintExtension.swift @@ -9,36 +9,52 @@ import Foundation public extension NSLayoutConstraint { - static func pinSubviewsCenter(leftView: UIView, rightView: UIView) { - guard let superView = leftView.superview else { - return + + /// Pins the views vertically in the super view, allowing the super to expand depending on the tallest view. Shorter views are aligned center. + static func pinViewsVerticalExpandableAlignCenter(_ views: [UIView]) { + for view in views { + guard let superView = view.superview else { + return + } + view.centerYAnchor.constraint(equalTo: superView.centerYAnchor).isActive = true + view.topAnchor.constraint(greaterThanOrEqualTo: superView.layoutMarginsGuide.topAnchor).isActive = true + superView.layoutMarginsGuide.bottomAnchor.constraint(greaterThanOrEqualTo: view.bottomAnchor).isActive = true + + var constraint = view.topAnchor.constraint(equalTo: superView.layoutMarginsGuide.topAnchor) + constraint.priority = .defaultLow + constraint.isActive = true + + constraint = superView.layoutMarginsGuide.bottomAnchor.constraint(equalTo: view.bottomAnchor) + constraint.priority = .defaultLow + constraint.isActive = true } - leftView.centerYAnchor.constraint(equalTo: superView.centerYAnchor).isActive = true - leftView.leftAnchor.constraint(equalTo: superView.layoutMarginsGuide.leftAnchor).isActive = true - leftView.topAnchor.constraint(greaterThanOrEqualTo: superView.layoutMarginsGuide.topAnchor).isActive = true - superView.layoutMarginsGuide.bottomAnchor.constraint(greaterThanOrEqualTo: leftView.bottomAnchor).isActive = true + } + + /// Pins the views vertically in the super view, allowing the super to expand depending on the tallest view. Shorter views are aligned top. + static func pinViewsVerticalExpandableAlignTop(_ views: [UIView]) { + for view in views { + guard let superView = view.superview else { + return + } + view.topAnchor.constraint(equalTo: superView.layoutMarginsGuide.topAnchor).isActive = true + superView.layoutMarginsGuide.bottomAnchor.constraint(greaterThanOrEqualTo: view.bottomAnchor).isActive = true - var constraint = leftView.topAnchor.constraint(equalTo: superView.layoutMarginsGuide.topAnchor) - constraint.priority = .defaultLow - constraint.isActive = true - - constraint = superView.layoutMarginsGuide.bottomAnchor.constraint(equalTo: leftView.bottomAnchor) - constraint.priority = .defaultLow - constraint.isActive = true - - rightView.leftAnchor.constraint(greaterThanOrEqualTo: leftView.rightAnchor, constant: 16).isActive = true - - rightView.centerYAnchor.constraint(equalTo: superView.centerYAnchor).isActive = true - superView.layoutMarginsGuide.rightAnchor.constraint(equalTo: rightView.rightAnchor).isActive = true - rightView.topAnchor.constraint(greaterThanOrEqualTo: superView.layoutMarginsGuide.topAnchor).isActive = true - superView.layoutMarginsGuide.bottomAnchor.constraint(greaterThanOrEqualTo: rightView.bottomAnchor).isActive = true - - constraint = rightView.topAnchor.constraint(equalTo: superView.layoutMarginsGuide.topAnchor) - constraint.priority = .defaultLow - constraint.isActive = true - - constraint = superView.layoutMarginsGuide.bottomAnchor.constraint(equalTo: rightView.bottomAnchor) - constraint.priority = .defaultLow - constraint.isActive = true + let constraint = superView.layoutMarginsGuide.bottomAnchor.constraint(equalTo: view.bottomAnchor) + constraint.priority = .defaultLow + constraint.isActive = true + } + } + + /// Pins a view to the left and a view to the right, flexible space in between. The super can expand depending on the taller view. Shorter views are aligned top if alignTop true, else aligned center. + static func pinViews(leftView: UIView, rightView: UIView, alignTop: Bool) { + guard let superView = leftView.superview else { return } + if alignTop { + pinViewsVerticalExpandableAlignTop([leftView, rightView]) + } else { + pinViewsVerticalExpandableAlignCenter([leftView, rightView]) + } + leftView.leadingAnchor.constraint(equalTo: superView.layoutMarginsGuide.leadingAnchor).isActive = true + superView.layoutMarginsGuide.trailingAnchor.constraint(equalTo: rightView.trailingAnchor).isActive = true + rightView.leftAnchor.constraint(greaterThanOrEqualTo: leftView.rightAnchor, constant: PaddingHorizontalBetweenRelatedItems).isActive = true } } diff --git a/MVMCoreUI/Molecules/HorizontalCombinationViews/ImageHeadlineBody.swift b/MVMCoreUI/Molecules/HorizontalCombinationViews/ImageHeadlineBody.swift index 089352c7..840f4763 100644 --- a/MVMCoreUI/Molecules/HorizontalCombinationViews/ImageHeadlineBody.swift +++ b/MVMCoreUI/Molecules/HorizontalCombinationViews/ImageHeadlineBody.swift @@ -10,13 +10,14 @@ import UIKit @objcMembers open class ImageHeadlineBody: View { let headlineBody = HeadlineBody(frame: .zero) - let imageView = MFLoadImageView() + let imageView = MFLoadImageView(pinnedEdges: .all) var constraintBetweenImageLabelsConstant: CGFloat = 16 var constraintBetweenImageLabels: NSLayoutConstraint? // MARK: - MFViewProtocol open override func setupView() { + super.setupView() guard subviews.count == 0 else { return } @@ -26,23 +27,9 @@ import UIKit addSubview(headlineBody) addSubview(imageView) - headlineBody.topAnchor.constraint(equalTo: topAnchor).isActive = true + NSLayoutConstraint.pinViewsVerticalExpandableAlignCenter([imageView, headlineBody]) rightAnchor.constraint(equalTo: headlineBody.rightAnchor).isActive = true - bottomAnchor.constraint(greaterThanOrEqualTo: headlineBody.bottomAnchor).isActive = true - var constraint = bottomAnchor.constraint(equalTo: headlineBody.bottomAnchor) - constraint.priority = .defaultLow - constraint.isActive = true - - imageView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true imageView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true - imageView.topAnchor.constraint(greaterThanOrEqualTo: topAnchor).isActive = true - bottomAnchor.constraint(greaterThanOrEqualTo: imageView.bottomAnchor).isActive = true - constraint = bottomAnchor.constraint(equalTo: imageView.bottomAnchor) - constraint.priority = UILayoutPriority(rawValue: 200) - constraint.isActive = true - constraint = imageView.topAnchor.constraint(equalTo: topAnchor) - constraint.priority = UILayoutPriority(rawValue: 200) - constraint.isActive = true constraintBetweenImageLabels = headlineBody.leadingAnchor.constraint(equalTo: imageView.trailingAnchor, constant: constraintBetweenImageLabelsConstant) constraintBetweenImageLabels?.isActive = true diff --git a/MVMCoreUI/Molecules/Items/StackItemModel.swift b/MVMCoreUI/Molecules/Items/StackItemModel.swift index f296986e..9d193f17 100644 --- a/MVMCoreUI/Molecules/Items/StackItemModel.swift +++ b/MVMCoreUI/Molecules/Items/StackItemModel.swift @@ -8,7 +8,7 @@ import Foundation -@objcMembers public class StackItemModel: StackItemModelProtocol, MoleculeModelProtocol { +@objcMembers public class StackItemModel: ContainerModel, StackItemModelProtocol, MoleculeModelProtocol { public static var identifier: String = "simpleStackItem" public var backgroundColor: Color? public var spacing: CGFloat? diff --git a/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/HeadlineBodyLinkToggle.swift b/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/HeadlineBodyLinkToggle.swift index 7359ed3c..07639dbe 100644 --- a/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/HeadlineBodyLinkToggle.swift +++ b/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/HeadlineBodyLinkToggle.swift @@ -27,7 +27,7 @@ import UIKit headlineBodyLink.headlineBody.styleListItem() addSubview(headlineBodyLink) addSubview(toggle) - NSLayoutConstraint.pinSubviewsCenter(leftView: headlineBodyLink, rightView: toggle) + NSLayoutConstraint.pinViews(leftView: headlineBodyLink, rightView: toggle, alignTop: false) } // MARK: - MVMCoreUIMoleculeViewProtoco diff --git a/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/HeadlineBodyToggle.swift b/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/HeadlineBodyToggle.swift index 324d63da..8df94fa8 100644 --- a/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/HeadlineBodyToggle.swift +++ b/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/HeadlineBodyToggle.swift @@ -31,7 +31,7 @@ import UIKit view.addSubview(headlineBody) view.addSubview(toggle) - NSLayoutConstraint.pinSubviewsCenter(leftView: headlineBody, rightView: toggle) + NSLayoutConstraint.pinViews(leftView: headlineBody, rightView: toggle, alignTop: false) } // MARK:- ModelMoleculeViewProtocol diff --git a/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/LabelToggle.swift b/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/LabelToggle.swift index 3d00b820..f2925cc9 100644 --- a/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/LabelToggle.swift +++ b/MVMCoreUI/Molecules/LeftRightViews/ToggleMolecules/LabelToggle.swift @@ -28,7 +28,7 @@ import UIKit addSubview(label) addSubview(toggle) label.setContentHuggingPriority(UILayoutPriority.required, for: NSLayoutConstraint.Axis.vertical) - NSLayoutConstraint.pinSubviewsCenter(leftView: label, rightView: toggle) + NSLayoutConstraint.pinViews(leftView: label, rightView: toggle, alignTop: false) } // MARK:- ModelMoleculeViewProtocol