Using this code
UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];
tabBarItem1.title = #"Home";
tabBarItem2.title = #"Maps";
tabBarItem3.title = #"My Plan";
tabBarItem4.title = #"Settings";
[tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:#"home_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"home.png"]];
[tabBarItem2 setFinishedSelectedImage:[UIImage imageNamed:#"maps_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"maps.png"]];
[tabBarItem3 setFinishedSelectedImage:[UIImage imageNamed:#"myplan_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"myplan.png"]];
[tabBarItem4 setFinishedSelectedImage:[UIImage imageNamed:#"settings_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"settings.png"]];
is working fine..however, when I use this images, it looks pixelated on real iphone testing..using a larger (in width and height)images wont fit right because only portions of it are seen. is there a way that I can stretch these larger images to a specific width and height so the whole portions of it are seen?
Follow the sizes outlined in the iOS Human Interface Guidelines
. Additionally, don't specify the .png since you want to be able to account for non-retina and retina images (w/ #2x).
In iOS 6 or earlier, if you wanted to create a button with 32x32 size, You'd make a PNG with those pixel dimensions, and call it Button.png
Then when retina screens came along, you started to need to make 2 assets
Button.png AND Button#2x.png the #2x asset is 64x64 pixels.
With iOS7 and later, there's no need to make both assets. You just use the retina #2x assets.
Putting all your image assets into asset catalogs makes this much easier. So when you use the #2x asset from code you should not write the .png extension.
For example:
[tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:#"home_selected"]...
Note: When you reference the asset #2x asset from Storyboard, you only write the name of the asset without the #2x.
For example: for your file called home_selected#2x.png, in StoryBoard you would write home_selected.png
Related
I am trying to set the tab bar icons of my UITabBarController with custom *.png files (one for the selected and one for unselected).
The images are all in non-interlaced png format and are named correctly (#2x, #3x, etc) residing in an *.imageset.
But the tab bar items are only shown as silhouettes like this:
I tried to set these images within Interface Builder, without success. Then I also tried to set them programmatically in the "loadView" function of MyTabBarController (which is extending UITabBarController) like this:
UIImage *selectedImage;
UIImage *unselectedImage;
// tab1
selectedImage = [UIImage imageNamed:#"cmdGamesActive"];
unselectedImage = [UIImage imageNamed:#"cmdGamesInactive"];
UITabBarItem *item1 = [self.tabBar.items objectAtIndex:0];
item1 = [item1 initWithTitle:#"Games" image:unselectedImage selectedImage:selectedImage];
// tab2
selectedImage = [UIImage imageNamed:#"cmdFriendsActive"];
unselectedImage = [UIImage imageNamed:#"cmdFriendsInactive"];
UITabBarItem *item2 = [self.tabBar.items objectAtIndex:1];
item2 = [item2 initWithTitle:#"Friends" image:unselectedImage selectedImage:selectedImage];
// tab3
selectedImage = [UIImage imageNamed:#"cmdTrophiesActive"];
unselectedImage = [UIImage imageNamed:#"cmdTrophiesInactive"];
UITabBarItem *item3 = [self.tabBar.items objectAtIndex:2];
item3 = [item3 initWithTitle:#"Trophies" image:unselectedImage selectedImage:selectedImage];
// tab4
selectedImage = [UIImage imageNamed:#"cmdSettingsActive"];
unselectedImage = [UIImage imageNamed:#"cmdSettingsInactive"];
UITabBarItem *item4 = [self.tabBar.items objectAtIndex:3];
item4 = [item4 initWithTitle:#"Settings" image:unselectedImage selectedImage:selectedImage];
... with the same result.
Any ideas how to solve this issue ?
According to this answer, I did something extra and kind of have answer for you here. I have my custom UITabBarController, which is linked with my UITabBarController in the StoryBoard file. So in order to remove the automatic tint provided by iOS when the TabBar is unselected, I ended up removing it in this manner. The images can be a vast variety of images but just in the way recommended here. Here it goes:
NSArray *navConArr = self.viewControllers;//self is custom UITabBarController
UINavigationController *naviOne = [navConArr objectAtIndex:0];//I have 3 different tabs, objectAtIndex:0 means the first tab navigation controller
UITabBarItem *naviBtn = naviOne.tabBarItem;
UIImage *image = [[UIImage imageNamed:#"iconNaviOne"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[naviBtn setSelectedImage:image];
[naviBtn setImage:image];
Thankfully, this works like a charm (:
I was facing a similar issue.
I had chosen few icons for my tabs such as 'mic', 'smiley' and 'settings'.
But the only things visible when I executed the program were grey and blue squares.
I modified my '.png' images to be transparent and now they are visible as they were intended to.
i.e, make sure the images used for tab icons do not have a background.
This should do the trick:
UITabBarItem *item0 = [_tabBar.items objectAtIndex:0];
item0.image = [[UIImage imageNamed:#"edit_profile_tab"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item0.selectedImage = [[UIImage imageNamed:#"edit_profile_tab_active"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
I have a previously existing app (pre ios8) that uses UITabbar. The tabbar is visible in ios7 simulator and device, but it is invisible in ios8. What is causing this issue? the space for the tab bar is there, but its background and text/images are not there. i've attached a pic of it.
iOS 7:
iOS 8:
Even if setFinishedSelectedImage:withFinishedUnselectedImage: is deprecated in iOS7, it is working fine in iOS7 but not in 8.
Use image and selectedImage property of UITabBarItem instead.
I also had the same issue but my problem was different.
Reference code:
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
if ([self iOS7OrAbove])
{
//use UIImageRenderingModeAlwaysOriginal to set the custom image for ios 7 and above.
tabBarItem1.selectedImage = [[UIImage imageNamed:#"SelectedImage"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tabBarItem1.image = [[UIImage imageNamed:#"UnselectedImage"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
else
{
[tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:#"SelectedImage"] withFinishedUnselectedImage:[UIImage imageNamed:#"UnselectedImage"]];
}
I have created a UITabBarcontroller programatically as follows:
UITabBarController *tbc = [[UITabBarController alloc] init];
[tbc setViewControllers:[NSArray arrayWithObjects:vc1,vc2,vc3,vc4,vc5,nil]];
which works ok. For each of the UIViewControllers, i want to set their tabbaritem.image to a specified image so i do this:
UITabBarItem *tbi1 = [[UITabBarItem alloc] initWithTitle:#"Search" image:
[UIImage imageNamed:#"tab_bar_search_50_50.png"] tag:0];
vc1.tabBarItem = tbi1;
and i have also tried
vc1.tabBarItem.image = [UIImage imageNamed:#"tab_bar_search_50_50.png"];
and
UITabBarItem *tbi1 = [[UITabBarItem alloc] initWithTitle:#"Search" image:
[UIImage imageNamed:#"tab_bar_search_50_50.png"] selectedImage:
[UIImage imageNamed:#"tab_bar_search_50_50.png"]];
The image size is 50x50 because according to apple-> https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1
a tabbar icon of size "About 50 x 50 (maximum: 96 x 64) is ok". Yet when i run this in both the simulator and on a device (both retina screens) the image is way too large and hangs over the top of the the tab bar.
Ive even tried adding #2x as a suffix to the file name which doesnt work, but i thought since the app is building only for ios7 that these were no longer needed?
Im guessing the problem is either a bug in iOS7 or the issue lies with the image size, but i read in the documentation that if the image is too big it will be clipped to a certain bound?
I believe i have solved my problem. The problem was that when i added the #2x suffix, i also included this in the naming of the UIImage:
[UIImage imageNamed #"image#2x.png"];
But this needs to be:
[UIImage imageNamed #"image.png"];
Im currently using Xcode 5 to develop a list oriented app. I have a custom tint for the tab bar, custom images for the tab icons, custom tint for the tab bar's icon images when its selected, but i cannot find how to customize the icon images' tint for when its not selected. Right now its just the default gray which you can barely see in contrast to my green tab bar. I want to make the tab bar icons' images and names white.
Does anybody know how to set the tab bar icons' image tint in Xcode 5?
You need to set the rendering mode for each tab's (unselected) image to UIImageRenderingModeAlwaysOriginal. So, in your app delegate, get a reference to the tab bar and then iterate over each tab bar item, adjusting the image modes.
There's probably a better way to get a reference to the tab bar, but I did the following:
UIStoryboard *sb = [UIStoryboard storyboardWithName:#"Main" bundle:nil];
UITabBarController *tbc = [sb instantiateInitialViewController];
self.window.rootViewController = tbc;
UITabBar *tb = tbc.tabBar;
Then the image adjustment can be done as follows:
NSArray *items = tb.items;
for (UITabBarItem *tbi in items) {
UIImage *image = tbi.image;
tbi.selectedImage = image;
tbi.image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
You can try this to tint selected icon :
// Custom the tab bar
[[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];
and this to tint the non active icon :
[self.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:#"item_seleted.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"item_unselected.png"]];
You can do this purely from the storyboard without writing any code by adding a "User Defined Runtime Attribute":
Select your UITabViewController in the storyboard
Open the "Document Outline" and make sure that you select the "Tab Bar" view in the scene.
Show the "Identity Inspector". You should see a section for "User Defined Runtime Attributes"
Add the following:
Key Path: tintColor
Type: Color
Value: Select the color you want.
Try this way..it worked for me
In app delegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
UITabBarController *tabBarController=(UITabBarController*)(self.window.rootViewController);
UITabBar *tabBar=tabBarController.tabBar;
UITabBarItem *tabBarItem1=[[tabBar items] objectAtIndex:0];//first tab bar
[tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:#"yourImageSelected.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"yourImageUnselected.png"]];//image should be 30 by 30
}
run and go
If you have your tab bar in visual editor, you can do it here. Select tab bar and in "User Defined Runtime Attributes" add attribute:
Key Path: selectedImageTintColor
Type: Color
Value:
Setting Custom Tabbar with selected and non-seleted Image.
Also having tabbarItem Image Insets position in center
UITabBar *tabBar = self.tabBarController.tabBar;
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
UITabBarItem *item3 = [tabBar.items objectAtIndex:3];
[item0 setFinishedSelectedImage:[UIImage imageNamed:#"iconBlue.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"iconGray.png"] ];
[item1 setFinishedSelectedImage:[UIImage imageNamed:#"iconBlue2.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"icon-2.png"]];
[item2 setFinishedSelectedImage:[UIImage imageNamed:#"iconBlue3.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"icon-3.png"]];
[item3 setFinishedSelectedImage:[UIImage imageNamed:#"iconBlue4.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"icon-4.png"]];
item0.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item1.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item2.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item3.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
**In viewWillAppear method of first viewcontroller. **
Because setFinishedSelectedImage:withFinishedUnselectedImage is deprecated, I used an altered version of Ram S's answer by replacing:
[item0 setFinishedSelectedImage:[UIImage imageNamed:#"iconBlue.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"iconGray.png"] ];
with:
[item0 setImage:[[UIImage imageNamed:#"iconGray.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item0 setSelectedImage:[[UIImage imageNamed:#"iconBlue.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
See UITabBarItem setFinishedSelectedImage: deprecated in iOS7 for more information.
I've created a simple custom tabbar by setting the images of each item, as following:
UITabBar *tabBar = self.tabBarController.tabBar;
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
[item0 setFinishedSelectedImage:[UIImage imageNamed:#"activity_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"activity.png"]];
[item1 setFinishedSelectedImage:[UIImage imageNamed:#"agenda_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"agenda.png"]];
[item2 setFinishedSelectedImage:[UIImage imageNamed:#"settings_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:#"settings.png"]];
While this works great, I noticed that there is a black blank space under my tabbar
My images are 44px in height, but I think I have to somehow change the height of my tabbar.
The tabBar itself is 49px, and it is rendered in black color behind your images (perhaps in [UITabBar layoutSubviews]). Then your images are rendered on top. The reason of the offset is because the images you supply are too large, UITabBar expects 30x30px icons, not a picture of the entire UITabBarItem.
Here's a few things to try:
Supply only a 30x30px icon, instead of the entire tab button
After you set your images on the tab item, try this:
[item setImageInsets:UIEdgeInsetsMake(6, 0, -6, 0)]; // play with insets until it renders correctly
Subclass UITabBar and override layoutSubviews to first call super, then reposition your image as you like. Not recommended, it might break in future iOS versions.
Use -
tabBar.frame=CGRectMake(x,y,w,h);
In this way you can set xCord, yCord, width and height.
Check this:
[self.tabBar setFrame:CGRectMake(self.tabBar.frame.origin.x, self.tabBar.frame.origin.y - 30, self.tabBar.frame.size.width, self.tabBar.frame.size.height + 30)];