Is it possible to lay out 2 buttons vertically on UIAlertView?

There seems to be no SDK support for this behavior. Two buttons in a UIAlertView will always be shown in a horizontal layout.

However, it's pretty easy to just subclass UIAlertView to get the intended behavior. Let's call the class VerticalAlertView.

The following code only works for alert views with two buttons as more than two buttons in a UIAlertView will automatically be shown in a vertical layout.

VerticalAlertView.h is as simple as this:

#import <UIKit/UIKit.h>

@interface VerticalAlertView : UIAlertView
@end

VerticalAlertView.m:

#import "VerticalAlertView.h"

@implementation VerticalAlertView

- (void)layoutSubviews
{
    [super layoutSubviews];

    int buttonCount = 0;
    UIButton *button1;
    UIButton *button2;

    // first, iterate over all subviews to find the two buttons;
    // those buttons are actually UIAlertButtons, but this is a subclass of UIButton
    for (UIView *view in self.subviews) {
        if ([view isKindOfClass:[UIButton class]]) {
            ++buttonCount;
            if (buttonCount == 1) {
                button1 = (UIButton *)view;
            } else if (buttonCount == 2) {
                button2 = (UIButton *)view;
            }
        }
    }

    // make sure that button1 is as wide as both buttons initially are together
    button1.frame = CGRectMake(button1.frame.origin.x, button1.frame.origin.y, CGRectGetMaxX(button2.frame) - button1.frame.origin.x, button1.frame.size.height);

    // make sure that button2 is moved to the next line,
    // as wide as button1, and set to the same x-position as button1
    button2.frame = CGRectMake(button1.frame.origin.x, CGRectGetMaxY(button1.frame) + 10, button1.frame.size.width, button2.frame.size.height);

    // now increase the height of the (alert) view to make it look nice
    // (I know that magic numbers are not nice...)
    self.bounds = CGRectMake(0, 0, self.bounds.size.width, CGRectGetMaxY(button2.frame) + 15);
}

@end

You can now use your class like any other UIAlertView:

[[[VerticalAlertView alloc] initWithTitle:@"Title" 
                                  message:@"This is an alert message!" 
                                 delegate:self 
                        cancelButtonTitle:@"OK" 
                        otherButtonTitles:@"Second Button", nil] autorelease] show];

And you will get the following result:

enter image description here

EDIT:

Using this method is a bit risky (not to say hacky), as Apple might change the implementation of UIAlertView at some point, which could break your layout. I just wanted to point out that this would be an easy and fast solution for your problem. As mentioned in the UIAlertView reference:

"The UIAlertView class is intended to be used as-is and does not support subclassing. The view hierarchy for this class is private and must not be modified."


It's not possible by default. The appearance shown in nycynik's answer is what happens when you have more than two buttons.

So, either add another button, or you could look into a third-party solution such as this library, although I have not tested it.


While creating UIAlertActions for UIAlertController, just append some white space to titles. Even though they will be trimmed while displaying, iOS lays out buttons vertically.

Tested on iOS 10.3.1 with 4.7" device. This amount of space is enough even for a button title 1 char length:

NSString* space = @" ";

Most probably it is OK for 3.5", 4" and 5.5" devices also.