UIButton height change according to screen size

Question

I have 10 UIButtons one below each other. I want to change its height according to the iPhone screen size. It should look bigger in iPhone 6 plus screen and smaller in iPhone 5s screen. How to do it using autolayout.

Answer 1

You first pick a UIView and set its constraints like top, bottom, leading and trailing, after that drag all UIButtons on the view and set all buttons constraints like top, bottom, leading, trailing and equal width and equal height constraints you can check these images iPhone 7 Plus screen:-

and iPhone 5s screen

Xcode View

Answer 2

To do this, you must add the height of each button base on the percentage (%) of device screen size. so that button size can vary according to device(iPhone4s, 5s, 6 plus) screen size.

Now I’m going to add constraints programmatically using KVConstraintExtensionsMaster library. Try below code by calling below method from viewDidLoad of your ViewController.

- (void)configureScrollViewHierarchyAndApplyConstraint
{
    CGFloat mainScreenHeight = [[UIScreen mainScreen] bounds].size.height;

    // here baseScreenHeight is default screen height size for which we are implementing.
    CGFloat baseScreenHeight = 667; // here default iPhone 6 height

    // Note: try by changing baseScreenHeight via any iPhone screen height(480, 568, 667, 736) and see the changes in button height & space

    // here fixed space and height are fixed size with respect to iPhone 6 height.
    CGFloat fixedSpace = 28;
    CGFloat fixedHeight = 150;

    // ratio is responsible to increase or decrease button height depends on iPhone device size.
    CGFloat ratio = mainScreenHeight/baseScreenHeight;

    CGFloat baseSpace = fixedSpace * ratio;
    CGFloat baseHeight = fixedHeight * ratio;

    // prepare scrollView for autolayout
    UIScrollView *scrollView = [UIScrollView prepareNewViewForAutoLayout];
    scrollView.backgroundColor = [UIColor brownColor];
    [self.view addSubview:scrollView];

    // prepare containerView for autolayout
    UIView *containerView = [UIView prepareNewViewForAutoLayout];
    containerView.backgroundColor = [UIColor colorWithWhite:1 alpha:0.95];
    [scrollView addSubview:containerView];

    // To add Leading and Trailing constraint
    [scrollView applyLeadingAndTrailingPinConstraintToSuperviewWithPadding:baseSpace];
    // To add Top and Bottom constraint
    [scrollView applyTopAndBottomPinConstraintToSuperviewWithPadding:baseSpace];

    // To add Top and Bottom constraint of containerView
    [containerView applyTopAndBottomPinConstraintToSuperviewWithPadding:0];

    // To Define the containerView X Position by adding HorizontalCenter constraint
    [containerView applyConstraintForHorizontallyCenterInSuperview];

    // Here To Define the width 
    [containerView applyEqualWidthPinConstrainToSuperview]; // Or
    //[containerView applyLeadingPinConstraintToSuperviewWithPadding:10];

    NSInteger count  = 20;
    UIButton *previousContentButton = nil;

    for (NSInteger i = 0; i < count; i++)
    {
        UIButton *contentButton = [UIButton prepareNewViewForAutoLayout];
        if (i&1) {
            [contentButton setBackgroundColor:[UIColor greenColor]];
        }else{
            [contentButton setBackgroundColor:[UIColor redColor]];
        }

        [contentButton setTag:i];
        [containerView addSubview:contentButton];

        // Define the contentButton Size
        [contentButton applyLeadingAndTrailingPinConstraintToSuperviewWithPadding:baseSpace];
        [contentButton applyHeightConstraint:baseHeight];

        if (i == 0) // for first
        {
            // To add top constraint
            [contentButton applyTopPinConstraintToSuperviewWithPadding:baseSpace];
        }
        else if (i == count-1) // for last
        {
            // To add vertical constraint between two buttons
            [previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeBottom toAttribute:NSLayoutAttributeTop ofView:contentButton spacing:baseSpace];

            // To add bottom constraint
            [contentButton applyBottomPinConstraintToSuperviewWithPadding:baseSpace];
        }
        else
        {
            // To add vertical constraint between two buttons
            [previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeBottom toAttribute:NSLayoutAttributeTop ofView:contentButton spacing:baseSpace];
        }

        previousContentButton = contentButton;
    }

    [containerView updateModifyConstraints];

}

Answer 3

a simple example:

1. drag a button from the object library to your viewcontroller's view in storyboard
2. ctrl drag from your button to your view (drag to the left or the right) and choose center vertically in container
3. ctrl drag from your button to your view (drag to the top or the bottom) and choose center horizontally in container
4. ctrl drag FROM the button TO the button (yes, the same button) and choose aspect ratio
5. in the size inspector check the button's aspect ratio constraint to have a multiplier of 1:1
6. ctrl drag from your button to your view (drag to the left or the right) and choose equal widths 7 .in the size inspector check the button's equal width constraint to have a multiplier of 1:3 (or whatever value you like - 1:3 means that that the button's width is one third of the view's width)

You can check this answer.

Answer 4

Just use Verticle UIStackView.