iPhone development: How to create colored or translucent background for UIActionSheet?

Question

When you try deleting a note in iPhone's Notes application, an UIActionSheet pops up. The sheet is translucent (but not black translucent). How is that achieved? Is it possible to make the background of UIActionSheet a certain color?

Answer 1

I usually implement the following delegate method:

- (void)willPresentActionSheet:(UIActionSheet *)actionSheet

Just to make a sample. In this case I use a stretched png as a background:

- (void)willPresentActionSheet:(UIActionSheet *)actionSheet {
    UIImage *theImage = [UIImage imageNamed:@"detail_menu_bg.png"];    
    theImage = [theImage stretchableImageWithLeftCapWidth:32 topCapHeight:32];
    CGSize theSize = actionSheet.frame.size;
    // draw the background image and replace layer content  
    UIGraphicsBeginImageContext(theSize);    
    [theImage drawInRect:CGRectMake(0, 0, theSize.width, theSize.height)];    
    theImage = UIGraphicsGetImageFromCurrentImageContext();    
    UIGraphicsEndImageContext();
    [[actionSheet layer] setContents:(id)theImage.CGImage];
}

and this is the result: alt text http://grab.by/4yF1

Answer 2

You can use the code below:

actionSheetObj.actionSheetStyle=UIActionSheetStyleBlackOpaque;

or

actionSheetObj.actionSheetStyle=UIActionSheetStyleBlackTranslucent;

Answer 3

actionSheetObj.actionSheetStyle=UIActionSheetStyleBlackTranslucent;

Answer 4

It's not too difficult. You can use the following code:

CGSize mySize = myActionSheet.bounds.size;
CGRect myRect = CGRectMake(0, 0, mySize.width, mySize.height);
UIImageView *redView = [[[UIImageView alloc] initWithFrame:myRect] autorelease];
[redView setBackgroundColor:[UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.5]];
[myActionSheet insertSubview:redView atIndex:0];

Just make sure you present the UIActionSheet before doing this or the size wont be set. That makes it kind of ugly, but you could do something like:

[myActionSheet showInView:self.view];
if (!redAdded) {
    redAdded = YES;
    //THE ABOVE CODE GOES HERE
}

Answer 5

You can definitely adjust the opacity by setting the alpha value. Interface Builder lets you edit the value directly, but in code I think you would do:

[[myActionSheet view] setOpaque:NO]; 
[[myActionSheet view] setAlpha:0.5];

I'm not sure if you need the setOpaque call or not - I think that is used to help optimize performance, as the iPhone won't try to render anything hidden by the opaque view.

Answer 6

It looks black to me (note: using 2.2.1). The only reason there's a color to it is because of the yellow behind it.

One option would be to use the black transparent background and find out the size and speed of the action sheet. Then create a view and animate it in at the same time you show the action sheet, just underneath it, to give it a tint different than the color naturally behind the action sheet. You would have to make the color view also translucent so you could see behind that as well.

I'm not sure if you can, but you might also try adjusting the opacity of the action sheet itself as well.