I have successfully added a background image to my UINavigationBar with the following code:
UIImageView *barView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"subHeader_lg.png"]];
[calculatorBar addSubview:barView];
[barView release];
However, with this method, the title of the view is covered by the image.
If I navigate further into the app, and then back, the title appears on top of the background image like so:
Any ideas how I can get the title to appear on top from the beginning?
I have tried pushing the barView to the back, but that makes it hidden behind everything else.
EDIT:
It seems that the custom draw function is the accepted answer, but I am unable to get the draw function to be called. I have this code at the bottom of my appdelegate.m file
#implementation UINavigationBar (UINavigationBarCustomDraw)
- (void)drawRect:(CGRect)rect
{
UIImage *image = [UIImage imageNamed: #"subHeader_lg.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
#end
When you call "addSubview" it adds it above any view that have already been added, thus covering the title.
What you want is
[calculatorBar insertSubview:barView atIndex:0];
However, this won't make it "stick" on subsequent pushes, so use the methods described at http://www.developers-life.com/custom-uinavigationbar-with-image-and-back-button.html for a better solution.
Also in iOS 5, Apple has added a built in way to customize the nav bar see http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAppearance_Protocol/Reference/Reference.html#//apple_ref/doc/uid/TP40010906
To set the background image on your navigation bar, use the following.
On iOS 5.x, use
[calculatorBar setBackgroundImage: barView.image forBarMetrics: 0];
On iOS 4.x use
calculatorBar.layer.contents = (id)barView.image.CGImage;
Related
I have a UIProgressView that has been customised with a progress and track image. I also customised the size of the progress view. This works fine in iOS 6. I am facing problems getting this to work in iOS7.
_progress.progressViewStyle = UIProgressViewStyleBar;
_progress.trackImage = [UIImage imageNamed:#"summary-progress-track.png"];
_progress.progressImage = [UIImage imageNamed:#"summary-progress.png"];
_progress.frame = CGRectMake(50, 50, 100, 10);
Not only is the height being ignored but the custom images do not get applied. I just get a blue tinted progress bar like this:
I think the default tint colour is somehow overriding the progress images. I have also tried setting this with UIAppearance but it did not work.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[[UIProgressView appearance] setProgressImage:[UIImage imageNamed:#"summary-progress.png"]];
[[UIProgressView appearance] setTrackImage:[UIImage imageNamed:#"summary-progress-track.png"]];
return YES;
}
Personally I use the MPProgressHUD for all progress tracking on a view. Here's the link to the download
https://github.com/jdg/MBProgressHUD
The usage is as simple as it get. Here's a tutorial you might like to check out.
http://code.tutsplus.com/tutorials/ios-sdk-uiactivityindicatorview-and-mbprogresshud--mobile-10530
The MPProgressHUD has a specific method to show custom images.
This should be helpful if you have not already seen this.
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/UIProgressView.html#//apple_ref/doc/uid/TP40012857-UIProgressView-SW1
the blue color is the default tint color for the control in iOS7 that gets applied.
Found a solution. If anyone else is stuck on this check out this answer and suggested code to workaround the issue: UIProgressView custom track and progress images in iOS 7.1
I print the progress's subviews and find that one of them's frame width is 0,
so after
[_videoProgressView setProgress:progress animated:NO];
reset the track and progress images
UIImageView *trackImageView = _videoProgressView.subviews.firstObject;
UIImageView *progressImageView = _videoProgressView.subviews.lastObject;
CGRect trackProgressFrame = trackImageView.frame;
trackProgressFrame.size.height = _videoProgressView.frame.size.height;
trackImageView.frame = trackProgressFrame;
progressImageView.frame = trackProgressFrame;
progressImageView.image = progressImage;
trackImageView.image = trackImage;
On my nav bar, I have a couple of rightBarButtonItems that have custom icons (the icon images are white, which worked well with the basic color scheme of iOS 6).
Under iOS 7, loading the images using initWithTitle (see code snippet 1) replaces the "white" color in the icon with the proper global tint (a specific color of dark blue in this case)
Code Snippet 1:
UIBarButtonItem *refreshButton = [[UIBarButtonItem alloc] initWithTitle:#"" style:(UIBarButtonItemStyle) UIBarButtonSystemItemCancel target:(self) action:#selector(refreshList)];
refreshButton.image = [UIImage imageNamed:#"RefreshIcon.png"];
However, I needed to use initWithCustomView to overcome a weird change in behavior that was causing the icons to move out of view. The basic idea was to specifically set the size of the icons. initWithCustomView solved the sizing problem, but does not display the button images with the global tint, they are displayed in the color of the image (white). Code Snippet 2 shows how I am creating the button with initWithCustomView.
Code Snippet 2:
CGRect frameCustomButton2 = CGRectMake(0.0, 0.0, 18.0, 18.0);
UIButton *customButton2 = [[UIButton alloc] initWithFrame:frameCustomButton2];
[customButton2 setBackgroundImage:iconRefreshButton forState:UIControlStateNormal];
UIBarButtonItem *barCustomButton2 =[[UIBarButtonItem alloc] initWithCustomView:customButton2 ];
barCustomButton2.image = iconRefreshButton;
[customButton2 addTarget:self action:#selector(refreshList) forControlEvents:UIControlEventTouchUpInside];
All of this code is of course in (void)viewDidLoad. I have tried things like:
barCustomButton2.tintColor = [UIColor blackColor]; //doesn't work
or
[barButtonAppearance setTintColor:[UIColor blackColor]]; // doesn't work
and they do not override the white color of the image. It is almost as if the creation of the custom view takes place after the view looks at the global tint color?
How can I ensure the button icon takes on the global tint?
Thanks!
Just wanted to get this into a root comment to give better context to the "answer" checkmark, and give better formatting.
I was able to figure this one out! You can tell the image to always render as template, which will force it to take on the global tint color.
UIImage *iconRefreshButton = [UIImage imageNamed:#"MyIconFilename.png"];
iconRefreshButton = [iconRefreshButton imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
The default, if you don't set it, is "UIImageRenderingModeAutomatic" which means it will render as a template or original image based on context.
You'll either have to work around the issue you were having with the first code snippet, or you'll have to create a UIButton subclass that uses its image as a mask to show the tint color in drawRect:.
I'd recommend the first approach.
I have a custom class inheriting from UITableViewCell class that shows either an image (left to the title) or a generic dark-colored square if the image is not available). The following code shows a dark square on a light-colored cell background:
imageView = [[UIImageView alloc] initWithFrame:CGRectMake(11, 6, 40, 40)];
[imageView setBackgroundColor:kBackgroundGreyColour];
[cell.contentView addSubview:imageView];
However, instead of creating a custom subview in each table cell I would rather like to use the existing imageView property of the generic UITableViewCell class and modify it somehow to show the square as the code above does. This is what I am trying at this moment:
UIImageView* iv = [[UIImageView alloc] initWithFrame:CGRectMake(11, 6, 40, 40)];
[iv setBackgroundColor:[UIColor redColor]];
self.imageView.hidden = NO;
self.imageView.opaque = iv.opaque;
self.imageView.alpha = iv.alpha;
self.imageView.image = iv.image;
[self bringSubviewToFront:self.imageView];
[self.imageView setBackgroundColor:[UIColor redColor]];
I added all those lines to set as many of the existing UIImageView properties to the same values as the created UIImageView instance in the first code snippet, and yet the second code snippet doesn't show any dark square. It just doesn't show anything at all and the cell looks like there is just the light background and no image view visible. But I see that the imageView property is not nil so executing all those lines of code in the second snippet should show something?
However, as soon as I assign a new image to the imageView property (e.g. self.imageView.image = [[UIImage alloc] init...], the square shows the assigned image without problems.
Edit: Just a note that in the second case I am setting the frame of the imageView in layoutSubview function, e.g.:
-(void)layoutSubviews
{
[super layoutSubviews];
self.imageView.frame = CGRectMake(11, 6, 40, 40);
}
So my questions are:
1. Which properties of the existing imageView property I would need to set and to what values so that the code will show a square filled with a specific color (like the first snippet of code does)?
Is there a way of creating the UIImage programatically so that it shows only a background color without any image associated with it (and which I could use to set the imageView.image property to show that color).
Is it possible to replace the existing imageView property in a UITableViewCell class with a custom view without adding a custom subview (like the first code snippet did), so that I can show a placeholder UIView with a background color when the image is not available?
The reason why your code doesn't work, is as you guessed; Because when you set the background colour of an imageview, it doesn't create anything on the image property.
And, you've figured out that you can't directly set the imageview property of the cell either.
I'd say your best bet, is the former option; To create a UIImage programmatically.
Although, I'd highly suggest simply creating one in your favourite image editing software then including it in the bundle. It makes for easy replacement later, for when you may get a better image, and next to no code and effort required to replace.
But if you still wish to do it all programmatically, it's not as simple as you'd hope.
CGRect rect = CGRectMake(11, 6, 40, 40);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [kBackgroundGreyColour CGColor]);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.imageview.image = image;
Should do the trick.
This defines the image size, creates a graphics context (think of it as a canvas), picks your grey colour to use, paints the canvas with it, then scans it into your computer into the small little size you wanted.
The little green imp does it all behind the screen (Sorry, too much Terry Pratchett).
I have made a tab bar iOS project, when I received the request to change the tab bar's background image to a custom image. The project is developed for iOS 4.x, so the iOS5's
[tabBar setTabBarBackgroundImage:[UIImage imageNamed:#"custom.jpg"]] does not work. Can you suggest me some simple solutions (if there is any possibility, I would not like to change the entire project)?
Edit:
Only three lines of code can resolve all:
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"customImage.png"]];
[self.tabBarController.tabBar insertSubview:imageView atIndex:0];
[imageView release];
A possible solution would be to put an UIView with your background image exactly behind the UITabBar. Then lower the opacity of your tabbar to 0.5 so you can see the background-image coming through.
UIView *bckgrndView = [[UIView alloc] initWithFrame:CGRectMake(tabbar.frame.coords.x, tabbar.frame.coords.y, tabbar.frame.size.width, tabbar.frame.size.height)];
[bckgrndView setBackgroundImage:[UIImage imageNamed:#"custom.jpg"]];
[tabbar.superView insertSubView:bckgrndView belowSubview:tabbar];
tabbar.alpha = 0.5;
[bckgrndView release];
Sorry if my code contains some errors. I tried doing this by heart... But you'll catch the drift.
I have answered similar kind of question here. Hope it will help.
Check out NGTabBarController, an open source tab bar replacement with customizable background image.
I'm trying to implement a custom UISlider, I've extended it with a class called UISliderCustom which has the following code:
#implementation UISliderCustom
- (id)initWithCoder:(NSCoder *)aDecoder{
if(self == [super initWithCoder:aDecoder]){
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, 200, 13);
UIImage *slideMin = [[UIImage imageNamed:#"slideMinimum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *slideMax = [[UIImage imageNamed:#"slideMaximum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
[self setThumbImage:[UIImage imageNamed:#"slideThumb.png"] forState:UIControlStateNormal];
[self setThumbImage:[UIImage imageNamed:#"slideThumb.png"] forState:UIControlStateHighlighted];
[self setMinimumTrackImage:slideMin forState:UIControlStateNormal];
[self setMaximumTrackImage:slideMax forState:UIControlStateNormal];
}
return self;
}
#end
I ran into two small problems
When I slide over the slider to one of the edges (progress = 0.0 / progress = 1.0), I can clearly see "left overs" in the sides, im not sure how to handle that as well, unfortunately :)
Slider images:
Problem:
I see the regular UISlider (blue and silver) for a couple of seconds, and only then the custom graphics is loaded, or when i actually move the slider. I'm not sure why this is happening.. EDIT: This only happens in the simulator, works fine now.
Thanks in advance for any assistance :)
Shai.
You have no need to subclass UISlider to achieve this effect, and if you did you certainly wouldn't set the track images in the drawRect method. drawRect should contain drawing code only, it is called whenever any part of the control needs redrawing.
Set the thumb and track images in a separate method, either within your subclass (called from initWithFrame and initWithCoder) or in the object that creates the slider in the first place. This only needs to be done once, when the slider is first created. Don't override drawRect.
You don't need to call awakeFromNib manually either, unless you have some specific code in there as well? That would be a common place to set custom images in a subclass, if you only ever used the slider from IB.
For the square ends, the problem is that the extreme edge of your track image is square, so it is showing around the thumb. Make both ends of the track image rounded, with a 1px stretchable area in the middle, like this:
I just had a very similar problem myself. It turned out that the size (width x height) of the slider that I added in interface builder didn't match the sizes of the images I was using to customize the slider. Once I made them match, those "leftovers" at the ends of the slider went away.