Wrong image Y when customizing a tab bar in iOS 5. - ios5

iOS includes setFinishedSelectedImage:withFinishedUnselectedImage: for customize the tab bar.
I created a few textures with a 49 height, and I saw a strange black border at the bottom. Then, after adding an alpha channel, I realized the problem was that the images were displaced about 4 points up. I send you a screenshot.
Moreover, this one has the same problem (the black strange line), although is difficult to see it.
http://kurrytran.blogspot.com.es/2011/10/ios-5-tutorial-creating-custom-tab-bar.html
This is the code:
UIImage *selectedImage0 = [UIImage imageNamed:#"count_button_pressed"];
UIImage *unselectedImage0 = [UIImage imageNamed:#"count_button_released"];
UIImage *selectedImage1 = [UIImage imageNamed:#"date_button_pressed"];
UIImage *unselectedImage1 = [UIImage imageNamed:#"date_button_released"];
UIImage *selectedImage2 = [UIImage imageNamed:#"stats_button_pressed"];
UIImage *unselectedImage2 = [UIImage imageNamed:#"stats_button_released"];
UITabBar *tabBar = self.tabBar;
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
[item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
[item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
[item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];
Do you know what happens?
Thanks in advance.

tabbaritem finished images are not vertically centered on the tabbar, since they are a replacement for standard tab bar item icons.
Tab bar item images are displaced to the top, thus leaving space for the tab bar item title text.
tabbaritem finished images should contain the icon only. To change the selected item background in a tabbar use the selectionIndicatorImage property in UITabBar

You can create transparent image and configure your UITabbar to use it as selection image.
It's clear and elegant in my opinion :)
// Create Transparent image on the fly
CGRect rect = CGRectMake(0, 0, 1, 1);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [[UIColor clearColor] CGColor]);
CGContextFillRect(context, rect);
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// Set tabbar selection image to be the transparent image we've created before
tabBar.selectionIndicatorImage = img;

Related

How to set image for UIBarButtonItem Flexible space - IOS

Have a look at this image...
I want to design toolbar like this, Each UIBarButtonItem should be separated by a thin line. So I have inserted flexible space button in between each UIBarButtonItem (that helps me in aligning UIBarButtonItem while orientation changes), however if I set an image for that, its no more acting as flexible button, changes to normal UIBarbutton.
So I need an flexible space button with an image.. Any idea how to do it.
(OR)
How to design a UIToolbar like above... Any helps is really appreciated. Thanx
To set background image for UIBarbuttonItem
UIImage *faceImage = [UIImage imageNamed:#"facebook.png"];
UIButton *face = [UIButton buttonWithType:UIButtonTypeCustom];
face.bounds = CGRectMake( 0, 0, faceImage.size.width, faceImage.size.height );
[face setImage:faceImage forState:UIControlStateNormal];
UIBarButtonItem *faceBtn = [[UIBarButtonItem alloc] initWithCustomView:face];
I think this will help you..
UIImage* topImage = [UIImage imageNamed:#"TabBarGradient.png"];
// Create a new image context
UIGraphicsBeginImageContextWithOptions(CGSizeMake(width, topImage.size.height*2), NO, 0.0);
// Create a stretchable image for the top of the background and draw it
UIImage* stretchedTopImage = [topImage stretchableImageWithLeftCapWidth:0 topCapHeight:0];
[stretchedTopImage drawInRect:CGRectMake(0, 0, width, topImage.size.height)];
// Draw a solid black color for the bottom of the background
[[UIColor blackColor] set];
CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(0, topImage.size.height, width, topImage.size.height));
// Generate a new image
UIImage* resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return resultImage;
and for more detail you can check this...
http://idevrecipes.com/2011/01/04/how-does-the-twitter-iphone-app-implement-a-custom-tab-bar/
If didn't solve your problem..let me know..

Loading UIview background fastly using image

Iam developing one application.In that i want to set the uiview background as image.That image size is 1.6 mb.I followed the below code.
UIGraphicsBeginImageContext(self.view.frame.size);
[[UIImage imageNamed:#"image.png"] drawInRect:self.view.bounds];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.view.backgroundColor = [UIColor colorWithPatternImage:image];
But it takes more time compared to small size image.So please help me how to load 3mb size of image also like as small size of image.
You could do the drawing operations on a background queue, so it won't freeze the UI:
CGRect imgRect = self.view.bounds;
dispatch_async(dispatch_get_global_queue(0, 0), ^{
UIGraphicsBeginImageContext(imgRect.size);
[[UIImage imageNamed:#"image.png"] drawInRect:imgRect];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIColor* bgcolor = [UIColor colorWithPatternImage:image];
dispatch_async(dispatch_get_main_queue(), ^{
self.view.backgroundColor = bgcolor;
});
});
Also optimize the image by using the tool ImageOptim.
Its best if you resize image and then add in Application bundle to execute faster.
here I think there is no need get image firstly for resizing for UIView s pattern image in background.
You can solve memory issue like this:
NSString *imgfile = [[NSBundle mainBundle] pathForResource:#"image" ofType:#"png"];
UIImage *currentImage = [UIImage imageWithContentsOfFile:imgfile];
self.view.backgroundColor = [UIColor colorWithPatternImage:currentImage];
Refer ios-imagenamed-vs-imagewithcontentsoffile link.
EDIT : Use #phix23 answer for smooth UI

UINavigationBar with solid color iOS 5

I'm using the category to customize nav bar. My code is:
- (void) drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColor(context, CGColorGetComponents([self.tintColor CGColor]));
CGContextFillRect(context, rect);
}
It works well, but not in iOS 5. I need nav bar color to be solid without any gradient. How should I do this?
As I know, for iOS 5 the only way to replace drawRect method is to make a subclass, but is there any way to make all navigation controllers to use UINavigationBar subclass instead of original class?
In iOS 5 you can use the UIAppearance protocol to set the appearance of all UINavigationBars in your app. Reference: link.
The way I got a solid color was to create a custom image for the navigation bar, and set it as UINavigationBars background. You might have to create the image with the same size as the UINavigationBar, at least that's what I did.
In your app delegate, do something like this:
UIImage *image = [UIImage imageNamed:#"navbarbg.png"];
[[UINavigationBar appearance] setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
You also have to add the UIAppearanceContainer protocol to the header file:
#interface AppDelegate : UIResponder <UIApplicationDelegate, UIAppearanceContainer>
#end
You can probably achieve the same thing by setting some color or something, instead of an image. But I found this to be an easy solution.
This covers both iOS 5 and iOS 4.3 and earlier
https://gist.github.com/1774444
This is more of a hack and has consistently worked for me.
This needs to be in the AppDelegate file.
//Create a size struct.
CGSize size = CGSizeMake(768, 50);
//CReate a imagecontext from a non-existing image. You can use a existing image as well, in that case the color will be the color of the image.
UIImage *backgroundImage = [UIImage imageNamed:#"nonexist.png"];
UIGraphicsBeginImageContext(size);
[backgroundImage drawInRect:CGRectMake(0,0,size.width,size.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navigationController = [[UINavigationController alloc]initWithRootViewController:self.viewController];
Set the background color to be the color of your choice.
[self.navigationController.view setBackgroundColor:[UIColor blackColor]];
self.window.rootViewController = navigationController;
[self.window makeKeyAndVisible];
//Most important line.
[navigationController.navigationBar setBackgroundImage: newImage forBarMetrics:UIBarMetricsDefault];

How to get a color image in iPhone sdk

I want something as follows
UIImage *solid = [UIImage imageWithColor:[UIColor darkGrayColor]];
to create an image with respect to some color.
how to do it in iPhone sdk.
You can draw the color into a CGContext and then capture an image from it:
- (UIImage *)imageWithColor:(UIColor *)color andSize:(CGSize)size {
//Create a context of the appropriate size
UIGraphicsBeginImageContext(size);
CGContextRef currentContext = UIGraphicsGetCurrentContext();
//Build a rect of appropriate size at origin 0,0
CGRect fillRect = CGRectMake(0,0,size.width,size.height);
//Set the fill color
CGContextSetFillColorWithColor(currentContext, color.CGColor);
//Fill the color
CGContextFillRect(currentContext, fillRect);
//Snap the picture and close the context
UIImage *retval = UIGraphicsGetImageFromCurrentImageContext(void);
UIGraphicsEndImageContext();
return retval;
}
If you're just trying to create a solid rectangle of colour why not just do something like
UIView *solid = [[UIView alloc] initWithFrame:someFrame];
solid.backgroundColor = [UIColor greyColor];
And then add the view to whatever subview you want to show the solid colour.
(That is, of course only if that's what you're trying to achieve. Maybe you aren't)

using image or tint color on uinavigationbar in iphone?

how do i show a background image on a navigation bar or give tint color to the navigation bar in a native iphone application??
For iOS5 use the following lines of code:
UINavigationBar *navBar = [[self navigationController] navigationBar];
UIImage *backgroundImage = [UIImage imageNamed:#"nav-bar-background-normal"];
[navBar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];
For backward compatibility do a check to see if the navigation bar responds to setBackgroundImage:forBarMetrics:
More information on:
http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/
This's how I did on iOS4:
#import <QuartzCore/QuartzCore.h> // For .layer
self.navigationController.navigationBar.layer.contents = (id)[UIImage imageNamed:#"navigationBarBackgroundImage"].CGImage;
self.navigationController.navigationBar.tintColor = [UIColor orangeColor];
No need to switch subviews between z-orders (-exchangeSubviewAtIndex:withSubviewAtIndex:), both background image and tintColor set in one line of code, and works with #2x image too.
Was looking for this a week ago. Found this over here discussions. apple. com/thread.jspa?threadID=1649012&tstart=0 (sorry won't let me post a real link).
-(void)setBackgroundImage:(UIImage*)image withTag:(NSInteger)bgTag{
if(image == NULL){ //might be called with NULL argument
return;
}
UIImageView *aTabBarBackground = [[UIImageView alloc]initWithImage:image];
aTabBarBackground.frame = CGRectMake(0,0,self.frame.size.width,self.frame.size.height);
aTabBarBackground.tag = bgTag;
[self addSubview:aTabBarBackground];
[self sendSubviewToBack:aTabBarBackground];
[aTabBarBackground release];
}
/* input: The tag you chose to identify the view */
-(void)resetBackground:(NSInteger)bgTag {
[self sendSubviewToBack:[self viewWithTag:bgTag]];
}
I made this as a category to UINavigationBar. To set it a background image for a UINavigationBar inside a UINavigationBarController, I did this:
[navigationControllerForChannels.navigationBar setBackgroundImage:[UIImage imageNamed:#"top_bar.png"] withTag:48151623];
I've had some buginess when updating the tab bar, so you'll want to call
[self.navigationController.navigationBar resetBackground:48151623];
After any modifications to the bar.
You can override UINavigationBar drawRect. The code can be placed to appDelegate.m
I've tested it and it's working on 3x and 4x iOS.
#implementation UINavigationBar (UINavigationBarCategory)
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor blackColor]; //tint color
UIImage *img = [UIImage imageNamed: #"navBarBg.png"]; // your image
[img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
self.tintColor = color;
}#end
For the iOS5 and iOS6 I've used this solutions and it worked perfectly, Making a Universal UINavigationBar Background Image.
iPhone Retina Portrait 640px x 88px / iPhone Non-Retina Portrait 320px x 44px
Inside AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
Place this code
// Set the status bar to black color.
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleBlackOpaque animated:NO];
// Change #"menubar.png" to the file name of your image.
UIImage *navBar = [UIImage imageNamed:#"menubar.png"];
[[UINavigationBar appearance] setBackgroundImage:navBar forBarMetrics:UIBarMetricsDefault];
Don't forget to change the image name (menubar.png)
Check out this link for the full answer http://www.lwxted.com/blog/2012/add-custom-background-image-uinavigationbar-ios-5/
a background image is going to take a bit more work (you might want to try setting a titleView that's the same size as the bar itself; I haven't tried this myself) or adding a view behind existing subviews. Tint color is easy: navBar.tintColor = [UIColor orangeColor];
If you use the CGImage solution, you may have a problem with image size:
CGRect layer=self.navigationController.navigationBar.frame;
layer.size.height=57.0;
layer.origin.y=0;
self.navigationController.navigationBar.frame=layer;
CGImageRef imageRef = [UIImage imageNamed:#"myImg.png"].CGImage;
self.navigationController.navigationBar.layer.contents = (id)imageRef;
It seems to me that the image is streched down, since the layer seems to have a height of 44.0 pixel, but a background image for the UINavigationBar should be at least 57.0.
If you try to move the layer's frame, all the buttons will move within it.