Custom Tab Bar Menu with horizontal swipe - swift

Question

Just a quick question regarding implementation.
I am trying to recreate this:
https://i.imgur.com/lFXKFXl.mp4
I am wondering if I have to do it from scratch using a UICollectionView, there's a built-in Xcode method, or there is a library online somewhere.
Note: I am not trying to create a tab bar menu at the bottom, but rather at the top underneath the navigation controller navbar with horizontal swipe features. Instagram also has this underneath the search tab.
Thank you!

Answer 1

You can animate your blue bar in following way
func scrollViewDidScroll(_ scrollView: UIScrollView) {
blueBarViewLeadingConstraint.constant = scrollView.contentOffset.x / (scrollView.bounds.width / (TabBarView.frame.size.width / numberOfTab))
}

Answer 2

You can use a UIScrollView and add child viewcontrollers to it. I made an extension to UIViewController that easily allows you to create a swipe view.
extension UIViewController {
public func addViewControllerToContainer(viewController: UIViewController, count: CGFloat = 0, container: UIScrollView, heightDecrease: CGFloat = 0, startIndex: CGFloat = 0) {
let multiplier: CGFloat = count
addChildViewController(viewController)
container.addSubview(viewController.view)
container.contentSize.width += viewController.view.frame.width
container.contentSize.height = viewController.view.frame.height - heightDecrease
container.frame = CGRect(x: viewController.view.frame.origin.x, y: viewController.view.frame.origin.y, width: viewController.view.frame.width, height: viewController.view.frame.height - heightDecrease)
container.frame.origin.y += heightDecrease
container.contentOffset.x = container.frame.width * startIndex
viewController.view.frame.size.width = container.frame.width
viewController.view.frame.size.height = container.frame.height
viewController.view.frame.size.height -= heightDecrease
viewController.view.frame.origin.x = container.frame.width * multiplier
}
public func addViewControllersToContainer(viewControllers: [UIViewController], container: UIScrollView, heightDecrease: CGFloat = 0, startIndex: CGFloat) {
var count: CGFloat = 0
for viewController in viewControllers {
addViewControllerToContainer(viewController: viewController, count: count, container: container, heightDecrease: heightDecrease, startIndex: startIndex)
count += 1
}
}
}
class MainSwipeViewController: UIViewController {
let viewControllers: [UIViewController] = [VC1, VC2, VC3] // view controllers swiped between
let startIndex: CGFloat = 0 // which viewController to begin at (0 means first)
let mainScrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.backgroundColor = .lightGray
scrollView.isPagingEnabled = true
scrollView.showsHorizontalScrollIndicator = false
scrollView.bounces = false
scrollView.contentInsetAdjustmentBehavior = .never
scrollView.backgroundColor = UIColor.clear
return scrollView
}()
private func addViewControllers(_ vc: UIViewController, viewControllers: [UIViewController], startIndex: CGFloat = 0) {
view.addSubview(mainScrollView)
addViewControllersToContainer(viewControllers: viewControllers, container: mainScrollView, startIndex: startIndex)
}
override func viewDidLoad() {
super.viewDidLoad()
addViewControllers(self, viewControllers: viewControllers, startIndex: startIndex)
}
}
As for the tabbar menu, you can easily create that by implementing UIScrollViewDelegate in MainSwipeViewController
extension MainSwipeViewController: UIScrollViewDelegate {
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let contentOffset = scrollView.contentOffset.x / view.frame.width
}
}
contentOffset is the interval of your swipe and increases by one everytime you swipe. This will help you animate the blue bar in your menu.