Fix NavigationBar's title view constraints (#1891)

* Update titleView constraints to fit the nav bar * Rewrite the logic * Always update the title view contraints to fit * Rename titleview constraints function * Address comments * Silence constraints warning
microsoft · Sep 18, 2023 · bbf1959 · bbf1959
1 parent e524f32
commit bbf1959
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/ios/FluentUI/Navigation/NavigationBar.swift b/ios/FluentUI/Navigation/NavigationBar.swift
@@ -518,12 +518,11 @@ open class NavigationBar: UINavigationBar, TokenizedControlInternal, TwoLineTitl
 
     private func updateContentStackViewMargins(forExpandedContent contentIsExpanded: Bool) {
         let contentHeight = contentIsExpanded ? TokenSetType.expandedContentHeight : TokenSetType.normalContentHeight
-        let systemHeight = systemWantsCompactNavigationBar ? TokenSetType.compactSystemHeight : TokenSetType.systemHeight
 
         contentStackView.directionalLayoutMargins = NSDirectionalEdgeInsets(
             top: 0,
             leading: contentLeadingMargin,
-            bottom: systemHeight - contentHeight,
+            bottom: contentHeight - TokenSetType.systemHeight,
             trailing: contentTrailingMargin
         )
     }
@@ -571,7 +570,7 @@ open class NavigationBar: UINavigationBar, TokenizedControlInternal, TwoLineTitl
             updateElementSizes()
             updateContentStackViewMargins(forExpandedContent: contentIsExpanded)
             updateViewsForLargeTitlePresentation(for: topItem)
-            updateFakeCenterTitleConstraints()
+            updateTitleViewConstraints()
 
             // change bar button image size and title inset depending on device rotation
             if let navigationItem = topItem {
@@ -662,7 +661,7 @@ open class NavigationBar: UINavigationBar, TokenizedControlInternal, TwoLineTitl
 
         titleView.update(with: navigationItem)
 
-        updateFakeCenterTitleConstraints()
+        updateTitleViewConstraints()
 
         if navigationItem.backButtonTitle == nil {
             navigationItem.backButtonTitle = ""
@@ -872,19 +871,19 @@ open class NavigationBar: UINavigationBar, TokenizedControlInternal, TwoLineTitl
         updateShadow(for: navigationItem)
     }
 
-    private func updateFakeCenterTitleConstraints() {
+    private func updateTitleViewConstraints() {
         titleViewConstraint?.isActive = false
 
-        let newTitleViewConstraint: NSLayoutConstraint
-        if !usesLeadingTitle && systemWantsCompactNavigationBar {
-            // If we're drawing our own system-style bar above the OS bar, align our title with the OS's
-            newTitleViewConstraint = titleView.centerXAnchor.constraint(equalTo: centerXAnchor)
-        } else {
-            // Otherwise, keep `self.titleView` leading-justified
-            newTitleViewConstraint = preTitleSpacerView.widthAnchor.constraint(equalToConstant: 0)
-        }
-        titleViewConstraint = newTitleViewConstraint
-        newTitleViewConstraint.isActive = true
+        let bottomConstraint = titleView.bottomAnchor.constraint(equalTo: bottomAnchor)
+
+        // We lower the priority of this constraint to avoid breaking auto-layout's generated constraints
+        // when the navigation bar is hidden.
+        bottomConstraint.priority = .defaultHigh
+
+        preTitleSpacerView.isHidden = usesLeadingTitle
+
+        bottomConstraint.isActive = true
+        titleViewConstraint = bottomConstraint
     }
 
     private func updateShadow(for navigationItem: UINavigationItem?) {

diff --git a/ios/FluentUI/TwoLineTitleView/TwoLineTitleView.swift b/ios/FluentUI/TwoLineTitleView/TwoLineTitleView.swift
@@ -213,10 +213,15 @@ open class TwoLineTitleView: UIView, TokenizedControlInternal {
         addSubview(containingStackView)
         containingStackView.translatesAutoresizingMaskIntoConstraints = false
 
+        // We lower the priority of the height constraint to allow auto-layout to fit the
+        // TwoLineTitleView vertically as needed when used in the NavigationBar.
+        let heightConstraint = heightAnchor.constraint(greaterThanOrEqualToConstant: TokenSetType.minimumTouchSize.height)
+        heightConstraint.priority = .defaultHigh
+
         NSLayoutConstraint.activate([
             // Ensure minimum touch size
             widthAnchor.constraint(greaterThanOrEqualToConstant: TokenSetType.minimumTouchSize.width),
-            heightAnchor.constraint(greaterThanOrEqualToConstant: TokenSetType.minimumTouchSize.height),
+            heightConstraint,
             // Contain and center containingStackView within ourself
             centerXAnchor.constraint(equalTo: containingStackView.centerXAnchor),
             centerYAnchor.constraint(equalTo: containingStackView.centerYAnchor),