How add vertical button list from top right corner programmatically in Swift 5

Question

I need to add buttons from top right corner of the screen. I have added buttons. it is working fine in iPhone. But when I run to iPad it start on middle right corner of the screen. I have use below code..

 let button1 = UIButton(frame: CGRect(x: view.frame.size.width - 56, y: view.frame.size.width - 220, width: 30, height: 30))
  self.view.addSubview(button1)

 let button12 = UIButton(frame: CGRect(x: view.frame.size.width - 56, y: view.frame.size.width - 150, width: 30, height: 30))
 self.view.addSubview(button12)

How to add button from top right corner always both phone or iPad?

Maybe try using auto layout constraints? – Parthib Biswas Jan 21 '20 at 14:46 — Parthib Biswas, Jan 21 '20 at 14:46
@ParthibBiswas sir I have used in google map – Enamul Haque Jan 21 '20 at 14:47 — Enamul Haque, Jan 21 '20 at 14:47
@DonMag how to add constraint here – Enamul Haque Jan 21 '20 at 14:52 — Enamul Haque, Jan 21 '20 at 14:52

MBT · Accepted Answer · 2020-01-21T15:05:07.867

Change view.frame.size.width to a static value for y position. Because UIView position calculation starts from Top-Left corner.

let button1 = UIButton(frame: CGRect(x: view.frame.size.width - 56, y: 20, width: 30, height: 30))
self.view.addSubview(button1)

let button12 = UIButton(frame: CGRect(x: view.frame.size.width - 56, y: 60, width: 30, height: 30))
self.view.addSubview(button12)

If you want to add AutoLayoutConstraint try this

let button1 = UIButton()
button1.setTitle("Button 1", for: .normal)
button1.backgroundColor = .red
button1.translatesAutoresizingMaskIntoConstraints = false
 self.view.addSubview(button1)

let button12 = UIButton()
button12.setTitle("Button 12", for: .normal)
button12.backgroundColor = .red
button12.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(button12)

button1.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 20).isActive = true
button1.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor, constant: -20).isActive = true
button1.heightAnchor.constraint(equalToConstant: 30).isActive = true
button1.widthAnchor.constraint(equalToConstant: 100).isActive = true

button12.topAnchor.constraint(equalTo: button1.bottomAnchor, constant: 20).isActive = true
button12.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor, constant: -20).isActive = true
button12.heightAnchor.constraint(equalToConstant: 30).isActive = true
button12.widthAnchor.constraint(equalToConstant: 100).isActive = true

To know about translatesAutoresizingMaskIntoConstraints please check it - link

score 0 · Answer 2 · answered Jan 21 '20 at 14:49

I would look into adding these directly to a storyboard. Possibly create these two buttons in a stackview. If you need go programmatically, the main issue with your above example is to use height instead of width for y:

let button1 = UIButton(frame: CGRect(x: self.view.frame.size.width - 56, y: self.view.frame.size.height - 220, width: 30, height: 30))
self.view.addSubview(button1)

let button12 = UIButton(frame: CGRect(x: self.view.frame.size.width - 56, y: self.view.frame.size.height - 150, width: 30, height: 30))
self.view.addSubview(button12)

score 0 · Answer 3 · answered Jan 21 '20 at 14:54

You have to pin your buttons with constraints to that view like that:

NSLayoutConstraint.activate([
    self.button1.topAnchor.constraint(equalTo: self.view.topAnchor, constant: *first button top margin*),
    self.button1.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: *first button right margin*),
    self.button2.topAnchor.constraint(equalTo: self.button1.bottomAnchor, constant: *second button top margin*),
    self.button2.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: *second button right margin*)
])

Do not forget to add subviews like you did self.view.addSubview(button1) You can also set constraints for width and height.

Apple docs: https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html#//apple_ref/doc/uid/TP40010853-CH16-SW1

How add vertical button list from top right corner programmatically in Swift 5

3 Answers3