ScrollView and little horizontal bar under menu items? - ios

Question

I have a horizontal bar view under my menu items and whenever I tap one of the menu items it appears under that item. I have named it movingView inside my code. Here is a screenshot:
And under that menu I have a UIScrollView. I have placed 5 views inside that UIScrollView and I am able to swipe between them. Now whenever I swipe, I want that horizontal bar view under my menu item follow my selection. For example when I tap pistol, it moves from rifle to pistol. I want that to happen when I swipe from first page to second inside the UIScrollView.
Please someone help me. It's been 3 days and I couldn't figure out how to do this.
MY CODE:
class TabViewController: UIViewController
{
#IBOutlet var scrollView: UIScrollView!
#IBOutlet var buttons: [UIButton]!
#IBOutlet var backgroundView: UIImageView!
var movingView = UIView()
let screenWidth = UIScreen.main.bounds.width
var rifleViewController: UIViewController!
var pistolViewController: UIViewController!
var shotgunViewController: UIViewController!
var smgsViewController: UIViewController!
var sniperViewController: UIViewController!
override func viewDidLoad()
{
super.viewDidLoad()
let main = UIStoryboard(name: "Main", bundle: nil)
rifleViewController = main.instantiateViewController(withIdentifier: "rifles")
sniperViewController = main.instantiateViewController(withIdentifier: "snipers")
smgsViewController = main.instantiateViewController(withIdentifier: "smgss")
shotgunViewController = main.instantiateViewController(withIdentifier: "shotguns")
pistolViewController = main.instantiateViewController(withIdentifier: "pistols")
self.scrollView.contentSize = CGSize(width: self.view.frame.width * 5, height: self.view.frame.height)
rifleViewController.view.frame = scrollView.bounds
scrollView.addSubview(rifleViewController.view)
pistolViewController.view.frame = scrollView.bounds
pistolViewController.view.frame.origin.x = scrollView.frame.size.width
scrollView.addSubview(pistolViewController.view)
shotgunViewController.view.frame = scrollView.bounds
shotgunViewController.view.frame.origin.x = scrollView.frame.size.width * 2
scrollView.addSubview(shotgunViewController.view)
smgsViewController.view.frame = scrollView.bounds
smgsViewController.view.frame.origin.x = scrollView.frame.size.width * 3
scrollView.addSubview(smgsViewController.view)
sniperViewController.view.frame = scrollView.bounds
sniperViewController.view.frame.origin.x = scrollView.frame.size.width * 4
scrollView.addSubview(sniperViewController.view)
movingView = UIView(frame: CGRect(x: 0, y: backgroundView.frame.maxY - 5, width: screenWidth / 5, height: 10))
movingView.backgroundColor = UIColor.white
backgroundView.addSubview(movingView)
}
override func didReceiveMemoryWarning()
{
super.didReceiveMemoryWarning()
}
#IBAction func riflePressTab(_ sender: Any)
{
scrollView.setContentOffset(CGPoint(x: 0, y: 0) , animated: true)
}
#IBAction func pistolPressTab(_ sender: Any)
{
scrollView.setContentOffset(CGPoint(x: scrollView.frame.size.width, y: 0) , animated: true)
}
#IBAction func shotgunPressTab(_ sender: Any)
{
scrollView.setContentOffset(CGPoint(x: scrollView.frame.size.width * 2, y: 0) , animated: true)
}
#IBAction func smgsPressTab(_ sender: Any)
{
scrollView.setContentOffset(CGPoint(x: scrollView.frame.size.width * 3, y: 0) , animated: true)
}
#IBAction func sniperPressTab(_ sender: Any)
{
scrollView.setContentOffset(CGPoint(x: scrollView.frame.size.width * 4, y: 0) , animated: true)
}
#IBAction func didPressTab(_ sender: UIButton)
{
let newx = sender.frame.origin.x
UIView.animate(withDuration: 0.2)
{
self.movingView.frame.origin.x = newx
}
}
}
I have tried this but when i run my app, nothing happens when i scroll
func scrollViewDidScroll(_ scrollView: UIScrollView) {
//Assuming your views are of full screen width or just change the SCREEN_WIDTH to whatever width your views occupy
//This will give you which index you are on, i.e you are showing the first view or second or third
let newIndex = scrollView.contentOffset.x/UIScreen.main.bounds.size.width;
animateUnderBar(forIndex index:Int(newIndex))
}
func animateUnderBar(forIndex index:Int){
let newx = self.movingView.frame.origin.x + CGFloat(index) * self.movingView.bounds.size.width
UIView.animate(withDuration: 0.2)
{
self.movingView.frame.origin.x = newx
}
}

Answer 1

Make your class conform to the UIScrollViewDelegate and implement the following method-
func scrollViewDidScroll(_ scrollView: UIScrollView) {
//Assuming your views are of full screen width or just change the SCREEN_WIDTH to whatever width your views occupy
//This will give you which index you are on, i.e you are showing the first view or second or third
let newIndex = scrollView.contentOffset.x/UIScreen.main.bounds.size.width;
animateUnderBar(forIndex :Int(newIndex))
}
func animateUnderBar(forIndex index:Int){
let newx = view.frame.origin.x + CGFloat(index) * view.bounds.size.width
UIView.animate(withDuration: 0.2)
{
self.movingView.frame.origin.x = newx
}
}
}
Alternatively
You should use a UICollectionView instead of a UIScrollView as it will automatically handle displaying of views inside of cells without you having to manually set contentOffSet. Moving under bar will also be easier as it will simply be a matter of using the indexPath.item property to move the under bar.