CODEWITHSUNDEEP
iosswiftxcodeautolayoutios-autolayout
mick1996
mick1996

Reputation: 606

Positioning a button on bottom right of screen

I'm having trouble with the positioning of my button. I am trying to position my button on the bottom right of my screen. I am new with auto layouts. The button appears currently on the top left of the screen.

Here is my code:

  1. add markers
  2. add the map view
  3. add the button

heres where I add markers:

func secondfunction() {

        for x in names{
            let url1 = URL(string: url: ", url1)
            let data1 = try? Data(contentsOf: url1!) //make sure your image in this url does exist
            //self.imagesOne = UIImage(data: data1!)
            self.images.append(UIImage(data: data1!)!)
        }

        self.loadFunction()
    }

heres where I load map and add button:

  func loadFunction()
        {

            mapView = MGLMapView(frame: view.bounds)
            mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

            mapView.centerCoordinate = CLLocationCoordinate2D(latitude:xCoord, longitude: yCoord)

            mapView.zoomLevel = 15
            mapView.delegate = self
            view.addSubview(mapView)

            var pointAnnotations = [MGLPointAnnotation]()
            for coordinate in locationsList {
                let location: CLLocationCoordinate2D = CLLocationCoordinate2D(latitude: coordinate.latitude, longitude: coordinate.longitude)
                let point = MGLPointAnnotation()
                point.title = "Tap here"
                point.coordinate = location
                pointAnnotations.append(point)
            }

            self.tabBarController?.tabBar.isHidden = false

            mapView.addAnnotations(pointAnnotations)

            button.setBackgroundImage(UIImage(named:"compass.png"), for: .normal)
            button.addTarget(self, action: #selector(btnPressed), for: UIControl.Event.touchUpInside)

            self.view.addSubview(button)


            button.translatesAutoresizingMaskIntoConstraints = false
            let widthContraints =  NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.width, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 40)

            let heightContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.height, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 40)

            let xContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.bottomMargin, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.bottomMargin, multiplier: 1, constant: -80)

            let yContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.trailing, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.trailing, multiplier: 1, constant: -80)

            NSLayoutConstraint.activate([heightContraints,widthContraints,xContraints,yContraints])

        }

Upvotes: 0

Views: 3273

Answers (3)

Jawad Ali
Jawad Ali

Reputation: 14417

Give your button constraint to bottom like this .. this is working tested code

override func viewDidLoad() {
    super.viewDidLoad()

           button.backgroundColor = .red
           self.view.addSubview(button)
}
override func viewDidLayoutSubviews() {
    
    
    button.translatesAutoresizingMaskIntoConstraints = false
    let widthContraints =  NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.width, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 40)
    
    let heightContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.height, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 40)
    
    let xContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.bottomMargin, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.bottomMargin, multiplier: 1, constant: -20)
    
    let yContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.trailing, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.trailing, multiplier: 1, constant: -20)
    
    NSLayoutConstraint.activate([heightContraints,widthContraints,xContraints,yContraints])
}

if you want to position it right give it constraint from right margin

change constant according to your design preference

enter image description here

Upvotes: 3

user7014451
user7014451

Reputation:

It looks like you are doing constraints in code. If I may, could I offer a more recent alternative? Use anchors, which are much more easier and is part of any subclass of UIView.

There are several anchors for a view - top, bottom, left or leading, right or trailing, center x and Y, and height/width are the most used.

Now, for any view, you need to do two things:

  • Position it. In your case you only need to position your button in the (a) lower or bottom (b) right or trailing.

  • If it doesn't have an intrinsic size (search for a better definition than I can give) give your view a hight and width.

So in your case, lets say you wish to position a UIButton that is offset 10 points away from the bottom right of the screen. (Keep in mind that Apple has introduced "safe area insets" but that's a subject for another question. Again, search for it and you'll find lots of examples.)

button.translatesAutoresizingMaskIntoConstraints = false

Always remember to do this!

Now let's give your button a size:

button.widthAnchor.constraint(equalToConstant: 100).isActive = true
button.heightAnchor.constraint(equalToConstant: 50).isActive = true

Finally, position it:

button.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
button.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true

That's it! The code is less verbose and thus easier to read.

Beyond the basics (and safe areas), you can also programmatically do two more things:

  • Change the constants (and for some views, the multiplier) as long as you name a constraint.
  • Selectively activate/deactivate an array of constraints, again, as long as you set them up in an array.

I find using anchors much easier, and have a different layout based on portrait or landscape by using arrays.

Upvotes: 1

Shehata Gamal
Shehata Gamal

Reputation: 100541

Remove this top constraint 

let xContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.topMargin, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.topMargin, multiplier: 1, constant: 20)

and add a bottom constraint 

NSLayoutConstraint.activate([
    button.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: -20),
    button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -20),
    button.widthAnchor.constraint(equalToConstant: 40),
    button.heightAnchor.constraint(equalToConstant: 40)
])

Upvotes: 1

Related Questions