Set NSLayoutConstraint of view to top right - ios

Question

I'm at wits end trying to figure this out. In CSS, you can do something like this:
img {
position: absolute;
width: 50px;
height: 50px;
top: 0;
right: 0;
}
In Swift, I am using the programatic interface to set layout constraints of an image. It looks like this:
let img = UIImageView(image: UIImage(named: "my-image"))
img.setTranslatesAutoresizingMaskIntoConstraints(false)
mainScrollView.addSubview(img)
mainScrollView.addConstraint(NSLayoutConstraint(item: img, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 50))
mainScrollView.addConstraint(NSLayoutConstraint(item: img, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 50))
mainScrollView.addConstraint(NSLayoutConstraint(item: img, attribute: .Top, relatedBy: .Equal, toItem: mainScrollView, attribute: .Top, multiplier: 1, constant: 0))
mainScrollView.addConstraint(NSLayoutConstraint(item: img, attribute: .Trailing, relatedBy: .Equal, toItem: mainScrollView, attribute: .Trailing, multiplier: 1, constant: 0))
However for some bizarre reason it respects the width and height layout constraints, even the top one. but it's basically off screen to the left by 50. If I set the last .Trailing constant to 50, it actually moves it into view at the top left (yes I'm very confused by this).

Answer 1

The constraints should be applied to the view which is the nearest common ancestors of the view involved in the constraint. So I can see two errors in the code you posted:
if you are setting the height or the width of a view, the view itself is the nearest common ancestor view so the constraint should be applied directly to it. So your code should be:
item.addConstraint(NSLayoutConstraint(item: img, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 50))
item.addConstraint(NSLayoutConstraint(item: img, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 50))
Since the views involved in this constraint:
NSLayoutConstraint(item: img, attribute: .Top, relatedBy: .Equal, toItem: mainView, attribute: .Top, multiplier: 1, constant: 0))
are one the subview of the other, it should be applied to the parent view:
mainView.addConstraint(NSLayoutConstraint(item: img, attribute: .Top, relatedBy: .Equal, toItem: mainView, attribute: .Top, multiplier: 1, constant: 0)))
Regarding the problem with the Trailing attribute you should considering that when you are adding a constraint you are defining this formula:
item1.attribute = item2.attribute + constant
So if you are defining a constraint where both the attributes are Trailing you should to use a negative constant to have one view inside the other:
--------------------------
View1 |
------------- |
View2 | - (-50) - |

Answer 2

Have you tried doing it the way that doesn't involve code? Using the buttons on the bottom right of the story board view?

Answer 3

You just want to set it to top right with width and height both 50? Maybe you can do it like this:
let img = UIImageView(image: UIImage(named: "my-image"))
img.setTranslatesAutoresizingMaskIntoConstraints(false)
mainScrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:[img(50)]-0-|", options: NSLayoutFormatOptions(0), metrics: nil, views: ["img" : img]))
mainScrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[img(50)]", options: NSLayoutFormatOptions(0), metrics: nil, views: ["img" : img]))

Answer 4

The issue is that unlike standard views, constraints between a scroll view and its subviews don't dictate the size of the subviews, but rather the contentSize of the scroll view. This may seem curious, but it's actually a wonderful feature, getting us out of the business of calculating contentSize manually. For more information, see Technical Note TN2154.
But this means that in order to dictate the size of a subview within a scroll view, you actually have to reference something outside of the scroll view (e.g. the view controller's main view).
So you can place a "container" view inside the scroll view and put the image view in the upper right corner of that. And then you can define the container to be the width of the main view. That way you're accomplishing both goals, dictating the width of the contents of the the scroll view, and dictating the placement of the image view within that:
// define the container inside the scroll view
let containerView = UIView()
containerView.setTranslatesAutoresizingMaskIntoConstraints(false)
scrollView.addSubview(containerView)
// put the imageView in the container
let imageView = UIImageView(image: UIImage(named: "my-image"))
imageView.setTranslatesAutoresizingMaskIntoConstraints(false)
containerView.addSubview(imageView)
let views = ["containerView" : containerView, "view" : view, "imageView" : imageView]
// constraints for the container
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[containerView(==view)]|", options: nil, metrics: nil, views: views))
scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[containerView]|", options: nil, metrics: nil, views: views))
// define the imageview constraints
containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:[imageView(==50)]|", options: nil, metrics: nil, views: views))
containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[imageView(==50)]", options: nil, metrics: nil, views: views))