菜单项下的ScrollView和小横条?

时间:2016-11-26 10:24:20

标签: ios swift uiscrollview

我的菜单项下有一个水平条形视图,每当我点击该项目下显示的其中一个菜单项时。我在代码中将其命名为movingView。这是一个截图:

Here is a screenshot

在该菜单下,我有一个UIScrollView。我在UIScrollView内放置了5个视图,我可以在它们之间滑动。现在每当我滑动时,我都希望菜单项下的水平条视图遵循我的选择。例如,当我点击手枪时,它从步枪移动到手枪。我想在UIScrollView内从第一页翻到第二页时发生这种情况。

请有人帮助我。已经3天了,我无法弄清楚如何做到这一点。

我的代码:

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
            }
        }
}

我试过这个但是当我运行我的应用程序时,滚动时没有任何反应

 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
    }
}

1 个答案:

答案 0 :(得分:0)

让您的课程符合UIScrollViewDelegate并实施以下方法 -

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
        }
    }
}

<强>替代地

您应该使用UICollectionView代替UIScrollView,因为它会自动处理单元格内部的视图显示,而您无需手动设置contentOffSet。在条形下移动也会更容易,因为它只是使用indexPath.item属性来移动下栏。