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 done.

With UIActionSheet I don't believe you can actually access the buttons. Might be easier to create an action sheet like view that just uses standard UIButtons and animations. — Kyle, May 25 '11 at 21:01

Eddie G. · Answer 1 · 2013-03-29T09:29:27.083

71

There is a possibility to add images (to be exact: icons or symbols) to the buttons of a UIActionSheet (or a UIAlertView) without loading image files or fiddling around with (sub)views. In these classes buttons are specified by their titles, which are strings. So it is obvious to use symbols, which one can specify also by strings. The first I came up with was using unicode symbols.

Then I discovered that several of them are rendered as nice icons on iOS and as one can see for several symbols in the Character Viewer on Mac OS, too. Thus, the symbols can be used actually everywhere a string can be specified.

The drawbacks of this approach are:

You are limited to predefined symbols.
Not all symbols are rendered as they should (e.g. \u29C9).
There can be changes in the appearance of some symbols on different iOS versions (e.g. \U0001F533 on iOS 5 and 6).

Here are some interesting symbols among others:

If you want to quickly check how a symbol looks like (at least on Mac OS), you can use the Calculator. Check definitely in the simulator: For instance \u2B1C is not an icon in Calculator 10.7.1.

Screenshots:

UIActionSheet

UIActionSheet

Button titles:

@"\U0001F6A9 \U0001F4CC \u26F3 \u2690 \u2691 \u274F \u25A4 Test"
@"\U0001F4D6 \U0001F30E \U0001F30F \u25A6 \U0001F3C1 \U0001F332 \U0001F333 \U0001F334 Test"

UIAlertView

enter image description here

Button title:

@"\u26A0 Yes"

UITableViewCell with checkbox and other icons

UITableViewCell

edited Mar 29 '13 at 09:29

answered Mar 19 '12 at 23:39

Eddie G.

2,344
2
17
7

1

Amazing, but as you said ** you are limited to predefined symbols** but still it's awesome idea, thanks for sharing this. – Ahmad Kayyali Mar 20 '12 at 07:42
can we handle events when we click those images? – Bharathi Mar 20 '12 at 10:36
1

@Jasmine: Clicking an image is actually clicking the button itself, because the image is its label. – Eddie G. Mar 20 '12 at 11:05
This is really amazing! :) – Johan Karlsson Jan 18 '13 at 09:20
@iOSDev: What is the exact reason/statement? – Eddie G. Jan 27 '13 at 20:26
Im sorry, lill misunderstanding regarding the description of apple abt this.. They have shown the screenshots of customized UIActionsheet with UNICode symbols.., but not with this approach of adding symbols. Ur description was absolutely correct. Upvoted. Thanks. – Purnachandar Rao Voleti Jan 28 '13 at 11:13
but how to use these symbols for localized strings? eg. `"yes" = "\u26A0 Yes";` shows alert as `u26A0 Yes`. – Vaibhav Saran May 17 '13 at 11:21
@Vaibhav Saran: I never used localization with this approach, but the section "Using Special Characters in String Resources" in the Resource Programming Guide may be helpful: http://goo.gl/FpLD5 : Though in values you can specifies only "\U followed immediately by up to four hexadecimal digits", you can (especially for longer codes) try to escape the backslash: `"yes" = "\\u26A0 Yes"`; – Eddie G. May 19 '13 at 11:00
i have tried. `"yes" = "\u26A0 Yes";` appear on `UIAlert` as `u26A0 Yes` and `"yes" = "\\u26A0 Yes";` on `UIAlert` appear as `\u26A0 Yes` – Vaibhav Saran May 20 '13 at 09:08
@Vaibhav Saran: You can follow the guide and use `"yes" = "\U26A0 Yes";` ("\U followed immediately by up to four hexadecimal digits") or prepend the unicode symbol programmatically _after_ retrieving the localized string. Do you localize also symbols? – Eddie G. May 22 '13 at 16:57

score 27 · Accepted Answer · edited May 26 '11 at 10:28

27

Try this way, i hope it may be help you.

UIActionSheet * action = [[UIActionSheet alloc] 
                      initWithTitle:@"Title" 
                      delegate:self 
                      cancelButtonTitle:@"Cancel" 
                      destructiveButtonTitle:nil 
                      otherButtonTitles:@"",nil];

[[[action valueForKey:@"_buttons"] objectAtIndex:0] setImage:[UIImage imageNamed:@"yourImage.png"] forState:UIControlStateNormal];

[[[action valueForKey:@"_buttons"] objectAtIndex:0] setImage:[UIImage imageNamed:@"yourImage_Highlighted.png"] forState:UIControlStateHighlighted];

edited May 26 '11 at 10:28

visakh7

26,380
8
55
69

answered May 26 '11 at 10:19

Amit

1,795
1
17
20

1

are you positive that this method is legal and i can post my app to the App Store? – Ahmad Kayyali May 29 '11 at 13:10
I have same question ? Did submitted to app store with this code ? – iOS.Lover Sep 20 '11 at 16:53
1

So, will this get rejected or not? – Richard J. Ross III Jul 01 '12 at 22:21
6

[Apple considers](http://stackoverflow.com/a/9054299/957768) accessing non-publicly-documented portions of their view hierarchies to be "private API"; this approach risks App Store rejection. – rickster Jul 18 '12 at 05:49
I have an app with this submitted. – Dannie P Jun 05 '13 at 20:47
i have same problem.. my app is crashed in iOS8 – Monika Patel Sep 04 '15 at 12:49

score 6 · Answer 3 · edited Jan 03 '13 at 00:03

The standard UIActionSheet doesn't support images.

One way to add an image to the UIActionSheet is to add a subview to the UIActionSheet. Just implement the UIActionSheetDelegate method willPresentActionSheet: like this:

- (void)willPresentActionSheet:(UIActionSheet *)actionSheet {
     UIImageView* buttonImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"picturename.png"]];
     // Set the frame of the ImageView that it's over the button.
     [actionSheet addSubview:buttonImage];
     [buttonImage release]; // only if you don't need this anymore
}

I'm not sure if the image responds to touches, but you can build a UIActionSheet like theUIDocumentInteractionController.

score 5 · Answer 4 · answered Jul 18 '12 at 05:43

5

Here is ones way to do it: https://github.com/levey/LeveyPopListView enter image description here

answered Jul 18 '12 at 05:43

RawMean

8,374
6
55
82

I don't think Android is this refined :| – nmdias Apr 10 '16 at 10:12

score 4 · Answer 5 · answered Dec 09 '15 at 06:16

- (IBAction)actionSheetButtonPressed:(id)sender {
UIAlertController * view=   [UIAlertController
                             alertControllerWithTitle:@"Share "
                             message:@"Select your current status"
                             preferredStyle:UIAlertControllerStyleActionSheet];
UIAlertAction* online = [UIAlertAction
                         actionWithTitle:@"Facebook"
                         style:UIAlertActionStyleDefault
                         handler:^(UIAlertAction * action)
                         {
                             //Do some thing here
                             [view dismissViewControllerAnimated:YES completion:nil];
                         }];
UIAlertAction* offline = [UIAlertAction
                          actionWithTitle:@"Google+"
                          style:UIAlertActionStyleDefault
                          handler:^(UIAlertAction * action)
                          {
                              [view dismissViewControllerAnimated:YES completion:nil];
                          }];
UIAlertAction* doNotDistrbe = [UIAlertAction
                               actionWithTitle:@"LinkedIn"
                               style:UIAlertActionStyleDefault
                               handler:^(UIAlertAction * action)
                               {
                                   [view dismissViewControllerAnimated:YES completion:nil];
                               }];
UIAlertAction* away = [UIAlertAction
                       actionWithTitle:@"Twitter"
                       style:UIAlertActionStyleDestructive
                       handler:^(UIAlertAction * action)
                       {
                           [view dismissViewControllerAnimated:YES completion:nil];

                       }];
UIAlertAction* cancel = [UIAlertAction
                     actionWithTitle:@"Cancel"
                     style:UIAlertActionStyleDefault
                     handler:^(UIAlertAction * action)
                     {
                     }];

[online setValue:[[UIImage imageNamed:@"facebook.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forKey:@"image"];
[offline setValue:[[UIImage imageNamed:@"google-plus.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forKey:@"image"];
[doNotDistrbe setValue:[[UIImage imageNamed:@"linkedin.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forKey:@"image"];
[away setValue:[[UIImage imageNamed:@"twitter.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forKey:@"image"];

[view addAction:online];
[view addAction:away];
[view addAction:offline];
[view addAction:doNotDistrbe];

[view addAction:cancel];

[self presentViewController:view animated:YES completion:nil];

}

Alpesh Prajapati · Answer 6 · 2014-09-04T10:35:43.043

You can get action button title from actionSheet object by key "_buttons" and set button image.

UIActionSheet *actionSheet = [[UIActionSheet alloc]initWithTitle:@"Title" delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"Facebook", @"Twitter", @"Google +", @"E - mail", @"Send Message",nil];

[[[actionSheet valueForKey:@"_buttons"] objectAtIndex:0] setImage:[UIImage imageNamed:@"fb_icon1.png"] forState:UIControlStateNormal];
[[[actionSheet valueForKey:@"_buttons"] objectAtIndex:1] setImage:[UIImage imageNamed:@"tweet_icon1.png"] forState:UIControlStateNormal];
[[[actionSheet valueForKey:@"_buttons"] objectAtIndex:2] setImage:[UIImage imageNamed:@"googleplus_icon1.png"] forState:UIControlStateNormal];
[[[actionSheet valueForKey:@"_buttons"] objectAtIndex:3] setImage:[UIImage imageNamed:@"mail_icon.png"] forState:UIControlStateNormal];
[[[actionSheet valueForKey:@"_buttons"] objectAtIndex:4] setImage:[UIImage imageNamed:@"message_icon.png"] forState:UIControlStateNormal];

for (UIView *subview in actionSheet.subviews) {
    if ([subview isKindOfClass:[UIButton class]]) {
        UIButton *button = (UIButton *)subview;
        [button setTitleColor:[UIColor darkGrayColor] forState:UIControlStateNormal];
    }
}

[actionSheet showInView:self.view];

Yes. it not support in iOS 8 – Alpesh Prajapati Oct 07 '14 at 06:54 — Alpesh Prajapati, Oct 07 '14 at 06:54

score 2 · Answer 7 · answered May 19 '13 at 16:14

I just created a class emulating the look of an UIActionSheet using table cells supporting images and text for every row. It also uses blocks for interaction, supports iPhone and iPad, popup from an UITabBarItem on iPad and queueing of multiple sheets. Still in development, but feel free to clone it from Github:

http://github.com/azplanlos/SIActionSheet

Usage is quite simple, here is an example:

SIActionSheet* mySheet = [SIActionSheet actionSheetWithTitle:@"Action Sheet title"
    andObjects:[NSArray arrayWithObjects:
        [SIActionElement actionWithTitle:@"Item 1"
            image:[UIImage imageNamed:@"image"]
            andAction:^{NSLog(@"action 1");}]
    , nil]
    completition:^(int num) {
        NSLog(@"pressed %i", num);
    } cancel:^{NSLog(@"canceled");}];

mySheet.followUpSheet = anotherSheet;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
        [mySheet show];
else
        [mySheet showFromTabBarItem:item inTabBar:tabBar];

If you encounter any problems, please let me know. I hope this helps a lot of people having the same problem like me...

score 2 · Answer 8 · answered Feb 25 '15 at 07:26

For iOS 8, do refer to this

if( [UIAlertController class] ){

    UIAlertController *view     = [UIAlertController alertControllerWithTitle:@"Main Title" 
                                                                      message:@"What do you want to do?"
                                                               preferredStyle:UIAlertControllerStyleActionSheet];

    UIAlertAction *firstAA       = [UIAlertAction actionWithTitle:@"Beep Beep"
                                                           style:UIAlertActionStyleDefault
                                                         handler:^( UIAlertAction *action ){

                                                             [view dismissViewControllerAnimated:YES
                                                                                      completion:nil];
                                                         }];
    [firstAA setValue:[UIImage imageNamed:@"your-icon-name"] forKey:@"image"];
    [view addAction:firstAA];

    UIAlertAction *cancelAA     = [UIAlertAction actionWithTitle:@"Cancel"
                                                           style:UIAlertActionStyleCancel
                                                         handler:^( UIAlertAction *action ){

                                                             [self deselectTableViewRow];

                                                             [view dismissViewControllerAnimated:YES
                                                                                      completion:nil];
                                                         }];
    [view addAction:cancelAA];

    [self presentViewController:view
                       animated:YES
                     completion:nil];
}
else {

    UIActionSheet *sheet    = [[UIActionSheet alloc] initWithTitle:@"What do you want to do?"
                                                          delegate:(id)self
                                                 cancelButtonTitle:nil
                                            destructiveButtonTitle:nil
                                                 otherButtonTitles:nil];

    [sheet addButtonWithTitle:@"title"];

    [[[sheet valueForKey:@"_buttons"] objectAtIndex:0] setImage:[UIImage imageNamed:@"your-icon-name.png"] forState:UIControlStateNormal];

    sheet.cancelButtonIndex = [sheet addButtonWithTitle:@"Cancel"];
    [sheet showInView:self.view];
}

i tried this code but the image tintcolor is changed..... How can i add original image to it??? — Patel Jigar, Oct 08 '15 at 09:15

score 1 · Answer 9 · answered Feb 26 '14 at 08:51

I know it's very late answer, but I found another way to show image in action sheet:

self.actionSheet = [[UIActionSheet alloc] initWithTitle:@"Select Image:" delegate:self cancelButtonTitle:@"Cancel"destructiveButtonTitle:nil otherButtonTitles: @"Image1", @"Image2", @"Image3", @"Image4", @"Image5", @"Image6", @"Image7", @"Image8",@"Image9", @"Image10", @"Image11", @"Image12", @"Image13", @"Image14", @"Image15", nil];

self.actionSheet.tag = 1;
for (id button in [self.actionSheet valueForKey:@"_buttons"])
 {
     UIImageView* buttonImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[button titleForState:UIControlStateNormal]]];
     [buttonImage setFrame:CGRectMake(5, 5,35,35)];
     [button addSubview:buttonImage];
 }

 [self.actionSheet showInView:[UIApplication sharedApplication].keyWindow];

Don't use this, it crashes in iOS 8. – capikaw Oct 02 '14 at 19:40 — capikaw, Oct 02 '14 at 19:40

tiritea · Answer 10 · 2014-08-23T03:31:21.263

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...]

score 1 · Answer 11 · answered Dec 18 '14 at 06:05

    NSString* strUrl=[MLControl shared].currentServerUrl;
    for( MLServerUrl *title in [MLControl shared].arrServerUrl)  {
        NSString* strShow=title.name;
        if ([strUrl isEqualToString: title.url]) {
            strShow=[NSString stringWithFormat:@"√ %@",strShow];
        }else{
            strShow=[NSString stringWithFormat:@"  %@",strShow];
        }

        [chooseImageSheet addButtonWithTitle:strShow];
    }

   // [[[chooseImageSheet valueForKey:@"_buttons"] objectAtIndex:0] setImage:[UIImage imageNamed:@"ic_check_black_18dp.png"] forState:UIControlStateNormal];
    chooseImageSheet.actionSheetStyle = UIActionSheetStyleDefault;
    [chooseImageSheet showFromRect:btnRc inView:sender animated:YES];

score 0 · Answer 12 · edited Jan 28 '19 at 07:45

0

From iOS 8.0 you can use UIAlertController. In UIAlertController, each button item is know as UIAlertAction which add accordingly.

You can check my answer

edited Jan 28 '19 at 07:45

Amal T S

3,327
2
24
57

answered Aug 19 '16 at 17:50

Jaha Rabari

173
8

Adding Images to UIActionSheet buttons as in UIDocumentInteractionController

12 Answers12

Linked