1) i add four png image in Assets.xcassets.
2)In storyboard, i embed in a Tab Bar Controller. Setting TabBarItem image.
3) But after running app. I found the image look seems a little different with my setting and i don't known why, can anyone know why and how to fixed? Waiting for you help,thanks
The reason why the image looks different is because it is being filled with plane colour, while your .png contains some white instead of empty background. UIImage has a property called renderingMode. This property can be default, AlwaysOrigin, AlwaysTemplate.
So for UITabBarItem the default rendering mode is AlwaysTemplate, that is why your image is being filled. And since your image contains a white background inside the search icon (where it should have contained no drawing) it gets also filled.
So you have two options:
1. Remove the white background from the icon.
2. Since you are using XCAssets, you can change the rendering mode in XCAssets attributes pane.
Here is where you can do that from XCAssets:
you need set UIImage.renderingMode,
try this
NSArray *items = self.tabBar.items;
UITabBarItem *item = items[0];
item.image = [[UIImage imageNamed:#"tabbar_recruit.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
Related
I'm using the UITabBarController's built in moreViewController. In the main tab bar I'm using original images instead of template images:
tabBarItem.image = [[UIImage imageNamed:imageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
Which works fine. When I go to the moreNavigationController, the images are just blue'd out (it's using them as template images).
It says in Apple's documentation that the moreNavigationController is not meant to be customizatable. However these are just standard UITableViewCells which can totally support an original image.
Any ideas?
I want to use the built in one for its ability to rearrange the tabs. I could roll my own if necessary (won't be simple), but I'd sure like to leverage what's built in.
I want the tab bar of my App for iOS5/6 look just like on iOS7 without using Xcode 5. Is it possible to remove this gloss/shadow effect? I tried the famous -setFinishedSelectedImage:withFinishedUnselectedImage: code solution. But seems not to work with my case. I played around with these codes I have:
UIImage* icon1 = [UIImage imageNamed:#"discover_dg~iphone.png"];
UIImage* icon2 = [UIImage imageNamed:#"discover_lb~iphone.png"];
//UITabBarItem *updatesItem = [[UITabBarItem alloc] initWithTitle:#"Discover" image:icon1 tag:1];
UITabBar *tabBar = self.tabBarController.tabBar;
UITabBarItem *updatesItem = [tabBar.items objectAtIndex:1];
updatesItem.image = icon1;
[updatesItem setFinishedSelectedImage:icon2 withFinishedUnselectedImage:icon1];
[self.navigationController setTabBarItem:updatesItem];
First tab bar icons as the screen loads has the iOS6 look just like this with the glossy effect..
or this with the shadow effect..
I am trying to remove the gloss effect/shadow of the UITabBarItem on iOS5/6. When I click on a particular icon, the blue one will appear and when I leave(which in the unselected one) it will turn to GRAY, the ORIGINAL images which must FROM THE START appeared already as the screen loads/appear. But somehow, I got these set with the glossy ones..
or these with shadows..
Cheers in advance!
http://www.appcoda.com/ios-programming-how-to-customize-tab-bar-background-appearance/
This is the best solution.Use the storyboard.You just take the same code to AppDelegare.m
Good luck to you！
You can using the appereance protocol, in iOS7 is mostly made using new features, but from iOS5 appereance method make you able to do that. you just need to change the background (-setBackgroundImage:) image of the tabbar and each UItabbarItem for viewcontrollers from selected to unselected state( -setFinishedSelectedImage:withFinishedUnselectedImage: ).
There is also a tint property if you do not need to apply different image for each VC.
Check the doc here
Check also this answer
I have a working IPad App. I built everything on a default white screen and I want to add an image to background of the image. I read a couple of articles and most of the suggest to create a new UIImage with the background image and stretch it to the full screen. I tried that but I am using a couple UIImage to display the photos taken and my UIImage s seem to stay at the back of the background and they don't get shown.
What is the proper way to set the background of IPad App?
this is the screenshot of my IPad App
Follow these steps :
1) Add UIImageView to your UIView.
2) Fill it with your Background UIImage.
3) Select your Background UIImageView and Select "Send to Back" Option....
The key is your view hierarchy. If you do not want to hassle around with moving the subviews along and sendings ome to back and some to front, then start with a proper view hierarchy from the beginning.
Basic rules are: the subviews overlay their superviews.
If siblings overlay each other, then the last one added is shown.
Your view hierarchy could be:
\UIView (A: the underlying self.view from the view controller's point of view.)
\UIImageView (B: the view for your background image. Empty or hidden from start.)
\UIView (C: Container for all of your views, no background color, no background image)
\UIImageView (C1: One of your picuters)
\UIImageView (C2: One of your picuters)
\UIImageView (C3: One of your picuters)
\UILabel (C4: One of your labels)
\ ...
Build up your view hierarchy. And when you need to add or change the background then assign the appropriate UIImage ot the View B.
Certainly, there is more than one way to achieve this. However, I personally thinkthat some proper view hierarchy works best, regardless whether you do that in IB or programmatically.
The proper way is to create a UIImageView and set it to the size of your view, and put all the others View in fron of it. The tutorials that you read are giving you the right way.
If you do not want to add an image, only a color you can set the background color of your view to this color.
You can use this code to send the ImageView to the back:
[self.view sendSubviewToBack:YouBackgroundImageView];
EDIT
Because you posted and XIB screenshot:
Your background image view must be in the first position, like this image:
I have an image that I already use im my app like this via code:
UIImage *image = [[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:#"building" ofType:#"png"]];
self.view.backgroundColor = [UIColor colorWithPatternImage:image];
and I wanted to reuse that image in the UITabBar. There is an image field on the Attributes inspector of the UITabBar image, and when I add the image name there (either building or building.png) the image does not render, but an image outline renders.
Would anyone know why that happens and how I can get the actual image to render?
Thanks!
Here you are using an, I guess, a rather small image as a pattern to form a color. For the UITabBar you need to have images of appropriate size. UITabBar knows, as many others does, appearance methods to modify UI elements. Look for UIAppearance in the docs for more infos. As far as your question is concerned have a look for setFinishedSelectedImage:withFinishedUnselectedImage under UITabBarItem.
I added two UIBarButtonItems to a toolbar.
The first I added using
initWithImage:style:target:action:
For the second, I created a UIButton, containing a UIImageView with the image set to the same used in the first example. I also made the image view slightly smaller that the button to allow room for a label. Then I created the BarButtonItem with
initWithCustomView:
I get very different renderings of the image:
What is going on here, and how do I get the image to be displayed as expected in the second example?
Note: I actually added the buttons in reverse order - in the image above, the first button is using initWithCustomView:
According to the documentation for initWithImage:style:target:action
The images displayed on the bar are derived from this image [...] The alpha values in the source image are used to create the images—opaque values are ignored.
So, the image is being used as a mask. This is the behavior you typically see used in toolbars, but is available here as well. I guess you need to use custom views if you want the image pixels to be used on the bar.