iOS5 Toolbar background image - iphone

I'm very new to iOS programming.
I'm trying to set the toolbar background to a custom image.
I'm also using storyboards.
How do I go about that?
Do I edit UIToolbar in the UI Kit framework? Do I need to change something in Storyboard?
Thanks,

You can use UIToolbar's built-in -setBackgroundImage:forToolbarPosition:barMetrics: method:
// portrait
[yourToolbar setBackgroundImage:[UIImage imageNamed:#"YourToolbarBkg-Portrait.png"] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
// landscape
[yourToolbar setBackgroundImage:[UIImage imageNamed:#"YourToolbarBkg-Landscape.png"] forToolbarPosition:UIToolbarPositionAny barMetrics: UIBarMetricsLandscapePhone];
YourToolbarBkg-Portrait.png will be 320x44 bkg image for portrait mode
YourToolbarBkg-Landscape.png will be 480x32 bkg image for landscape mode.

UIToolbar inherits from UIView. This just worked for me:
[topBar insertSubview:[[[UIImageView alloc] initWithImage:[UIImage imageNamed:BAR_BKG_IMG]] autorelease] atIndex:0];
UPDATED
topBar ------ is the outlet of the UIToolBar u are using
use this code where u are creating ur UIToolBar the class which implements the UIToolbar..
plus tell me y r u using Toolbar whats ur main purpose for it

Instead of editing UIToolBar, why not create a UIView of the same size and skin that however you would like? That would be easier if you are new.
Or if you want to override UIToolbar:
#implementation UIToolbar (CustomImage)
- (void)drawRect:(CGRect)rect {
UIImage *image = [UIImage imageNamed: #"image.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
#end

Had a right faff with background images for ToolBars and NavBars. I know setting the background image of a NavBar and ToolBar is generally a doddle. But, when you're presenting modal VC's, for some insane reason, where a NavBar is being added and you DO change the background image, it appears to double in size. Altering the height has strange results.
My issue was where I was using a NavController all over my App, but needed a modal view for one or two aspects of it. Simple enough. However, I needed either a NavBar or ToolBar type header with a Done button to pop the VC off the stack. Again, not an issue. But I needed the NavBar or ToolBar to look the same as everywhere else in my App.
I settled on a ToolBar, seeing as the VC was being presented modally. So, there my ToolBar sat, in typical Apple-blue. Nice, but not how the rest of my App looked, where a blackened image was being used for each NavBar. Using the iOS 5 appearance proxy, I altered the background image of the ToolBar. And this worked. But, unless I had the UIImage in exactly the proportions and size expected by the Tool Bar, I was in a pickle. The image simply did not look right at all. So, I decided to create a UIIMageView, where I could control the content mode, then insert a subview onto the toolBar.
Take a look at my code below.
UIImageView *toolbarImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:NAV_BAR_BACKGROUND]];
[toolbarImageView setFrame:[self.IBOToolBar bounds]];
[toolbarImageView setContentMode:UIViewContentModeScaleAspectFill];
[self.IBOToolBar insertSubview:toolbarImageView atIndex:1];
It's a bit of a fluff but I do hope this helps someone alter the image on their ToolBar.
NAV_BAR_BACKGROUND can be defined as follows:
#define NAV_BAR_BACKGROUND #"navBarBlackMattDarkSquare.png"

Related

UIToolbar gradient fix

I am using UIToolbar in my project for this lock screen. Everything is fine except the gradient on the UIToolbar is very short. I mean its height is not equal. I have attached the screen shot. I want the UIToolbar to be like figure B.
Any idea how to achieve this.
Best thing you can do is setting appearance for your UIToolBar:
UIImage *gradientImage = [[UIImage imageNamed:#"upperBar.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(-4, 300, 10, 300)];
UIToolbar *toolbar = [UIToolBar appearance];
[toolbar setBackgroundImage:gradientImage forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
Where upperBar.png is the gradient image you want.
A UIToolbar in iOS6 and earlier always draws its shine over the top 22px. If you want a bigger shine, you'll have to provide a background image using setBackgroundImage:forToolbarPosition:barMetrics:.
Two more things, though:
UIToolbar on an iPhone expects to be at the bottom of your content; if you're using it to give you a background suitable for the top, you should use a UINavigationBar instead.
The appearance of toolbars, navigation bars, and the lock screen has changed in iOS7. You may want to rethink your approach so that your app doesn't look bad in the near future.

Alter a UIBarButtonItem view to be transparent programmatically

I've had trouble getting this to work, nowhere have I seen a working example on the web. Now offering bounty on this as its making me crazy. It should be easy, but that doesn't seem to be the case.
I'd like my buttons on my UINavigationBar to be semi-transparent such that they allow the background of whatever is on the UINavigationBar to show through. This effect is seen in many applications, image examples below. You can do this by setting a custom background on the item, which i think is an unacceptable solution because it requires that you prepare images beforehand, and they won't be adaptable for variable buttons etc. They will not look like Apple UI and I don't believe there is a reason to do this either, UIKit is already drawing the background for these buttons, we just need to change it. The correct solution uses the bar items and views generated by Apple's apis.
UIBarButtonItem is not a UIView subclass. When you create one and add it to a UINavigationBar, some code somewhere in the framework draws a view for it. The framework methods seem to resist anything related to allowing transparency of the bar items, such as the tintColor property.
For example, this does NOT work:
UINavigationItem *item = [[UINavigationItem alloc] init];
UIBarButtonItem *editButton = [[UIBarButtonItem alloc] initWithTitle:#"SUCKS" style:UIBarButtonItemStyleBordered target:self action:#selector(whatever:)];
editButton.tintColor = [UIColor colorWithWhite:0.4 alpha:0.3];
item.leftBarButtonItem = editButton;
Nothing I do will make UINavigationBar allow semi-transparency for its bar items. I believe at runtime we need to:
Get the image for the bar item
Mask it for transparency
Set the new image on the bar item
But I haven't been able to get the image at runtime or mask it properly. How do you do this?
Create a custom uiview and draw a semi-transparent black rectangle in it and use that view with initWithCustomView.
see
and
Failing that, you may have to use an image (png). e.g. a 1x1 black pixel png with 30% opacity.You could then initWithImage.
EDIT: I have had this second approach working using:
buttonThree = [[UIBarButtonItem alloc] initWithTitle:#" sort button " style:UIBarButtonItemStyleBordered target:self action:#selector(sortMethod)];
UIImage *thebgUIimage = [UIImage imageNamed:#"semi.png"];
[buttonThree setBackgroundImage:thebgUIimage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
This results in a button that has a transparent background image that the navbar background image shows through. However, you would need to create an image with the rounded corners on and so need an image for each button width. Also I found this thread after trying the above
A brilliant hack is to use the UISegmentedControl with a single segment (as a button) and set its tint color. Have a look at http://charles.lescampeurs.org/2011/02/10/tint-color-uibutton-and-uibarbuttonitem. I have personally implemented this. Feel free to ask any questions.
Instead of searching for code and breaking your head, my suggestion is just to have transparent image which has just border similar to button (add shadow if necessary), create a button of custom type, add the transparent background image to it and you can text as you want. From this custom button, create your bar button item accordingly.
If you're targeting for iOS 5, you can set the background image of the button.
[_button setBackgroundImage:#"image" forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Note that you'll need to set background images for state UIControlSateSelected and again for both control states for barMetrics: UIBarMetricsLandscape, if your application allows landscape orientation.
Note again this is an iOS 5 feature.
I believe your answer is here: http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/

background image confusion using UINavController

I am having trouble explaining this to myself but here is my best attempt.
I have a rootViewController that has a unique background imageView (placed in IB). When the user advances from that screen a navigationController is loaded in with a standard background color and can advance through the next screens. Is it possible to have just one image always stay as the background, i know i can use:
self.tableView.backgroundColor = [UIColor clearColor];
to allow the background to show through, but for some reason when i do this i see the first background image(the unique one), not the one that i have added to the Navigation controller.
This is the code that i use to add a bg to the nav controller:
UIImage *img = [UIImage imageNamed:#"v3_default_bg.png"];
UIImageView *bgView = [[UIImageView alloc] initWithFrame:self.view.frame];
bgView.image = img;
[appDelegate.navigationController.view sendSubviewToBack:bgView];
My question is this, is it possible to apply a non-unique background to the navigationController.
I also tried addSubview: instead of sendSubviewToBack: but that just blocks out my content. Could anyone lend me some thoughts? Thanks.
[appDelegate.navigationController.view sendSubviewToBack:bgView];
does not add the subview to the navigationController.view. You need to add it, then send it to the back:
[appDelegate.navigationController.view addSubview:bgView];
[appDelegate.navigationController.view sendSubviewToBack:bgView];
hide the navigation bar and then put Ur view there....

Setting a jpg as the background for a UIView?

I know this is a very beginner question, but I'm obviously a beginner. I have already made a my TabBar but I want to set the background of one of the views as a (jpg) I created. I need to add the background in code (not IB) so that I can allow rotation and resizing when the iphone is rotated.
-thanks
You need to use a UIImageView, which is a subclass of UIView. You can create it as follows:
UIImageView *myImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"myImage.jpg"]];
[self.view addSubview:myImage];
[myImage release];
...so here I've created a UIImageView that uses a JPG called 'myImage' (it will automatically resize the view to fit the image), added it to my view controller, and then cleaned up my memory.
You can try this one to set an image as a background for a view programmatically:
view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"imageName.png"]]
Add an instance of UIImageView to your view, and set it's image to an instance of UIImage created using your file.
You can add the image view in IB or in code -- there's nothing about doing it in IB that would prevent you from resizing, rotating, etc.

How would I draw a line at the bottom of a UINavigationBar?

The design I've been given for an iPhone app I'm working on calls for a 1px red line at the bottom of the navigation bar. I know how to draw a line with Quartz and -drawRect, but how do I get access to the UINavigationBar's view? Or would it work to draw the line in the app's main view, on top of everything else?
Duncan Wilcox's answer below works to get the line drawn, but then buttons on the bar become impossible to press.
If I do [self.navigationItem.titleView.superview sendSubviewToBack:titleView] then buttons that are created in nib files work, but not ones that are dynamically added.
I guess the answer depends on where you want the red line, as part of the navigation bar or just under it. That would be only 1 pixel difference, but designers are demanding these days :)
If you want it below the navigation bar you definitely have to put it in all of the app's views where the line is needed.
There's a surprisingly simple way to alter the look of the navigation bar, I used it for skinning the entire navbar look but it will probably work for even only some parts of the navbar if you make the image partially transparent.
Basically we want to skin the UINavigationItem of a UIViewController that's in your navigation hierarchy.
create a 320x44 image containing your custom navbar look
add a UIImageView to the XIB where the UINavigationItem is
link the titleView property of the UINavigationItem to the UIImageView
This almost works, except that the title view will be resized in wierd ways. To fix that I have a UIImageView subclass that keeps the image properly set:
#implementation TitleViewHack
- (void)setFrame:(CGRect)frame
{
frame.size.width = 320;
if(frame.origin.x > 0 && frame.origin.x < 20)
frame.origin.x = 0;
[super setFrame:frame];
}
#end
So instead of using a UIImageView above you'll use this TitleViewHack class.
This is what I've settled upon:
// UINavigationBar subclass
- (void)drawRect:(CGRect)rect {
UIImage *image = [UIImage imageNamed: #"background_navbar.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}