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.
Related
I am trying this for a while now, I do have a UiTabBar with three elements in my swift iOS app and I would like to use default images every TabBarItem, but combined with a custom title. It is not possible to do this in the StoryBoard, so I try to do this for every element in the ViewControllerClass of every page. Just one example:
self.tabBarItem = UITabBarItem.init(tabBarSystemItem: UITabBarSystemItem.bookmarks, tag: 0)
self.tabBarItem.title = "Test"
Does anybody of you know a trick how to combine both of it? It seems like it's not possible to combine default images and custom titles...
From Apple docs (https://developer.apple.com/documentation/uikit/uitabbaritem/systemitem):
The title and image of system tab bar items cannot be changed.
Presumably, this is because Apple likes apps to be consistent. They don't want users to be confused by seeing a common system Icon that doesn't do what it's expected to do.
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];
I'm having an issue with my UITabBar:
This is what it looks like in its different states:
As you can see, there's little empty areas between my elements and on the sides:
My Question is why isn't it like on the App Store app, where you do not have side or in between elements gaps?
And this is how I am changing the appearance of the Tab Bar, with a background image that does NOT have any dividers:
[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:#"UITabBarBG"]];
Following a method like explained here wouldn't work because of the gaps I have:
http://blog.erikvdwal.nl/blog/2012/09/25/customizing-the-uitabbar-in-ios-5-and-ios-6/
Any help would be helpful!
Thanks!
If you make your images are larger you will not have this issue, they can even overlap if you want the same separators as in the AppStore app.
See How can I add a custom divider image to the UITabBar?
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.