CODEWITHSUNDEEP
swiftuiviewuibuttonconstraintsios-autolayout
Ipek Ercel
Ipek Ercel

Reputation: 43

Add Buttons horizontally in a custom view programmatically

I have designed a popup view programmatically which has a title, tableView and 2 buttons. The buttons are placed horizontally in a row. I have tried hard, but I somehow cannot set the buttons in a row (i.e horizontally).

Also the tableView should set its constraints according to no of cells. It should not scroll. Any help or advice much appreciated. Here is my code:

class PopUpMenu : UIView{
// The title label
lazy var titleLabel: UILabel = {
    let label = UILabel(frame: .zero)
    label.translatesAutoresizingMaskIntoConstraints = false
    label.textAlignment = .center
    return label
}()

// The table view   
lazy var tableView: UITableView = {
    let tv = UITableView(frame: .zero)
    tv.translatesAutoresizingMaskIntoConstraints = false
    return tv
}()

// add buttons
lazy var previousButton : UIButton = {
    let y = self.tableView.frame.origin.y+self.tableView.frame.height
    let frame = CGRect(x: 10, y: y, width: 150, height: 36)
    let button = UIButton()
    button.frame = frame
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("Previous", for: .normal)
    return button
}()

lazy var nextButton : UIButton = {
    let x = previousButton.frame.origin.x + previousButton.frame.width + 10
    let y = self.tableView.frame.origin.y+self.tableView.frame.height
    let frame = CGRect(x: x, y: y, width: previousButton, height: 36)
    let button = UIButton()
    button.frame = frame
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("Next", for: .normal)
    return button
}()

override func didMoveToSuperview() {
    super.didMoveToSuperview()

    // Add views
    addSubview(titleLabel)
    addSubview(tableView)   
    addSubview(previousButton)
    addSubview(nextButton)

    var constraints = [NSLayoutConstraint]()
    let views: [String: UIView] = ["titleLabel": titleLabel, "tableView": tableView, "previousButton" : previousButton, "nextButton" : nextButton]
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[titleLabel]|", options: [], metrics: nil, views: views)
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[tableView]|", options: [], metrics: nil, views: views)
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[previousButton]-[nextButton]-|", options: [], metrics: nil, views: views)
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|[titleLabel(50)][tableView][previousButton][nextButton]|", options: [], metrics: nil, views: views)
    NSLayoutConstraint.activate(constraints)
}
}

Here is my output:

enter image description here

Upvotes: 0

Views: 828

Answers (1)

Ipek Ercel
Ipek Ercel

Reputation: 43

This helped me solve the problem. https://gist.github.com/gazolla/19c7771b33fa5f781bc7f5b0aa842dbd

I replaced view with button and added stackView as a subview to my custom view and set the constraints.

Upvotes: 1

Related Questions