[fluentui-apple] Have resizingHandleView overlap content in BottomSheetController (#2236)

* add shouldGrabberOverlayContent option

* remove constants

* renaming

* fixing nit

* make resizingHandleView subview of bottomSheetContentView

* remove toggleResizingViewOverlayContent

* Resizing handle overlay updates

---------

Co-authored-by: Veronica Salas <veronicasalas@Veronicas-MacBook-Pro.local>
Co-authored-by: vsalas <vsalas@microsoft.com>
Co-authored-by: Lukas Capkovic <lucapkov@microsoft.com>

Author: 4 people

Demos/FluentUIDemo_iOS/FluentUI.Demo/Demos/BottomSheetDemoController.swift

@@ -103,6 +103,10 @@ class BottomSheetDemoController: DemoController {
         bottomSheetViewController?.preferredWidth = sender.isOn ? 400 : 0
     }
 
+    @objc private func toggleResizingHandleOverlayContent(_ sender: BooleanCell) {
+        bottomSheetViewController?.shouldResizingHandleOverlayContent = sender.isOn
+    }
+
     @objc private func showTransientSheet() {
         let hostingVC = UIHostingController(rootView: BottomSheetDemoListContentView())
 
@@ -275,7 +279,11 @@ class BottomSheetDemoController: DemoController {
                 DemoItem(title: "Set preferred width to 400",
                           type: .boolean,
                         action: #selector(togglePreferredWidth),
-                          isOn: bottomSheetViewController?.preferredWidth == 400)
+                          isOn: bottomSheetViewController?.preferredWidth == 400),
+                DemoItem(title: "Resizing handle overlaps content",
+                          type: .boolean,
+                        action: #selector(toggleResizingHandleOverlayContent),
+                          isOn: bottomSheetViewController?.shouldResizingHandleOverlayContent ?? false)
             ],
             [
                 DemoItem(title: "Show transient sheet", type: .action, action: #selector(showTransientSheet))

Sources/FluentUI_iOS/Components/BottomSheet/BottomSheetController.swift

@@ -129,6 +129,7 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
 #if DEBUG
                 bottomSheetView.accessibilityIdentifier = bottomSheetViewAccessibilityIdentifierForState()
 #endif
+                updateSheetContentOffset()
             }
         }
     }
@@ -296,6 +297,19 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
     /// When enabled, users will be able to move the sheet to the hidden state by swiping down.
     @objc open var allowsSwipeToHide: Bool = false
 
+    /// Indicates whether the resizing handle should overlay the content.
+    ///
+    /// The default value is false.
+    @objc open var shouldResizingHandleOverlayContent: Bool = false {
+        didSet {
+            guard shouldResizingHandleOverlayContent != oldValue && isViewLoaded else {
+                return
+            }
+            updateSheetContentOffset()
+            view.setNeedsLayout()
+        }
+    }
+
     /// Current height of the portion of a collapsed sheet that's in the safe area.
     @objc public private(set) var collapsedHeightInSafeArea: CGFloat = 0 {
         didSet {
@@ -459,9 +473,9 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
     // |--dimmingView (spans self.view)
     // |--bottomSheetView (sheet shadow)
     // |  |--UIStackView (round corner mask)
-    // |  |  |--resizingHandleView
     // |  |  |--headerContentView
     // |  |  |--expandedContentView
+    // |  |--resizingHandleView
     // |--overflowView
     public override func loadView() {
         view = BottomSheetPassthroughView()
@@ -671,7 +685,7 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
         bottomSheetContentView.addGestureRecognizer(panGestureRecognizer)
         panGestureRecognizer.delegate = self
 
-        let stackView = UIStackView(arrangedSubviews: [resizingHandleView])
+        let stackView = UIStackView(arrangedSubviews: [])
         stackView.spacing = 0.0
         stackView.axis = .vertical
         stackView.translatesAutoresizingMaskIntoConstraints = false
@@ -688,14 +702,20 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
         stackView.addArrangedSubview(expandedContentView)
         bottomSheetContentView.accessibilityElements?.append(expandedContentView)
         bottomSheetContentView.addSubview(stackView)
+        bottomSheetContentView.addSubview(resizingHandleView)
 
+        let stackTopConstraint = stackView.topAnchor.constraint(equalTo: bottomSheetContentView.topAnchor)
         NSLayoutConstraint.activate([
-            stackView.topAnchor.constraint(equalTo: bottomSheetContentView.topAnchor),
+            resizingHandleView.topAnchor.constraint(equalTo: bottomSheetContentView.topAnchor),
+            stackTopConstraint,
             stackView.leadingAnchor.constraint(equalTo: bottomSheetContentView.leadingAnchor),
             stackView.trailingAnchor.constraint(equalTo: bottomSheetContentView.trailingAnchor),
-            stackView.bottomAnchor.constraint(equalTo: bottomSheetContentView.bottomAnchor)
+            stackView.bottomAnchor.constraint(equalTo: bottomSheetContentView.bottomAnchor),
         ])
 
+        sheetContentTopConstraint = stackTopConstraint
+        updateSheetContentOffset()
+
         return makeBottomSheetByEmbedding(contentView: bottomSheetContentView)
     }()
 
@@ -794,6 +814,10 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
         }
     }
 
+    private func updateSheetContentOffset() {
+        sheetContentTopConstraint?.constant = effectiveResizingHandleHeight
+    }
+
     private func nextExpansionStateForResizingHandleTap(with currentExpansionState: BottomSheetExpansionState) -> BottomSheetExpansionState? {
         return switch currentExpansionState {
         case .collapsed:
@@ -1274,7 +1298,7 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
         if preferredExpandedContentHeight == 0 {
             height = maxSheetHeight
         } else {
-            let idealHeight = currentResizingHandleHeight + headerContentHeight + preferredExpandedContentHeight + view.safeAreaInsets.bottom
+            let idealHeight = effectiveResizingHandleHeight + headerContentHeight + preferredExpandedContentHeight + view.safeAreaInsets.bottom
             height = min(maxSheetHeight, idealHeight)
         }
 
@@ -1289,9 +1313,9 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
         if let dynamicHeight = resolvedDynamicSheetHeights?.collapsedHeight, dynamicHeight > 0 {
             safeAreaSheetHeight = dynamicHeight
         } else if collapsedContentHeight > 0 {
-            safeAreaSheetHeight = collapsedContentHeight + currentResizingHandleHeight
+            safeAreaSheetHeight = collapsedContentHeight + effectiveResizingHandleHeight
         } else {
-            safeAreaSheetHeight = headerContentHeight + currentResizingHandleHeight
+            safeAreaSheetHeight = headerContentHeight + effectiveResizingHandleHeight
         }
 
         let idealHeight = safeAreaSheetHeight + view.safeAreaInsets.bottom
@@ -1329,8 +1353,12 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
     // Do not access directly. Use `resolvedDynamicSheetHeights` instead which wraps this cache.
     private var cachedResolvedDynamicSheetHeights: DynamicHeightResolutionResult?
 
-    private var currentResizingHandleHeight: CGFloat {
-        (isExpandable ? ResizingHandleView.height : 0.0)
+    // Effective height of the resizing handle for layout purposes.
+    // Accounts for:
+    // - when the sheet is not expandable (resizing handle doesn't show, so 0 height)
+    // - when the resizing handle overlaps content - effective height is also 0
+    private var effectiveResizingHandleHeight: CGFloat {
+        (isExpandable && !shouldResizingHandleOverlayContent ? ResizingHandleView.height : 0.0)
     }
 
     private lazy var panGestureRecognizer: UIPanGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handlePan))
@@ -1365,6 +1393,8 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
 
     private let style: BottomSheetControllerStyle
 
+    private var sheetContentTopConstraint: NSLayoutConstraint?
+
     // Dynamic heights, resolved with the corresponding context.
     private typealias DynamicHeightResolutionResult = (context: ContentHeightResolutionContext, collapsedHeight: CGFloat?, partialHeight: CGFloat?)