Fixed vertical scrolling of tabs within horizontal container and tab bar width calculation.

Author: bchrobot

CHANGELOG.md

@@ -17,9 +17,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Changed
 - Updated copyright notices.
+- TabBar bottom border is now drawn rather than it's own subview.
 
 ### Fixed
 - Vertical scrolling of tabs within horizontal container.
+- Tab bar width calculation.
 
 ## 0.0.1 - 2017-09-21
 ### Added

README.md

@@ -20,6 +20,19 @@ it, simply add the following line to your Podfile:
 pod 'StickyHeaderTabController'
 ```
 
+## Usage
+
+### StickyHeaderView
+- width is set by `StickyHeaderTabController`
+- height should be set by you
+    - must not have priority >= 700 in order for stretch on vertical bounce to work.
+    - be careful of compression resistance of subviews, especially imageviews.
+
+### StickyHeroView
+- width is set by `StickyHeaderTabController`
+- height should be set by you
+    - must not have any priorities lower than 250.
+
 ## Author
 
 Benjamin Chrobot, [email protected]

StickyHeaderTabController/Classes/StickyHeaderTabController.swift

@@ -134,6 +134,9 @@ open class StickyHeaderTabController: UIViewController {
 
         // Must be called first to sync scrollViews
         updateCompoundHeaderHeight()
+
+        // Correct layering of header and hero
+        updateStickyViewLayering()
     }
 
     private func setUpScrollView() {
@@ -236,7 +239,7 @@ open class StickyHeaderTabController: UIViewController {
 
     private func setTabBarConstraints() {
         let tabBarTopConstraint = tabBar.topAnchor.constraint(equalTo: hero.bottomAnchor)
-        tabBarTopConstraint.priority = 500.0
+        tabBarTopConstraint.priority = 250.0
         tabBarTopConstraint.isActive = true
 
         let tabBarPinnedConstraint =
@@ -297,11 +300,9 @@ open class StickyHeaderTabController: UIViewController {
         newHeaderHeight += tabBar.bounds.height
 
         compoundHeaderHeight = newHeaderHeight
-
-        updateStickyFrames()
     }
 
-    private func updateStickyFrames() {
+    private func updateStickyViewLayering() {
         let currentYOffset: CGFloat = -trueScrollOffset
 
         // Pin header to top
@@ -320,8 +321,6 @@ open class StickyHeaderTabController: UIViewController {
             // Ensure hero is on top
             view.exchangeSubview(at: headerIndex, withSubviewAt: heroIndex)
         }
-
-        stickyGuideTopConstraint?.constant = currentYOffset
     }
 
     /// Update the content inset + offset of all tabs for a change in compound header height.
@@ -333,7 +332,9 @@ open class StickyHeaderTabController: UIViewController {
 
     /// Very much a WIP menthod.
     fileprivate func handleVerticalScroll() {
-        updateStickyFrames()
+        updateStickyViewLayering()
+
+        stickyGuideTopConstraint?.constant = -trueScrollOffset
 
         let offsetY = trueScrollOffset - compoundHeaderHeight
         for tab in tabs {
@@ -375,7 +376,8 @@ open class StickyHeaderTabController: UIViewController {
         }
 
         var doesNeedUpdate = false
-        if stickyHeader.bounds.height != lastHeaderHeight {
+        let isBouncing = trueScrollOffset < 0
+        if stickyHeader.bounds.height != lastHeaderHeight && !isBouncing {
             doesNeedUpdate = true
 
             heroTopOffsetConstraint.constant = stickyHeader.bounds.height

StickyHeaderTabController/Classes/Views/StickyHeaderTabBarView.swift

@@ -26,17 +26,14 @@ open class StickyHeaderTabBarView: UICollectionView {
     public weak var tabDataSource: StickyHeaderTabBarViewDataSource?
 
     public var bottomBorderColor: UIColor? {
-        get {
-            return bottomBorder.backgroundColor
-        }
-        set {
-            bottomBorder.backgroundColor = newValue
+        didSet {
+            setNeedsDisplay()
         }
     }
 
     public var bottomBorderWidth: CGFloat = 1.0 {
         didSet {
-            setNeedsLayout()
+            setNeedsDisplay()
         }
     }
 
@@ -47,8 +44,6 @@ open class StickyHeaderTabBarView: UICollectionView {
 
     private let flowLayout = UICollectionViewFlowLayout()
 
-    private let bottomBorder = UIView()
-
     // MARK: - Initialization
 
     public init(frame: CGRect) {
@@ -72,7 +67,6 @@ open class StickyHeaderTabBarView: UICollectionView {
 
         setUpCollectionView()
         setUpFlowLayout()
-        setUpBottomBorder()
     }
 
     private func setUpCollectionView() {
@@ -97,12 +91,6 @@ open class StickyHeaderTabBarView: UICollectionView {
                                                right: cellSpacing)
     }
 
-    private func setUpBottomBorder() {
-        addSubview(bottomBorder)
-        bottomBorderWidth = 2.0
-        bottomBorderColor = UIColor(white: 0.92, alpha: 1.0)
-    }
-
     // MARK: - Open Methods
 
     open func registerCellForReuse() {
@@ -117,21 +105,23 @@ open class StickyHeaderTabBarView: UICollectionView {
         selectItem(at: newIndexPath, animated: animated, scrollPosition: .bottom)
     }
 
-    // MARK: - Private Methods
+    // MARK: - Override
 
-    private func updateBottomBorderFrame() {
-        bottomBorder.frame = CGRect(x: 0,
-                                    y: bounds.height - bottomBorderWidth,
-                                    width: bounds.width,
-                                    height: bottomBorderWidth)
-    }
+    open override func draw(_ rect: CGRect) {
+        guard let borderColor = bottomBorderColor, bottomBorderWidth > 0 else {
+            super.draw(rect)
 
-    // MARK: - Override
+            return
+        }
 
-    override open func layoutSubviews() {
-        super.layoutSubviews()
+        let borderRect = CGRect(x: 0,
+                                y: rect.height - bottomBorderWidth,
+                                width: rect.width,
+                                height: rect.width)
+        let borderPath = UIBezierPath(rect: borderRect)
 
-        updateBottomBorderFrame()
+        borderColor.set()
+        borderPath.fill()
     }
 }
 
@@ -178,7 +168,8 @@ extension StickyHeaderTabBarView: UICollectionViewDelegateFlowLayout {
         let naturalWidth = StickyHeaderTabBarViewCell.cellSize(for: text).width
 
         let numberOfTabs = CGFloat(collectionView.numberOfItems(inSection: 0))
-        let viewSizeWidth = (collectionView.bounds.width - (2.0 * cellSpacing)) / numberOfTabs
+        let spacingSumSize = CGFloat(numberOfTabs + 1) * cellSpacing
+        let viewSizeWidth = (collectionView.bounds.width - spacingSumSize) / numberOfTabs
 
         let width = max(naturalWidth, viewSizeWidth)