Segment Controller not scrolling properly

Question

I am trying to implement a method to where I have a tableviewcontroll that has a header where it shows a head picture as well as another section with the User's information and Profile picture. Below the head I want there to be a segment control like twitter that will allow a user to switch between different tableviews. I want that segment control to be below the header view so when a user pulls down, the segment control moves down with the header view, when you scroll up the segment control moves up with the headerview but then sticks below the navigation bar similar to how twitter and instagram's UI works. I have implemented the code below but I am getting an issue to when I scroll up, the segment controller doesn't move but when I pull down on the screen the segment control moves down with the header view. Any Idea why it is doing this?

Here is the code

class RandomTableViewController: UITableViewController {

    @IBOutlet weak var trackImage: UIImageView!

 private let tableHeaderViewHeight: CGFloat = 320.0
        private let tableHeaderViewCutAway: CGFloat = 0.1

        var headerView: HeaderView!
        var headerMaskLayer: CAShapeLayer!

        override func viewDidLoad() {
            super.viewDidLoad()

            self.automaticallyAdjustsScrollViewInsets = false

            tableView.estimatedSectionHeaderHeight = 40.0

            navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
            navigationController?.navigationBar.shadowImage = UIImage()



            tableView.tableFooterView = UIView()

            headerView = tableView.tableHeaderView as! HeaderView
//            headerView.imageView = trackImage
            tableView.tableHeaderView = nil
            tableView.addSubview(headerView)

            tableView.contentInset = UIEdgeInsets(top: tableHeaderViewHeight, left: 0, bottom: 0, right: 0)
            tableView.contentOffset = CGPoint(x: 0, y: -tableHeaderViewHeight + 64)

            //cut away header view
            headerMaskLayer = CAShapeLayer()
            headerMaskLayer.fillColor = UIColor.black.cgColor
            headerView.layer.mask = headerMaskLayer

            let effectiveHeight = tableHeaderViewHeight - tableHeaderViewCutAway/2
            tableView.contentInset = UIEdgeInsets(top: effectiveHeight, left: 0, bottom: 0, right: 0)
            tableView.contentOffset = CGPoint(x: 0, y: -effectiveHeight)

            updateHeaderView()
        }

        func updateHeaderView() {
            let effectiveHeight = tableHeaderViewHeight - tableHeaderViewCutAway/2
            var headerRect = CGRect(x: 0, y: -effectiveHeight, width: tableView.bounds.width, height: tableHeaderViewHeight)

            if tableView.contentOffset.y < -effectiveHeight {
                headerRect.origin.y = tableView.contentOffset.y
                headerRect.size.height = -tableView.contentOffset.y + tableHeaderViewCutAway/2
            }

            headerView.frame = headerRect

            let path = UIBezierPath()
            path.move(to: CGPoint(x: 0, y:0))
            path.addLine(to: CGPoint(x: headerRect.width, y: 0))
            path.addLine(to: CGPoint(x: headerRect.width, y: headerRect.height))
            path.addLine(to: CGPoint(x: 0, y: headerRect.height - tableHeaderViewCutAway))

            headerMaskLayer?.path = path.cgPath
        }

          override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
              self.tableView.decelerationRate = UIScrollView.DecelerationRate.fast
          }

          override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
              return UITableView.automaticDimension
          }



        @IBAction func backButton(_ sender: Any) {
            dismiss(animated: true, completion: nil)
        }

    }

    extension RandomTableViewController {



        override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
             let v = UIView()
            v.backgroundColor = .white
             let segmentedControl = UISegmentedControl(frame: CGRect(x: 10, y: 5, width: tableView.frame.width - 20, height: 30))
             segmentedControl.insertSegment(withTitle: "One", at: 0, animated: false)
             segmentedControl.insertSegment(withTitle: "Two", at: 1, animated: false)
             segmentedControl.insertSegment(withTitle: "Three", at: 2, animated: false)
             v.addSubview(segmentedControl)
             return v
        }



        override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            100

        }

        override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell: UITableViewCell! = tableView.dequeueReusableCell(withIdentifier: "CellID")
            cell.textLabel?.text = "\(indexPath.row)"
            return cell
        }


    }


    extension RandomTableViewController {
        override func scrollViewDidScroll(_ scrollView: UIScrollView) {
            updateHeaderView()
        }
    }

I have custom HeaderView code which is

import UIKit

class HeaderView: UIView {


    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var trackImage: UIImageView!
    @IBOutlet weak var backButton: UIButton!

}

Here is what it is doing

UPDATE:

I implemented the grouped tableview and setting the estimatedSectioHeaderHeight in the viewForSectionInHeader and now the segmented control moves up and down but it is not sticking below the navigation bar when scrolling up. Also there seems to be a formatting issue now. Here is how the simulator looks

Answer 1

change the table style to grouped and set height of the segment view in heightForHeaderInSection. Check whether it works.