How to use a custom UIView multiple times in a controller with different content?

Question

I have created my own custom UIView for a popover that I have to display on a screen. My UIView looks like this:

class HelpTipsPopover: UIView {

weak var title: UILabel!
weak var myText: UILabel!

override init(frame: CGRect) {
    super.init(frame: frame)

    let strongTitle = UILabel()
    title = strongTitle
    let strongMyText = UILabel()
    myText = strongMyText

    self.addSubview(strongTitle)
    title.translatesAutoresizingMaskIntoConstraints = false
    if selected == true{
    title.text = "Search"
    title.font = UIFont(name: "HelveticaNeue-Bold", size: 12)
    title.textColor = UIColor.TRLMBlueBlackColor()


    let leftConstraint = NSLayoutConstraint(item: title, attribute: .Leading, relatedBy: .Equal, toItem: self, attribute: .Leading, multiplier: 1.0, constant: 10)
    let topConstraint = NSLayoutConstraint(item: title, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1.0, constant: 10)
    self.addConstraints([leftConstraint, topConstraint])

    self.addSubview(strongMyText)
    myText.translatesAutoresizingMaskIntoConstraints = false
    myText.text = "Search equities to view the order book and market prints for specific moments in time."
    myText.numberOfLines = 0
    myText.lineBreakMode = NSLineBreakMode.ByWordWrapping
    myText.font = UIFont(name: "Helvetica Neue", size: 12)
    myText.textColor = UIColor.TRLMBlueBlackColor()



    let leftDescription = NSLayoutConstraint(item: myText, attribute: .Leading, relatedBy: .Equal, toItem: self, attribute: .Leading, multiplier: 1.0, constant: 10)
    let rightDescription = NSLayoutConstraint(item: myText, attribute: .Trailing, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: 1.0, constant: 10)
    let topDescription = NSLayoutConstraint(item: myText, attribute: .Top, relatedBy: .Equal, toItem: title, attribute: .Bottom, multiplier: 1.0, constant: 5)
    self.addConstraints([leftDescription, topDescription, rightDescription])

}

required init(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)!
}

}

Now I have three popovers that I have to display in my view controller with different title and text in each popover. Here are the methods in my View Controller which displays those popovers:

 func showPopover(){
    self.view.addSubview(helpTipsPopover)
    helpTipsPopover.tag = 1
    helpTipsPopover.translatesAutoresizingMaskIntoConstraints = false
    helpTipsPopover.layer.cornerRadius = 6
    helpTipsPopover.backgroundColor = UIColor(white: 1.0, alpha: 0.8)
    let leftConstraint = NSLayoutConstraint(item: helpTipsPopover, attribute:       .Leading, relatedBy: .Equal, toItem: self.view, attribute: .Leading, multiplier: 1.0, constant: 10)
    let topConstraint = NSLayoutConstraint(item: helpTipsPopover, attribute: .Top, relatedBy: .Equal, toItem: self.hotSpotOne, attribute: .Bottom, multiplier: 1.0, constant: 4)
    let widthConstraint = NSLayoutConstraint(item: helpTipsPopover, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 200)
    let heightConstraint = NSLayoutConstraint(item: self.helpTipsPopover, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 80)
    self.view.addConstraints([leftConstraint, topConstraint, widthConstraint, heightConstraint])
    }


func showPopoverTwo(){
    self.view.addSubview(helpTipsPopover)
    helpTipsPopover.tag = 1
    helpTipsPopover.translatesAutoresizingMaskIntoConstraints = false
    helpTipsPopover.layer.cornerRadius = 6
    helpTipsPopover.backgroundColor = UIColor(white: 1.0, alpha: 0.8)
    let centerConstraint = NSLayoutConstraint(item: helpTipsPopover, attribute: .CenterX, relatedBy: .Equal, toItem: self.view, attribute: .CenterX, multiplier: 1.0, constant: 0)
    let topConstraint = NSLayoutConstraint(item: helpTipsPopover, attribute: .Top, relatedBy: .Equal, toItem: self.hotSpotTwo, attribute: .Bottom, multiplier: 1.0, constant: 4)
    let widthConstraint = NSLayoutConstraint(item: helpTipsPopover, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 200)
    let heightConstraint = NSLayoutConstraint(item: self.helpTipsPopover, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 80)
    self.view.addConstraints([centerConstraint, topConstraint, widthConstraint, heightConstraint])

}

Now I want to achieve something like this:

So each popover should have different title and text but i want to reuse the same UIView. Any help is appreciated. Thanks!

Hi Revant, you need to move to container views .. http://stackoverflow.com/a/23403979/294884 .. in iOS now everything is a container view ... — Fattie, Sep 29 '15 at 20:33
Expose the text and title via properties and set them? I don't understand your question — Paulw11, Sep 29 '15 at 20:46
@JoeBlow How to go about using a container view? Can you give me an example? — pogbamessi, Sep 29 '15 at 20:56
HI Revant. Here is an incredibly detailed tutorial on it: http://stackoverflow.com/a/23403979/294884 — Fattie, Sep 29 '15 at 21:14

score 2 · Accepted Answer · answered Sep 29 '15 at 20:44

Modify your init method

init(frame: CGRect, titleString: String, bodyString: String) {
  super.init(frame: frame)
  // Your current initializer

  title.text = titleString
  myText.text = bodyString

}

Then you can initialize a popup like this:

let frame = CGRectMake(0,0,180,100)
let titleString = "My Custom Title"
let bodyString = "This is a body. I'm explaining things to you here."
helpTipsPopoverOne = HelpTipsPopover(frame: frame, titleString: titleString, bodyString: bodyString)

Modify your display method to take a popup as a parameter. Then you can create popups and display with whatever text you'd like!

How to use a custom UIView multiple times in a controller with different content?

1 Answers1

Modify your init method