Adjust button sizes based on screen size

Question

I am making a home screen where I have 4-5 buttons. As we know that iphone 5/SE screen is smaller than iphone 6 and 7. Hence we need to expand and shrink the button size based on the screen size. What is the best approach or algorithm? I am using the fixed minimum sizes of the buttons to handle iphone 5 but these fixed smaller size buttons looks weird when we use iphone 6 and 7.

Design your UI inside UITableViewController instead of UIViewController, so that it will fits in every screensize.. — Vignesh Davins, Jun 29 '17 at 08:37
show us layout u require?? 5 buttons layout horizontally or vertically. show us ur approach, that will be helpful. — luckyShubhra, Jun 29 '17 at 08:40
I hope this link solve your problem https://stackoverflow.com/questions/29308941/scale-text-label-by-screen-size — Jay, Jun 29 '17 at 08:40
The best solution is based on wether the buttons are laid out in a column, row, or grid; wether they have a specific aspect ratio that needs to be met at all sizes; and if there is space between them or not. Fill in these details and we can be much more helpful. Likely that aspect ratio and proportional size constraints will be what you need. — theMikeSwan, Jun 29 '17 at 16:59

Rishi Pochiraju · Answer 1 · 2017-06-29T16:31:36.527

There is an easy way to resize your buttons proportional to the screen size. Say for example that the correct button size is on the iPhone 5, which has a width of 320 and height of 568.

Declare two class variables (or global variables, if you want to resize buttons in different classes) called widthMultiplier and heightMultiplier:

var widthMultiplier = 0.0
var heightMultiplier = 0.0

In your viewDidLoad method, add the following code:

widthMultiplier = Double(self.view.frame.size.width) / 320
heightMultiplier = Double(self.view.frame.size.height) / 568

Then you can resize your buttons based on this:

button.frame.size.width = button.frame.width * CGFloat(widthMultiplier)
button.frame.size.height = button.frame.height * CGFloat(heightMultiplier)

And if you want, you can also adjust the position of that button to be proportional to the screen size so it shows up in the correct place on the iPhone 6/7 larger screen sizes such as the 6/7 Plus:

button.frame.origin = CGPoint(x: button.frame.origin.x * CGFloat(widthMultiplier), y: button.frame.origin.y * CGFloat(heightMultiplier))

I hope this helps.

score 1 · Answer 2 · answered Jun 29 '17 at 08:46

There's a couple of approaches that i have used to solve this problem:

Declare the sizes of the buttons in a model. The model should have a method that returns the size of the the button and then you can modify that value for each device/screen size. Example:

class MyLayoutClass {
    func getSizeForButton() -> CGSize {
        if UIDevice.current.userInterfaceIdiom == .pad {
            return CGSize(width: 100, height: 50)
        } else {
            // iphones
            let bounds = UIScreen.main.bounds
            // iphone SE has 320 width
            if bounds.width > 320 {
                return CGSize(width: 80, height: 50)
            } else {
                return CGSize(width: 50, height: 50) // smaller button size!
            }
        }
    }
}

You can then use this size to apply a screen-dependant size to your buttons

Another approach involves Interface Builder. You can set all your buttons to have a fixed margin to each other and then apply "Equal Widths" relationships to each other. See screenshot example:

luckyShubhra · Answer 3 · 2017-06-29T09:18:27.743

Good Approach

You can use UIStackView or UITableView or UICollectionView for the same. Define size of UICollectionViewCell or UITableViewCell dynamically at run time according to screen size.

Manual Approach

If you have already added different 5 buttons and you dont want to go for the above changes, AutoLayout is at your rescue. Define Equal Widths constraint to all your buttons if you need to place them horizontally. Similarly in case of vertical positioning you can assign Equal Heights constraint. You can even calculate width or height at run time based on screen size, at set it at run time!!

Hope it helps. Happy Coding!!

score 0 · Answer 4 · answered Apr 15 '19 at 16:38

0

Adding more details to @Juan's great suggestion:

To set button/object to equal widths:

i. Select one of the buttons/objects

ii. Ctrl + Drag to the targeted button/Object and select "Equal Widths" from the context menu

answered Apr 15 '19 at 16:38

Native_Mobile_Arch_Dev

777
6
20

score -2 · Answer 5 · answered Jun 29 '17 at 08:47

-2

You can use AutoLayout with constraints or AutoResizing in XCode.

answered Jun 29 '17 at 08:47

Bharath

3,001
6
32
65

Adjust button sizes based on screen size

5 Answers5

Linked