带有AutoLayout的SideMenu

时间:2018-03-28 12:56:22

标签: ios swift autolayout side-menu

我正在尝试制作侧边菜单,并且在使用自动布局设置时遇到了一些问题。 我有一个rootViewController,我添加leftMenuVC作为childVC然后我设置约束。

class RootVC: UIViewController, NavigationBarDelegate {
    var leftMenuVC: UIViewController?
    var navigationBar = NavigationBar()
    var isMenuCollapsed = true

    override func viewDidLoad() {
        leftMenuVC = leftVC()
        addChildViewController(leftMenuVC!)
        view.addSubview(leftMenuVC!.view)
        leftMenuVC!.didMove(toParentViewController: self)
    }

    override func viewDidLayoutSubviews() {
        if let v = leftMenuVC?.view {
            v.translatesAutoresizingMaskIntoConstraints = false
            v.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
            v.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
            v.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -140).isActive = true
            v.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        }
    }

    func menuButtonClicked(){

    }
}

所以我的问题是如何更改约束以隐藏/显示支持方向的菜单

2 个答案:

答案 0 :(得分:0)

当我想隐藏屏幕外的视图时,我通常会做的是:

1设置所有约束,以便侧视可见(处于活动状态)

2继续参考将侧视贴在一侧(此处为左侧)的约束

leftAnchor = NSLayoutConstraint(item: v, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1, constant: 0)
view.addConstraint(leftAnchor)
view.addConstraint(NSLayoutConstraint(item: v, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1, constant: 0))
view.addConstraint(NSLayoutConstraint(item: v, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: 0))
view.addConstraint(NSLayoutConstraint(item: v, attribute: .width, relatedBy: .equal, toItem: view, attribute: .width, multiplier: 0.6, constant: 0))

3再设置一个约束,以便隐藏视图。通常它就是这样的。请注意,优先级设置为999以避免约束冲突。

var hiddingConstraint = NSLayoutConstraint(item: v, attribute: .right, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1, constant: 0)
hiddingConstraint.priority = 999
view.addConstraint(hiddingConstraint)

4通过激活或不激活你的leftAnchor来动画

UIView.animate(withDuration: 0.3) {
       self.leftAnchor.active = false
       self.view.layoutIfNeeded()
}

所以你应该得到这样的代码:

class RootVC: UIViewController, NavigationBarDelegate {
    var leftMenuVC: UIViewController?
    var navigationBar = NavigationBar()
    var isMenuCollapsed = true {
        didSet {
            UIView.animate(withDuration: 0.3) {
                self.leftAnchor?.isActive = self.isMenuCollapsed
                self.view.layoutIfNeeded()
            }
        }

    }
    var leftAnchor : NSLayoutConstraint?

    override func viewDidLoad() {
        leftMenuVC = leftVC()
        addChildViewController(leftMenuVC!)
        view.addSubview(leftMenuVC!.view)
        leftMenuVC!.didMove(toParentViewController: self)
    }

    override func viewDidLayoutSubviews() {
        if let v = leftMenuVC?.view {

            leftAnchor = NSLayoutConstraint(item: v, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1, constant: 0)
            view.addConstraint(leftAnchor!)
            view.addConstraint(NSLayoutConstraint(item: v, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1, constant: 0))
            view.addConstraint(NSLayoutConstraint(item: v, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: 0))
            view.addConstraint(NSLayoutConstraint(item: v, attribute: .width, relatedBy: .equal, toItem: view, attribute: .width, multiplier: 0.6, constant: 0))

            var hiddingConstraint = NSLayoutConstraint(item: v, attribute: .right, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1, constant: 0)
            hiddingConstraint.priority = 999
            view.addConstraint(hiddingConstraint)
        }
    }

    func menuButtonClicked(){
        isMenuCollapsed = !isMenuCollapsed
    }
}

PS:我不会将约束设置放在viewDidLayoutSubviews中,也可能放在viewWillAppear中,因为每次设备旋转时都不必设置它们。这就是约束的目的

答案 1 :(得分:0)

不要自己编写代码,而是要省去麻烦。 这是MMDrawerController给你的救援。我自己用它。它非常容易实现,并提供了许多自定义选项。希望你觉得它有用。 : - )