Adding Images to UIActionSheet buttons as in UIDocumentInteractionController

Question

Is it possible to add an image to the buttons of the UIActionSheet as seen in UIDocumentInteractionController? If so, please let me know how it is

Answer 1

I found this category extension works in ios7.1 to add an image/icon to the buttons in a UIActionSheet, with some caveats...

@interface UIActionSheet (GSBActionSheetButtons)
- (void)buttonAtIndex:(NSUInteger)index setImage:(UIImage *)image forState:(UIControlState)state;
@end

@implementation UIActionSheet (GSBActionSheetButtons)
- (void)buttonAtIndex:(NSUInteger)index setImage:(UIImage *)image forState:(UIControlState)state
{
    for (UIView* view in self.subviews) {
        if ([view isKindOfClass:[UIButton class]]) {
            if (index-- == 0) {
                UIButton *button = (UIButton*)view;
                [button setImage:image forState:state];
                button.imageView.contentMode = UIViewContentModeScaleAspectFit;
                button.imageEdgeInsets = UIEdgeInsetsMake(2,0,2,0);
                break;
            }
        }
    }
}

And to use it:

[self.sharePopup buttonAtIndex:2 setImage:[UIImage imageNamed:@"twitter.png"] forState:UIControlStateNormal];

The caveats:

• Although the UIActionSheet does correctly autosize your image to the right height for the button, it does not appear to correspondingly change the imageview width; hence the need for the UIViewContentModeScaleAspectFit to prevent the image from getting squished. However, the imageview frame width is still the original full-size, so if your image was big (or more precisely wide) then you'll get an annoying gap between the centered (shrunk) image and the button text. I've found no way around this; even programmatically adding an explicit width=height constraint to the imageview seems to be ignored!? [any ideas?]. Net outcome, make sure your image is about the right height to begin with (eg about 45 pixels on a iPhone 4S) or you'll get an increasingly large gap between the button image and text.

• More serious, as soon as you add an image to the button, the UIActionSheet seems to automatically cause the button's text to be bolded (!). I dont know why and dont know how to prevent this [any ideas?]

• Lastly, this solution relies on the UIActionSheet's subviews to be in the same order as the button are indexed. This is true for a handful of buttons, but (apparantly) when you have a lot of items in your UIActionSheet Apple mucks about with the indexing [but you'll have problems with this anyway in actionSheet:clickedButtonAtIndex: when you try to figure out which button was tapped...]

Oh, the imageEdgeInsets: is optional - I inset each image a couple pixels inside the button so that the images dont touch each other vertically.

[Opinion: given the above oddities, I get the feeling Apple really doesn't want people mucking about with their action sheets. At some point you'll probably have to bite-the-bullet and just implement your own modal popup; there's only so much manhandling these UIActionSheets will accommodate...]