[Issue-7] Adjust sheet header appearance

Author: Mark Pospesel

Sources/YBottomSheet/BottomSheetController.swift

@@ -21,6 +21,7 @@ public class BottomSheetController: UIViewController {
     private let minimumTopOffset: CGFloat = 44
     private let minimumContentHeight: CGFloat = 88
     private var topAnchor: NSLayoutConstraint?
+    private var indicatorTopAnchor: NSLayoutConstraint?
     private var childHeightAnchor: NSLayoutConstraint?
     private var panGesture: UIPanGestureRecognizer?
     internal lazy var lastYOffset: CGFloat = {
@@ -50,6 +51,8 @@ public class BottomSheetController: UIViewController {
     }()
     /// Bottom sheet drag indicator view.
     public private(set) var indicatorView: DragIndicatorView!
+    /// Container view for the drag indicator.
+    internal let indicatorContainer = UIView()
     /// Bottom sheet header view.
     public private(set) var headerView: SheetHeaderView!
     /// Holds the sheet's child content (view or view controller).
@@ -167,6 +170,8 @@ private extension BottomSheetController {
         contentView.addSubview(subview)
         subview.constrainEdges()
         indicatorView = DragIndicatorView(appearance: appearance.indicatorAppearance ?? .default)
+        indicatorContainer.addSubview(indicatorView)
+
         headerView = SheetHeaderView(title: title, appearance: appearance.headerAppearance ?? .default)
         headerView.delegate = self
         buildSheet()
@@ -190,7 +195,7 @@ private extension BottomSheetController {
         view.addSubview(dimmerView)
         view.addSubview(sheetView)
         sheetView.addSubview(stackView)
-        stackView.addArrangedSubview(indicatorView)
+        stackView.addArrangedSubview(indicatorContainer)
         stackView.addArrangedSubview(headerView)
         stackView.addArrangedSubview(contentView)
     }
@@ -206,11 +211,14 @@ private extension BottomSheetController {
             constant: minimumTopOffset
         )
 
-        stackView.constrain(
+        indicatorView.constrain(.bottomAnchor, to: indicatorContainer.bottomAnchor)
+        indicatorTopAnchor = indicatorView.constrain(
             .topAnchor,
-            to: sheetView.topAnchor,
-            constant: appearance.layout.cornerRadius - (appearance.indicatorAppearance?.layout.size.height ?? 0)
+            to: indicatorContainer.topAnchor
         )
+        indicatorView.constrainCenter(.x)
+
+        stackView.constrain(.topAnchor, to: sheetView.topAnchor)
         stackView.constrainEdges(.horizontal, to: view.safeAreaLayoutGuide)
         stackView.constrainEdges(.bottom, to: view.safeAreaLayoutGuide, relatedBy: .greaterThanOrEqual)
         stackView.constrainEdges(.bottom, to: view.safeAreaLayoutGuide, priority: Priorities.sheetContentHugging)
@@ -230,9 +238,10 @@ private extension BottomSheetController {
     }
 
     func updateIndicatorView() {
-        indicatorView.isHidden = !isResizable
+        indicatorContainer.isHidden = !isResizable
         if let indicatorAppearance = appearance.indicatorAppearance {
             indicatorView.appearance = indicatorAppearance
+            indicatorTopAnchor?.constant = indicatorAppearance.layout.topInset
             if panGesture == nil {
                 let pan = UIPanGestureRecognizer()
                 pan.addTarget(self, action: #selector(handlePan))

Sources/YBottomSheet/DragIndicatorView/DragIndicatorView.Appearance+Layout.swift

@@ -15,20 +15,24 @@ extension DragIndicatorView.Appearance {
         public var cornerRadius: CGFloat
         /// Size for the drag indicator. Default is {60, 4}.
         public var size: CGSize
-        
+        /// Inset of indicator from top of sheet. Default is `8.0`
+        public var topInset: CGFloat
         /// Default layout.
-        public static var `default` = Layout(cornerRadius: 2.0, size: CGSize(width: 60, height: 4))
+        public static var `default` = Layout()
 
         /// Initializes a `Layout`.
         /// - Parameters:
         ///   - cornerRadius: corner radius of drag indicator.
         ///   - size: size for the drag indicator.
+        ///   - topInset: inset of indicator from top of sheet.
         public init(
-            cornerRadius: CGFloat,
-            size: CGSize
+            cornerRadius: CGFloat = 2,
+            size: CGSize = CGSize(width: 60, height: 4),
+            topInset: CGFloat = 8
         ) {
             self.cornerRadius = cornerRadius
             self.size = size
+            self.topInset = topInset
         }
     }
 }

Tests/YBottomSheetTests/BottomSheetControllerTests.swift

@@ -61,7 +61,7 @@ final class BottomSheetControllerTests: XCTestCase {
         XCTAssertFalse(sut.isResizable)
         XCTAssertFalse(sut.hasHeader)
         XCTAssertTrue(sut.headerView.isHidden)
-        XCTAssertTrue(sut.indicatorView.isHidden)
+        XCTAssertTrue(sut.indicatorContainer.isHidden)
         XCTAssertEqual(sut.appearance.layout.cornerRadius, radius)
         XCTAssertEqual(sut.dimmerView.backgroundColor, appearance.dimmerColor)
     }
@@ -127,7 +127,7 @@ final class BottomSheetControllerTests: XCTestCase {
             indicatorAppearance: nil
         )
 
-        XCTAssertTrue(sut.indicatorView.isHidden)
+        XCTAssertTrue(sut.indicatorContainer.isHidden)
         XCTAssertFalse(sut.isResizable)
     }
 

Tests/YBottomSheetTests/DragIndicatorView/DragIndicatorViewAppearanceLayoutTests.swift

@@ -14,14 +14,17 @@ final class DragIndicatorViewAppearanceLayoutTests: XCTestCase {
         let sut = DragIndicatorView.Appearance.Layout.default
         XCTAssertEqual(sut.cornerRadius, 2)
         XCTAssertEqual(sut.size, CGSize(width: 60, height: 4))
+        XCTAssertEqual(sut.topInset, 8)
     }
 
-    func test_propertiesWithRandomValues() {
+    func test_propertiesWithCustomValues() {
         let sut = DragIndicatorView.Appearance.Layout(
             cornerRadius: 8,
-            size: CGSize(width: 100, height: 16)
+            size: CGSize(width: 100, height: 16),
+            topInset: 24
         )
         XCTAssertEqual(sut.cornerRadius, 8)
         XCTAssertEqual(sut.size, CGSize(width: 100, height: 16))
+        XCTAssertEqual(sut.topInset, 24)
     }
 }

Tests/YBottomSheetTests/DragIndicatorView/DragIndicatorViewTests.swift

@@ -22,23 +22,26 @@ final class DragIndicatorViewTests: XCTestCase {
         XCTAssertEqual(sut.appearance.color, .tertiaryLabel)
         XCTAssertEqual(sut.appearance.layout.cornerRadius, 2)
         XCTAssertEqual(sut.appearance.layout.size, CGSize(width: 60, height: 4))
+        XCTAssertEqual(sut.appearance.layout.topInset, 8)
         XCTAssertEqual(sut.intrinsicContentSize, CGSize(width: 60, height: 4))
     }
 
-    func test_init_withRandomValues() {
+    func test_init_withCustomValues() {
         let size = CGSize(width: 100, height: 20)
         let appearance = DragIndicatorView.Appearance(
             color: .red,
             layout: DragIndicatorView.Appearance.Layout(
                 cornerRadius: 10,
-                size: size
+                size: size,
+                topInset: 12
             )
         )
         let sut = makeSUT(appearance: appearance)
         XCTAssertNotNil(sut)
         XCTAssertEqual(sut.appearance.color, .red)
         XCTAssertEqual(sut.appearance.layout.cornerRadius, 10)
         XCTAssertEqual(sut.appearance.layout.size, size)
+        XCTAssertEqual(sut.appearance.layout.topInset, 12)
         XCTAssertEqual(sut.intrinsicContentSize, size)
     }
 
@@ -57,16 +60,18 @@ final class DragIndicatorViewTests: XCTestCase {
         let sut = makeSUT()
         let size = CGSize(width: 100, height: 8)
         let radius: CGFloat = 4
+        let topInset: CGFloat = 10
 
         XCTAssertNotEqual(sut.appearance.layout.cornerRadius, radius)
         XCTAssertNotEqual(sut.appearance.layout.size, size)
 
         sut.appearance = DragIndicatorView.Appearance(
-            layout: DragIndicatorView.Appearance.Layout(cornerRadius: radius, size: size)
+            layout: DragIndicatorView.Appearance.Layout(cornerRadius: radius, size: size, topInset: 10)
         )
 
         XCTAssertEqual(sut.appearance.layout.cornerRadius, radius)
         XCTAssertEqual(sut.appearance.layout.size, size)
+        XCTAssertEqual(sut.appearance.layout.topInset, topInset)
     }
 }