How can I make buttons scale with my image correctly

Question

I have an image of a tennis court, and buttons that are on every area of the court. How can I make it so that the buttons will scale depending on the device, but stay aligned with the tennis court correctly?

I'm brand new to all of this, so I would greatly appreciate any help!

Take a look at [this answer](https://stackoverflow.com/a/51372403/1630618). — vacawama, Aug 04 '20 at 19:14
@vacawama I tried to use this solution, but whenever I try to set the width and height of the button equal to the width and height of the image, I cannot put a ratio for the multiplier, and I cannot put a ratio for the trailing edge either — Aydan, Aug 04 '20 at 21:00
How are you creating the constraints? In code or in the Storyboard? If in code, you should use the `NSLayoutContraint` instead of using anchors. — vacawama, Aug 04 '20 at 21:03
In code, you can't use ratios like 2:3, you have to do the math and set it as 2.0/3.0. — vacawama, Aug 04 '20 at 21:05
You should be able to enter ratios for the multiplier in the storyboard. Enter something like `20:30` with no spaces. — vacawama, Aug 04 '20 at 21:09
@vacawama I cant edit the multiplier of the width or height, this is what it looks like (In Bottom right the option is grayed out) Its saying that I need to give a X, And Y cordinate aswell. [Heres the image](https://imgur.com/xUYIRQ8) — Aydan, Aug 04 '20 at 21:19
It looks like you have a constant width contraint. You need an *Equal Widths* constraint between the button and the imageView. Control-drag from the button to the imageView and choose *Equal Widths* from the pop up. Then you should be able to set the multiplier for this constraint. — vacawama, Aug 04 '20 at 21:22
@vacawama I cant get it to work, I got the ratios working and everything, but whenever I put 86:414 into my multiplier, it goes off the screen, Im I doing something wrong? Here is an image with the XY on the right side and showing the view: [Here it is](https://imgur.com/sr4dlE5) — Aydan, Aug 04 '20 at 22:17
Make sure of the order of the items in your constraints. Button should be first and image view second. Reverse them if not or reverse the ratio for that constraint. — vacawama, Aug 04 '20 at 22:42
@vacawama Thank you so much, I got it working, you are a lifesaver! — Aydan, Aug 05 '20 at 02:19

Ol Sen · Answer 1 · 2020-08-04T20:30:35.650

You can go the autolayout "way" as vacawama mentioned (How to get exactly the same point on different screen sizes? ) or implement and override

-(void)layoutSubviews { ... } //with Objective-C

override func layoutSubviews() { ... } //with swift

of your UIView. Or if you used a UIViewControler the following

-(void)viewDidLayoutSubviews { ... } //in Objective-C

override func viewDidLayoutSubviews() { ... } //with swift

Those methods are called when the UI needs to layout its contents, so also if your View is scaled. It is also called when your UIView is allocated with -(instancetype)initWithFrame:(CGRect)rect in Objective-C or super.init(frame:CGRect) in swift. By the way instancing with Storyboard is calling those methods also, which is one of the reasons why you declare in Interface Builder what class a dropped UIView or ViewController is.

To know more about layoutSubviews have a look at this answer https://stackoverflow.com/a/5330162/1443038..

class MyView: UIView {
    // assuming you have declared init() and so on
    // and a var myButton : UIButton 
    override func layoutSubviews() {
        myButton.frame = CGRect(x: 0, y:0, width:self.frame.size.width * 0.2, height:self.frame.size.height * 0.2)
    }
}

class MyViewController : UIViewController {
    // assuming you have declared init() or init(frame:) and so on
    // and a var myButton : UIButton
    override func viewDidLayoutSubviews() {
        //same as example above, but here you ask self.view.frame
        myButton.frame = CGRect(x: 0, y:0, width:self.view.frame.size.width * 0.2, height:self.view.frame.size.height * 0.2)
    }
}

How can I make buttons scale with my image correctly

1 Answers1