Material: Add Multiple UIView Components to CardViews' DetailView

[craigpearce5]

Is it possible to add multiple components to the detailView of a cardView?

I would like to be able to add a segmentedController above a textField.

[mohpor]

@craigpearce5
you can create a container view and add whatever components to it and then set the detail view as that container view.
Better yet, you can use Grid to handle everything.

[danieldahan]

That is the correct solution. Use a container UIView and do what you like within it. Thank you @mohpor :)

[craigpearce5]

@mohpor Can you help out a bit more? All the online demos/lessons are for Container View Controllers using storyboard. I'm trying to code it in but can't seem to figure it out.

[mohpor]

it's very simple:

 let detailView = UIView()

    let segmentedController = UISegmentedControl()
    //Format segmented controller
    detailView.addSubview(segmentedController)

    let textField = TextField()
    // format text field
    detailView.addSubview(textField)
    // correctly size the detail view
    cardView.detailView = detailView

[craigpearce5]

Ahhh... so close. I had...

let container = UIView()
    container.addSubview(segmentButton)
    container.addSubview(noteText)
    cardView.detailView?.addSubview(container)

Thanks again - you're a very big help.

[mohpor]

As a general rule of thumb, whenever an assignable view in Material is optional, it needs to be assigned by you and doesn't contain any view to add a subview to them.

[craigpearce5]

I'm not getting a successful card view. They appear to just overlap, or not display at all depending on what I fiddle with.

let container = UIView()

var segmentButton = UISegmentControl()
//formatting
segmentButton.grid.rows = 6
container.addSubview(segmentButton)

var noteText = UITextEdit()
//formatting
noteText.grid.rows = 6
container.addSubview(noteText)

container.grid.axis.direction = .Vertical
container.grid.views = [segmentButton, noteText]
cardView.detailView = container

[mohpor]

you should set a frame for the container, I think

[mohpor]

Give me a few minutes I will post a sample code for you.

[craigpearce5]

Hmmm - I tried adding container.frame = CGRectMake(0, 0, 300, 500) but that does some really funky things. It makes the segmentcontroller 500px tall, but it doesn't push the .leftButtons and .rightButtons down.

[mohpor]

Here it goes:

 let cardView: CardView = CardView()

    let titleLabel = UILabel()
    titleLabel.text = "Title for the card view"
    cardView.titleLabel = titleLabel


    cardView.translatesAutoresizingMaskIntoConstraints = false


    let okButton = FlatButton()
    okButton.setTitle("OK", forState: UIControlState.Normal)
    okButton.setTitleColor(MaterialColor.blue.base, forState: UIControlState.Normal)


    let cancelButton = FlatButton()
    cancelButton.setTitle("Cancel", forState: UIControlState.Normal)
    cancelButton.setTitleColor(MaterialColor.red.base, forState: UIControlState.Normal)

    cardView.rightButtons = [okButton]
    cardView.leftButtons = [cancelButton]


    let detailView = MaterialView(frame: CGRect(x: 0, y: 0, width: 200, height: 100))

    let segmentedController = UISegmentedControl(items: ["Segment 1", "Segment 2"])

    segmentedController.grid.rows = 4

    detailView.addSubview(segmentedController)


    let gapView = UIView()
    gapView.grid.rows = 3

    detailView.addSubview(gapView)

    let textField = TextField()
    textField.placeholder = "Enter Text here"
    textField.grid.rows = 4
    detailView.addSubview(textField)

    detailView.grid.axis.direction = .Vertical

    detailView.grid.views = [segmentedController, gapView, textField]
    cardView.detailView = detailView
    self.view.addSubview(cardView)

    MaterialLayout.alignFromTop(self.view, child: cardView, top: 150.0)
    MaterialLayout.height(cardView, child: cardView, height: 200.0)
    MaterialLayout.alignToParentHorizontally(self.view, child: cardView, left: 12.0, right: 12.0)

the gapView is in place for the room text field needs for placeholder to move up, there might be a better way for it. Tweak values to match your requirements.
Hope it helps

[craigpearce5]

That worked! Thanks again.