Search code examples
iosswiftautolayoutcosmicmindmaterial-swift

CosmicMind Swift Material library programmatic autolayout with stacked menu


I'm using CosmicMind's Material library for swift. I'm trying to get the Menu example to work with programmatic autolayout - where can I find an example of how to make this work?

From the examples on Github I haven't figured out a way to use autolayout.

/// Prepares the FlatMenu example.
private func prepareFlatbMenuExample() {
    let btn1: FlatButton = FlatButton()
    btn1.addTarget(self, action: "handleFlatMenu", forControlEvents: .TouchUpInside)
    btn1.setTitleColor(MaterialColor.white, forState: .Normal)
    btn1.backgroundColor = MaterialColor.blue.accent3
    btn1.pulseColor = MaterialColor.white
    btn1.setTitle("Sweet", forState: .Normal)
    view.addSubview(btn1)

    let btn2: FlatButton = FlatButton()
    btn2.setTitleColor(MaterialColor.blue.accent3, forState: .Normal)
    btn2.borderColor = MaterialColor.blue.accent3
    btn2.pulseColor = MaterialColor.blue.accent3
    btn2.borderWidth = .Border1
    btn2.setTitle("Good", forState: .Normal)
    view.addSubview(btn2)

    let btn3: FlatButton = FlatButton()
    btn3.setTitleColor(MaterialColor.blue.accent3, forState: .Normal)
    btn3.borderColor = MaterialColor.blue.accent3
    btn3.pulseColor = MaterialColor.blue.accent3
    btn3.borderWidth = .Border1
    btn3.setTitle("Nice", forState: .Normal)
    view.addSubview(btn3)

    // Initialize the menu and setup the configuration options.
    flatMenu = Menu(origin: CGPointMake(spacing, view.bounds.height - height - spacing))
    flatMenu.direction = .Down
    flatMenu.spacing = 8
    flatMenu.buttonSize = CGSizeMake(120, height)
    flatMenu.buttons = [btn1, btn2, btn3]
}

flatMenu is of type Menu from the Material library, and is a class that holds each of the buttons in the menu. It appears the "origin" is what controls the positioning on the page, but because Menu isn't a UIView subclass, I'm not sure how to use this with autolayout.

public class Menu {
...
}

Solution

  • What view do you have the buttons in? Try positioning the superview with AutoLayout using the same dimensions as your button size and then set the origin of the Menu as CGRectZero.

    Also make sure you have clipsToBounds for the superview set to false (the default). And because the buttons are outside the bounds of your autolayout placed view, you'll need to use a custom UIView subclass like the one below to handle the actions on the buttons.

    class MenuParentView: UIView {
    
      override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
    
        //because the subviews will be outside the bounds of this view
        //we need to look at the subviews to see if we have a hit
        for subview in self.subviews {
            let pointForTargetView = subview.convertPoint(point, fromView: self)
            if CGRectContainsPoint(subview.bounds, pointForTargetView) {
                return subview.hitTest(pointForTargetView, withEvent: event)
            }
        }
    
        return super.hitTest(point, withEvent: event)
      }
    }