Swift - Adding subviews to a UIImageView at the same position for all devices

Question

I have an Indoor Mapping application. I have a .png that represents the map. Some pins need to be placed on the map programmatically at certain Points of Interest (stairs, elevators, shops etc).

Let's say that on an iPhone 5, I add a UIView as a subview for my UIImageView at the point

CGPointMake(100,y:100)

and it indicates(is put over) some stairs in the UIImageView. The problem is, when I run the app on an iPad, for example, the UIImageView is larger and the UIView is not over the stairs. I have to modify my x,y for the UIView.

I have tried to make some calculation to determine the newX and newY of the UIView according to the

UIScreen.mainScreen().bounds.size.width

and

UIScreen.mainScreen().bounds.size.height

but I couldn't manage to place that UIView in the same spot for every device.

Is there a 3rd party library that can solve my problem? Or an equation to determine the newX and newY?

Thank you,

Dragos

You may want to use Constraint Layout to force the size of the UIImageView, and/or change the content mode of the UIImageView ? — Larme, Aug 01 '16 at 12:49
iPhone5: http://picpaste.com/iphone5-JmugDSJq.png iPhone6:http://picpaste.com/Iphone6-wT6L7Zes.png — Dragos Mihai Marcean, Aug 01 '16 at 12:54
Well the UIImageView needs to be almost full screen( like in the screen I shared in a comment here) . I cannot force the UIImageView to be constant width and height — Dragos Mihai Marcean, Aug 01 '16 at 12:57

score 1 · Accepted Answer · edited May 23 '17 at 12:33

I've found out a way of doing this that is arround 90% accurate. I'm using percentage for calculating the x and y coordinates.

So if a pin's x is at 10% and y is at 15% I am calculating the x and y like this:

x = xPercentage / 100 * pinSuperView.frame.size.width
y = yPercentage / 100 * pinSuperView.frame.size.height

And the results are similar on iphone 5, iphone 6s and ipad 2. Now it's just a discussion about the pin's width and height that will make it appear on the separate devices not EXACTLY at the same place, but good enough.

For me, I'm using the screen width to determine the pin's size:

let width = UIScreen.mainScreen().bounds.size.width / 20

and it will change according to the device you are using.

Again, this is around 90%-94% accurate on all devices, but it's good enough in my opinion.

Finding out the pin's percentage is either a trial and error procedure or knowing the superview width and height and doing something like tapping on the superview where you want you pin, getting the coordinates and calculating the percentage according to the superview width and height.

How to get the tap point you can find here: How to get a CGPoint from a tapped location? in objective C, but it's not difficult to rewrite in swift.

score 0 · Answer 2 · edited May 23 '17 at 12:33

There are two ways you could approach this: 1) Manually 2) Constraints.

1) Manually set the CGPoint in a switch

You could set the CGPoint to the exact values based on screen size by using the following switch:

if UIDevice().userInterfaceIdiom == .Phone {
    switch UIScreen.mainScreen().nativeBounds.height {
        case 960:
            // Set CGPoint for 4
        case 1136:
            // Set CGPoint for 5
        case 1334:
            // Set CGPoint for 6
        case 2208:
            // Set CGPoint for 6Plus
        default:
            break
    }
}

Advantage of this: it's quick and easy. Disadvantages: It doesn't scale (pun intended) to any new potential screen sizes Apple might release. Doing this isn't really how Apple intended developers to create interfaces, which brings me to...

2) Use constraints to dynamically calculate the position

I'm not sure exactly how your view is setup, so I can't tell you exactly what constraints to use. However, you could use some mix of leading, trailing, top, bottom, centerX, and centerY to get the perfect position.

You can add constraints in the storyboard (easier in my opinion) or in Swift like this:

let pinView = UIView()
pinView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(pinView)

let horizontalConstraint = NSLayoutConstraint(item: pinView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
view.addConstraint(horizontalConstraint)

let leadingConstraint = NSLayoutConstraint(item: pinView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1, constant: 0)
view.addConstraint(leadingConstraint)

The nice things about constraints are that 1) this is how Apple intended it 2) it scales 3) there's less manual calculating to do.

For more information on constraints, I'd give these a read:

I have tried a combination of two. I've put on an iphone5 some pins on my view with certain constraints and I tried to modify programatically my constraints according to the screen's width and height so that on an iphone 5 would be the same and in an iphone 6 would be added a value to the constraint's constant value. But I haven't managed to put in the same place on both devices. — Dragos Mihai Marcean, Aug 05 '16 at 10:28

Swift - Adding subviews to a UIImageView at the same position for all devices

2 Answers2