colorWithPatternImage and setCornerRadius issue - iphone

Hello I'd like to achieve at the same time rounded corners and a background composed by tiling a little png (OPERATOR_VIEW_BACKGROUND_IMAGE). My main goal is to allow a designer to fill the background of a View by inserting the right image in the project resources.
[triggerView setFrame:CGRectMake(0, 0, ICONS_WIDTH, iconFrameHeight)];
[triggerView.layer setCornerRadius:borderRadius];
[triggerView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:OPERATOR_VIEW_BACKGROUND_IMAGE]]];;
I don't know why but triggerView loose the CornerRadius setting when I add the last line.
triggerView is a UIView built with interface builder and modified in its superView viewDidLoad programmatically, with the code above.
Where I'm wrong?
EDIT: I haven't mentioned that If I use a simple UIColor like: [UIColor orangeColor] It works well. So It's something related to the patternImage thing.
EDIT: I've tried also this code, working on the layer background of my view:
[triggerView setFrame:CGRectMake(0, 0, ICONS_WIDTH, iconFrameHeight)];
triggerView.backgroundColor = [UIColor clearColor];
UIImage *img = [UIImage imageNamed:OPERATOR_VIEW_BACKGROUND_IMAGE];
triggerView.layer.backgroundColor = [UIColor colorWithPatternImage:img].CGColor;
triggerView.layer.cornerRadius = radius;
[img release];
[self.view addSubview:triggerView];
Now I get a transparent background but the corners are rounded;

OK, thanks to Ben's comment and this Blog entry I've found this solution:
[triggerView setFrame:CGRectMake(0, 0, ICONS_WIDTH, iconFrameHeight)];
triggerView.layer.masksToBounds = YES;
triggerView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:OPERATOR_VIEW_BACKGROUND_IMAGE]];
triggerView.layer.cornerRadius = radius;
[self.view addSubview:triggerView];
Seems that triggerView.layer.masksToBounds = YES; was the missing piece, but I still don't understand why triggerView.layer.cornerRadius = radius; alone didn't suffice.

Try setting the content property of the layer with the CGImageRef of the image:
triggerView.layer.contents = (id) [[UIImage imageNamed:OPERATOR_VIEW_BACKGROUND_IMAGE] CGImage];
You may have to alloc or retain the UIImage to prevent it being autoreleased...

With iOS SDK 4.0 and 4.1, colorWithPatternImage method has got a bug that show badly an image...
I used this method and I had this bug but I could resolve using another method...
Try to use the initWithPatternImage method of UIColor class:
UIColor *imageBg = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:OPERATOR_VIEW_BACKGROUND_IMAGE]];
This worked greatly for me...
Unfortunately I never used cornerRadius method and I don't know a possibly solution for this other problem.

Related

annotationView override drawRect, image with alpha

Hello i want to override drawrect in my custom annotationView, so when i write
[[_mapView viewForAnnotation:annotation] setNeedsDisplay];
my annotation view will be redrawn and i wouldn't have to remove the annotation and add it again.
here is my drawRect
- (void)drawRect:(CGRect)rect {
UIImage* theImage = nil;
if( _pinType == T_UNKNOWN ) theImage = [UIImage imageNamed:#"imgU.png"];
else theImage = [UIImage imageNamed:#"imgK.png"];
[theImage drawInRect:rect];
}
The problem is that my images are with alpha and the alpha part is black.
So maybe anyone knows the solution or some suggestions to this?
I've read a lot of post about this, also using core graphics, but didn't find the solution..
Thanks in advance!
Do you want this view to be partially transparent and display things under it? If so, use [self setOpaque:NO]. An opaque view's drawRect is responsible for drawing every pixel in the rectangle with a fully opaque color.
This function will be work correct for iOS 5.0. When you will use iOS version < 5.0, you'll got alpha part as black.
To try use another method for draw your images. I don't know for what you use this code. To try use:
UIImageView *image = [[UIImageView alloc] initWithImage: theImage];
image.opaque = NO;
[self.view addSubview: image];

iPhone: Grouped TableView background image problem

Hey everyone, this seems like it should be a simple one; I really hope it is. As always, thanks in advance!
All I'm trying to do is add a background image to a grouped style tableview. I'm using the following method in viewDidLoad:
self.tableView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"background.png"]];
Unfortunately, background.png seems to be drawn not only behind the cells, but also on the backgrounds of the cells and the headers as follows:
alt text http://www.freeimagehosting.net/uploads/194449ffc1.png
I know there are a few questions on this site addressing similar issues, but I'm afraid I couldn't get anything to work. How can I set the background of UITableView (the tableview style is "Grouped") to use an image? led me to add
self.tableView.opaque = NO;
self.tableView.backgroundView = nil;
to viewDidLoad and to add
cell.backgroundView = nil;
cell.opaque = NO;
in configuring my cells. Needless to say, it didn't work. Adding
cell.backgroundColor = [UIColor clearColor];
didn't work either. And sadly, that was my last idea. I'd really like to be able to do this without adding the background in interface builder, if possible. I rather like doing as much as I can programmatically. I hope asking that isn't too greedy. Thanks again!
*
*
*
EDIT:
*
*
*
I came across another approach to accomplishing this, but ran into another problem. I added the following code to viewDidLoad:
UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
bgView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"background.png"]];
[self.tableView.window addSubview:bgView];
[self.tableView addSubview:bgView];
[self.tableView sendSubviewToBack:bgView];
It looked promising, and it likely is, but unfortunately in gave me the following:
alt text http://www.freeimagehosting.net/uploads/c02dd68e20.png
It looks as though it either wasn't sent to the back and the headers somehow show through or the cells went to the back with it. I'm not at all sure. Any advice here would be appreciated as well.
Here's where I found the code for the edit:
Add UIView behind UITableView in UITableViewController code
I went through a similar path to what you describe here. I finally found an answer that worked for me on the following post:
How to set the background of a UITableView to an image?
It was two lines of code posted by user rkb. Here's the code:
self.tableView.backgroundColor = [UIColor clearColor];
self.parentViewController.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageWithData:imageData]];
Another solution if nothing else here is working out. In ViewDidLoad:
UIImage *background = [UIImage imageNamed:#"MyBackground.png"];
self.tableView.backgroundView = [[UIImageView alloc] initWithImage:background];
This will place your static (doesn't stretch or move) background behind all of your grouped tableview elements, such as the headers and cells.
Using the previous responses(particularly from dana_a) this is how I got the same thing to work
self.tableView.backgroundColor = [UIColor clearColor];
self.parentViewController.view.backgroundcolor = [UIColor colorWithPatternImage:[UIImge imageNamed:#"bgtest2.png"]];
This is in my viewWillAppear: method in for my case a detail view controller with a grouped tableview.
I placed this code in my ViewDidLoad method and it worked beautifully.
self.termsTableView.backgroundColor = [UIColor clearColor];
self.parentViewController.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"metal4.png"]];
I still haven't figured out why the above doesn't work or how to modify it so that it does, but by adding the subView to the window in the App Delegate instead of the tableView here I was able to get it to work.
Instead of just getting it to function and moving on I'd like to actually learn, so I'm still curious as to where I went wrong above. As such, I'll leave this as unanswered for a time and if you can tell me my error(s) I'll give you the up vote and the green check mark. Thanks!

Big activity indicator on iPhone

Does anyone know how to show a rounded squared with a spinning activity indicator? It is used in many apps. If you don't know what im talking about, it looks like the indicator when you change volume on your Mac but with a darker background. Im not sure if it is built-in to iOS or someone made it.
Like the one in this post but not full screen just the activity indicator
How to create a full-screen modal status display on iPhone?
Here's what I use when I want to show that kind of indicators.
UIView *loading = [[UIView alloc] initWithFrame:CGRectMake(100, 200, 120, 120)];
loading.layer.cornerRadius = 15;
loading.opaque = NO;
loading.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.6f];
UILabel *loadLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 25, 81, 22)];
loadLabel.text = #"Loading";
loadLabel.font = [UIFont boldSystemFontOfSize:18.0f];
loadLabel.textAlignment = UITextAlignmentCenter;
loadLabel.textColor = [UIColor colorWithWhite:1.0f alpha:1.0f];
loadLabel.backgroundColor = [UIColor clearColor];
[loading addSubview:loadLabel];
[loadLabel release];
UIActivityIndicatorView *spinning = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
spinning.frame = CGRectMake(42, 54, 37, 37);
[spinning startAnimating];
[loading addSubview:spinning];
[spinning release];
loading.frame = CGRectMake(100, 200, 120, 120);
Then you just add the 'loading' view to the view of your choice and you got it.
Hope this is what you needed.
Your screenshot is probably a usage of David Sinclair's DSActivityView module. Specifically, the DSBezelActivityView component of it. Or if not, it's a close copy.
http://www.dejal.com/developer/dsactivityview
I use DSActivityView all the time. Great library. Toss that thing up while pulling down data, keeps users and clients happy.
One option: MBProgressHUD.
I don't think that screenshot is my DSBezelActivityView; the metrics look a little different. But it is very similar.
Note, DSActivityView and its subclasses don't use any images or nibs; they're pure code.
To answer the original question, it'd be easy to modify DSBezelActivityView to omit the fullscreen gray background. You could do it by subclassing and overriding the -setupBackground method thusly:
- (void)setupBackground;
{
[super setupBackground];
self.backgroundColor = [UIColor clearColor];
}
Hope this helps!
Try this simple method, Its working well for me....
UIActivityIndicatorView *activityIndicator= [[UIActivityIndicatorView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];
activityIndicator.layer.cornerRadius = 05;
activityIndicator.opaque = NO;
activityIndicator.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.6f];
activityIndicator.center = self.view.center;
activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
[activityIndicator setColor:[UIColor colorWithRed:0.6 green:0.8 blue:1.0 alpha:1.0]];
[self.view addSubview: activityIndicator];
You're actually looking at using two UIView subclasses and a custom .png image to get the look you want.
The Gray translucent box would be a UIImageView object, to get the effect you're looking for you need a .png file of a grey square with rounded corners, it doesn't need to be the final size, as long as there's at least one pixel of straight edge between the corners it will work fine. You'll then load it in as a UIImage with the UIImage
stretchableImageWithLeftCapWidth:topCapHeight: method, this let's you specify the top, and left portions of the image that must stay the same, and a 1 pixel slice in each direction will be stretched out to fill the UIImage view you use the image in. http://www.bit-101.com/blog/?p=2275 has a great example of how this works.
So create a UIImage, then create a UIImageView using this image, set its opaque property to NO and the alpha property to something that looks good to you. Add this a subview of your current view.
Now you just need to add the spinning progress indicator, this is even easier, just create a new UIActivityIndicatorView and add it as a subview of the UIImageView you've already created.
The same basic method is used to create pretty much any resizable element in an iOS application. There's some examples of using them for buttons in Apple's UICatalog example code.

How do I set a background image for a grouped table view?

I've seen some iPhone applications that use a custom image as the background for a grouped UITableView, instead of the standard gray lines.
How is this achieved?
Here's what worked for me (and fairly simple once I figured it out ;)
1) Add a view in your app delegate and make it a subview of the window:
UIView *bgView = [[UIView alloc]initWithFrame:window.frame];
bgView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"screenBG.png"]];
[window addSubview:bgView];
[bgView release];
2) On each view controller .m file, under ViewDidLoad, set background color of that particular view to transparent (so the other bgView created above will show through):
self.view.backgroundColor = [UIColor clearColor];
And in my case, the view controller in step 2 was a tableviewcontroller. Looks great.
And BTW, doing the following in each view controller did NOT work well:
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"screenBG.png"]];
So follow steps 1 and 2 above.
Hope this helps out,
Tbone
Try this
- (void) viewDidLoad {
[super viewDidLoad];
self.tableView.backgroundColor = [UIColor clearColor];
self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed:#"wallpaper.png"]];
self.tableView.opaque = NO;
}
In another project (developed using 2.2.1) I did this by setting my UITableView's background opacity to 0%, and then simply layering a UIImageView behind it using Interface Builder. This allowed me to have a fixed background regardless of the table state. You can also set the background of the UITableView to be an image instead, but then the background scrolls with the table. (I don't have the code handy at the moment, but I got the tip a while back on the Apple developer forums).
Note that this can cause some performance issues. Apple discourages using transparency whenever possible because the GPUs on the pre-3GS models aren't particularly beefy.
You can use the +[UIColor colorWithPatternImage:(UIImage)] method like so:
self.tableView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"Background.png"]];
the problem with colorWithPatternImage: is that you need to use "patterned" images, otherwise your image will be tiled randomly
this link has a simple solution, if you want all your views to have the same background
http://howtomakeiphoneapps.com/2009/03/how-to-add-a-nice-background-image-to-your-grouped-table-view/
self.parentViewController.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"SortByCategory_320x480.png"]];
self.tableView.separatorColor = [UIColor clearColor];
self.tableView.backgroundColor = [UIColor clearColor];
Hope this will help. It won't display hideous translucent background behind the cells especially in case of Grouped UITableView.

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

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?
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
You can use the code below:
actionSheetObj.actionSheetStyle=UIActionSheetStyleBlackOpaque;
or
actionSheetObj.actionSheetStyle=UIActionSheetStyleBlackTranslucent;
actionSheetObj.actionSheetStyle=UIActionSheetStyleBlackTranslucent;
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
}
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.
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.