Change the background color of UINavigationBar - iphone

I'd like to change the background color of an UINvaigationBar and I used tintColor property but it's not changing the color. You can checkout the code below.
In my Appdelegate I create a UITabBarController
tabbar = [[UITabBarController alloc] init];
Then I create a UINavigationController and attach my UITableViewController to it
UINavigationController *myNavigation = [[UINavigationController alloc] initWithRootViewController:myViewController];
Then attached the UINavigationControllers to my tabbar like this
[tabbar setViewControllers:viewControllers]; //viewControllers is an array of UINavigationControllers
I tried setting the property tintColor in myAppdelegate like this
[[myNavigation navigationBar] setTintColor:[UIColor redColor]];
But this didn't work as expected and so I tried the same in my ViewController
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self.navigationController.navigationBar setTintColor:[UIColor blackColor]];
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
self.navigationItem.title = #"Test";
}
And still nothing happens. Please checkout the image below to see how navigation bar looks now.
Appreciate your help.
Cheers
Jugs

As a work around you may can use image on place of tint color please check below code for same.
if ([myNavigation respondsToSelector:#selector(setBackgroundImage:forToolbarPosition:barMetrics:)]) {
[myNavigation setBackgroundImage:[UIImage imageNamed:BAR_IMAGE_NAME] forbarMetrics:UIBarMetricsDefault];
}else {
[myNavigation insertSubview:[[[UIImageView alloc] initWithImage:[UIImage imageNamed:BAR_IMAGE_NAME]] autorelease] atIndex:0];
}

Related

Custom UITabBarController -- Best Approach

What would be the best way to create a completely custom UITabBarController look alike.
I need full customization of its size, animate it, etc.
A solution that I have is just using a UIView for the tabbarcontroller that then replaces the UIView above it depending on what button is selected on that UIView.
What is the best approach?
This is a pretty good guide for doing just that:
http://www.felipecypriano.com/2012/02/27/how-to-customize-uitabbar-on-ios-5/
This example is taken from that site:
Basically create a backgroundImage, selectionIndicatorImage, adjust the fonts as appropriate.
// Probably put these in your AppDelegate, setup the background and selection image
[[[self tabBarController] tabBar] setBackgroundImage:[UIImage imageNamed:#"background"]];
[[[self tabBarController] tabBar] setSelectionIndicatorImage:[UIImage imageNamed:#"selected"]];
// In your VC which is inside the tab bar
- (id)init {
self = [super initWithNibName:#"MyNibName" bundle:nil];
if (self) {
self.tabBarItem = [[UITabBarItem alloc] initWithTitle:#"The Title" image:nil tag:0];
[[self tabBarItem] setFinishedSelectedImage:[UIImage imageNamed:#"tab_icon"] withFinishedUnselectedImage:[UIImage imageNamed:#"tab_icon"]];
[[self tabBarItem] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor, nil] forState:UIControlStateNormal];
}
}

how to customize QLPreviewController's navBar and toolbar tintColor

QLPreviewController * preview = [[QLPreviewController alloc] init];
preview.dataSource = self;
preview.currentPreviewItemIndex = sender.tag;
preview.editing= YES;
[self presentModalViewController:preview animated:YES];
[preview release];
These two lines does not work for me. so be careful before writing these lines.
[preview.tabBarController.tabBar setTintColor:[UIColor blackColor]];
[preview navigationController].navigationBar setTintColor: [UIColor blackColor]];
Since iOS5 you can theme controls based on instance, globally or when contained by specific container classes. Since iOS6 the former method of subclassing QLPreviewController to set the tintColor of the UINavigationBar stopped working.
Consider one of the following as an example of a workaround that is compatible with iOS5 and iOS6:
Any UINavigationBar contained within a QLPreviewController:
[[UINavigationBar appearanceWhenContainedIn:[QLPreviewController class], nil]
setTintColor:[UIColor blackColor]];
or globally set the tintColor of all UINavigationBar instances within your app with:
[[UINavigationBar appearance] setTintColor:[UIColor blackColor]];
This same strategy works with the UITabBarController.
set style of UINavigationController with this line..
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
and for change the color of TabBar just Add the below code in viewWillAppear of your class
CGRect frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width, 48);
UIView *v = [[UIView alloc] initWithFrame:frame];
[v setBackgroundColor:[UIColor colorWithRed:0.1 green:0.2 blue:0.6 alpha:0.8]];
[v setAlpha:0.5];
[[self.tabBarController tabBar] insertSubview:v atIndex:0];
[v release];
If you want to change the tintColor of the navigationBar you can push your QLPreviewController instead present it modally:
//i assume that you already have a navigationController
[[self navigationController] pushViewController:previewer animated:YES];
[self.navigationController.navigationBar setTintColor:[UIColor blackColor]];
For the bottom bar i think that is a UIToolbar not a UITabBar, probably you cant change the color (i dont know), but surely you can't call preview.tabBarController.tabBar.
I found a solution , though it is not the correct way but it works:
Make subclass of QLPreviewController
MyQLPreviewController.h
#interface MyQLPreviewController : QLPreviewController
#end
and in .m of that new subclass, copy the following code
#implementation MyQLPreviewController
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
UIToolbar *toolbar = [self getToolBarFromView:self.view]; //NOTE: Not the correct apperoach! could not think better solution, as iOS does not allow to access the toolbar properties in QLPreviewController
toolbar.barTintColor = [UIColor redColor];
}
- (UIToolbar *)getToolBarFromView:(UIView *)view
{
for (UIView *subView in view.subviews)
{
if ([subView isKindOfClass:[UIToolbar class]])
{
return (UIToolbar *)subView;
}
else
{
UIToolbar *toolBar = [self getToolBarFromView:subView];
if (toolBar)
{
return toolBar;
}
}
}
return nil;
}

Transparent UITabBarController with changeable view in background

I want to have a UITabBarController, which is has an alpha of 0.5, whose transparency allows you to see a view in the background. The background view has to be accesible and changeable.
I'm able to add the background using this technique: https://gist.github.com/1157542
It's a Category which adds a subview to the UITabBarController, and sends the subview to the back. However, because it's a category, I can't make the subview a property. So I can't really access it.
Is there a way to make this background view more flexible and accessible? So I could, for instance, add other subviews to it easily from any of the tab bar controller's view controllers?
Instead of a category, you should subclass UITabBarController. This will allow you to have finer control over the object. Here's an example of a subclass.
// MPCustomTabBar.h
#interface MPCustomTabBar : UITabBarController
- (void) setBackgroundImage:(UIImage *)image;
#end
// MPCustomTabBar.m
#interface MPCustomTabBar
- (void) setBackgroundImage:(UIImage *)image {
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,320,480)];
imageView.backgroundColor = [UIColor colorWithPatternImage:i];
[[self view] addSubview:imageView];
[[self view] sendSubviewToBack:imageView];
[[self view] setOpaque:NO];
[[self view] setBackgroundColor:[UIColor clearColor]];
[imageView release];
}
#end
Now you can do all the customization you want, alloc and init your new subclass by something like this:
MPCustomTabBar *bar = [[MPCustomTabBar alloc] init];
A solution to my problem might be simply this..
In my AppDelegate, just before [self.window makeKeyAndVisible];
self.theImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image1.png"]];
[self.tabBarController.view insertSubview:self.theImage atIndex:0];
I can then easily change this image, in any of the tab bar controller's view controllers, like:
AppDelegate *appDelegate= (AppDelegate *)[[UIApplication sharedApplication] delegate];
appDelegate.theImage.image = [UIImage imageNamed:#"image2.png"];
.. no categories required.
Here's what worked for me:
Make TabBar transparent (either by Storyboard or programmatically) by setting the Tint- and Background to Clear Color and Opaque to No.
The black background color is actually the window's colour. Assign the image you want to use as the background to the window itself:
UIImage *i = [UIImage imageNamed:#"main_background.png"];
UIColor *c = [[UIColor alloc] initWithPatternImage:i];
[self.window setBackgroundColor:c];

UIView change background color to image

I managed to successfully change some of my UIView background to a custom image using
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"myCustomBackground.jpg"]];
But it does not work on a particular view in a controller that is presented modally as such,
LoginViewController *loginViewController = [[LoginViewController alloc] initWithNibName:#"LoginViewController" bundle:[NSBundle mainBundle]];
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:loginViewController];
navController.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
navController.navigationBar.barStyle = UIBarStyleBlack;
[self presentModalViewController:navController animated:NO];
[loginViewController release];
[navController release];
It seems like self.view inside this controller is behind the view it was showing.
EDIT
LoginViewController.m
- (void)viewDidLoad {
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"myCustomBackground.jpg"]];
}
self.view in this case seems to be hidden behind the current view that it's displaying. I did not add any subView beforehand.
As you mentioned in your comments, your view contains UIScrollView, UILabel and UIButton.
You should set to all this subviews property backgroundColor = [UIColor clearColor];. Hopefully that would help.
If you are editing subview in IB then you should find property Background in Attributes Inspector and select Clear Color (for all subviews).

Customized navigation bar hides buttons

Hope you can help with this one too...
I wanted to customize my navigation bar by adding custom background picture. I found out perfect but a bit complicated method called:NavigationSwizzle. In previous project I worked without any serious problems, but now I'm stuck...
From my AppDelegate I am calling this static method:
#implementation SCAppUtils
+ (void)customizeNavigationController:(UINavigationController *)navController
{
//Customizing navigation BAR
UINavigationBar *navBar = [navController navigationBar];
[navBar setTintColor:kSCNavBarColor];
//Customizing TOOLBAR
[navController setToolbarHidden:NO animated:YES];
UIToolbar *toolBar = [navController toolbar];
UIImageView *imageView = (UIImageView *)[navBar viewWithTag:kSCNavBarImageTag];
UIImageView *imageView2 = (UIImageView *)[toolBar viewWithTag:kSCNavBarImageTag];
if (imageView == nil)
{
Utilities *utilities = [[Utilities alloc]init];
UIImage *img = [UIImage imageNamed:#"nav-bar-background.png"];
UIImage *img2 = [UIImage imageNamed:#"toolbar-background.png"];
imageView = [[UIImageView alloc] initWithImage:img];
imageView2 = [[UIImageView alloc] initWithImage:img2];
[imageView setTag:kSCNavBarImageTag];
[imageView2 setTag:kSCNavBarImageTag];
[navBar insertSubview:imageView atIndex:0];
[toolBar insertSubview:imageView2 atIndex:0];
[imageView release];
[imageView2 release];
[utilities release];
}
}
In rootNavigationController after calling second view controller by pushing it on the stack my right button, self.title, activityIndicator don't show. If I comment or set atIndex:-1 in line [navBar insertSubview:imageView atIndex:0]; then buttons show, but my customized background is gone and I get regular iPhone navigational tab.
In didSelectRowAtIndex of rootNavigationController I have:
//ADD BACK BUTTON TO VIEW
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:#"Home" style:UIBarButtonItemStyleDone target:nil action:nil];
self.navigationItem.backBarButtonItem = backButton;
//Home Button color
self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:166.0 / 255 green:179.0 / 255 blue:191.0 / 255 alpha:1.0];
//PUSH TO NEXT VIEW
[self.navigationController pushViewController:detailViewController animated:YES];
Thank you in advance...
If you need more code or explanation, please don't hesitate to ask me...
Best regards,
Luka
EDIT:
Ok, I can make this question much simpler. I have a custom background image in my navigation bar. This image is obviously covering my
self.navigationItem.title = #"TITLE";
If I put alpha to: 0.3 of imageView that is in the background I can see my title:
imageView = [[UIImageView alloc] initWithImage:image];
[imageView setAlpha:0.3];
[imageView setTag:kSCNavBarImageTag];
[navBar insertSubview:imageView atIndex:0];
So the question is how can I send my navigationItem.title to front? Is it a UIView class descendent?
EDIT 2:
Really weird thing is that title is visible (above background image) in the rootController but after pushing another viewController title goes behind te background imageView ?!
I honestly think you forgot to add this code in the main.m. You main.m should look something like this:
#import <UIKit/UIKit.h>
#import "AppDelegate.h"
#import "SCClassUtils.h"
int main(int argc, char *argv[])
{
[SCClassUtils swizzleSelector:#selector(insertSubview:atIndex:)
ofClass:[UINavigationBar class]
withSelector:#selector(scInsertSubview:atIndex:)];
[SCClassUtils swizzleSelector:#selector(sendSubviewToBack:)
ofClass:[UINavigationBar class]
withSelector:#selector(scSendSubviewToBack:)];
#autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
}
You might want to try this to customize your Navigationbar instead. I use it in my apps and it works like a charm
UIImage *theImage = [UIImage imageNamed:#"barImage.png"];
[self.navigationController.navigationBar insertSubview:[[[UIImageView alloc] initWithImage:theImage] autorelease] atIndex:0];
See if that fixes your issues with the buttons not appearing.
I found a solituion for my work. Create a view (viewBackground) with all the images and colors that conform the navigation bar and then y convert it in a image and use it like a background
UIGraphicsBeginImageContextWithOptions(viewBackground.bounds.size, viewBackground.opaque, 0.0);
[viewBackground.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[[UINavigationBar appearance] setBackgroundImage:img forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setBackgroundImage:img forBarMetrics:UIBarMetricsDefault];