I am creating an iOS 7 app in which I'd like to have a SearchBar right bellow the NavigationBar, and I wanted them both to look like a single piece. Therefore I need to tint them with the same color (done already) and remove that hairline at the bottom of the NavigationBar and at the top of the SearchBar. How can I achieve that?
Officially, this is only possible by setting the shadowImage of the navigationBar to an empty image. However, a closer look at the documentation, it is said:
For a custom shadow image to be shown, a custom background image must also be set with the setBackgroundImage:forBarMetrics: method. If the default background image is used, then the default shadow image will be used regardless of the value of this property.
By using a custom background image, you would lose the blurred background translucency.
If you feel adventurous, the "hairline" is a UIImageView that is a subview of the navigation bar. You can find it and set it as hidden. This is what Apple does in their native calendar app, for example. Remember to show it when the current view disappears.
use following code in AppDelegate (didFinishLaunchingWithOptions)
Swift :
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
UINavigationBar.appearance().shadowImage = UIImage()
Objective c :
[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc] init]
forBarPosition:UIBarPositionAny
barMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];
Swift 3:
self.navigationController?.navigationBar.setValue(true, forKey: "hidesShadow")
One way to remove the hairline on the top and bottom of a UISearchBar is to replace the background image with a stretchable one, that does not have that thin border. Simply make a square shaped png with the color of your choice, then:
[searchBar setBackgroundImage:[[UIImage imageNamed:#"SearchBarImage"] resizableImageWithCapInsets:UIEdgeInsetsMake( 10, 10, 10, 10)]];
Since the background is solid you can use pretty much whatever values you want for the insets.
For those who interested how to implement "adventurous" approach of #Leo Natan, I added the sample code in my answer to the similar question.
Related
I want to change background color of UISegmentedControl when it highlighted in tvOS.
Normally Segment display like following.
When change focus for change selected segment at that time display like following.
How to change white background when UISegmentedControl focused?
I was try following things but not working.
1) create custom class of UISegmentedControl and do following code in awakeFromNib
[self setBackgroundImage:image forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self setBackgroundImage:image forState:UIControlStateFocused barMetrics:UIBarMetricsDefault];
2) override setHighlighted method of UISegmentedControl
3) change background color in didUpdateFocusInContext method.
From my understanding of your question, you want to change the background color same as UISegmentControl tint color. What you need to do is simply use this:
label.backgroundColor = segmentedControl.tintColor;
Hope this will help you if not try this:
You just need to give its background color to clear from storyboard. This is happening due to default background selection and default selection is as per theme. Once you set the segmentControl background color to clear you will get the required result.
Or you can do:
Try to set your UISegmentcontrol background color to clear in viewDidLoad, you will get your result. I have tried this and it worked for me.
segment.backgroundColor = Color.clear;
its easy to clear the background color of segment control:
yourSegment.backgroundColor = .clear
I am googling around so much, but nowhere I find a straight and consolidated answer.
I want to customize myUITabBarController such that:
the UITabBar itself is completely black
the text color of the item titles is white in non-highlighted state
the text color of the item titles is red in highlighted state
Use multicolored icons in the tab bar
1. Turn UITabBar black
I am guessing I need to use the UIAppearance API for this, and actually I was able to turn the UITbarBar black using: [[UITabBar appearance] setBarTintColor:[UIColor blackColor]];.
2. and 3. Modify color of item titles
However, the color of the text items doesn't seem to do what I want, after googling around, the following solutions made sense to me, but it only changes the non-highlighted state to white, highlighted stays white as well...
NSDictionary *titleAttributes = #{NSForegroundColorAttributeName : [UIColor whiteColor]};
[[UITabBarItem appearance] setTitleTextAttributes:titleAttributes forState:UIControlStateNormal];
UIColor *titleHighlightedColor = [UIColor redColor];
NSDictionary *highlightedTitleAttributes = #{NSForegroundColorAttributeName : titleHighlightedColor};
[[UITabBarItem appearance] setTitleTextAttributes:highlightedTitleAttributes forState:UIControlStateHighlighted];
4. Multicolored items
About the multicolored icons, so far by approach was to simply set the icons in Storyboards like this:
But this doesn't do what I want, it only shows the whole icon in grey when the item is not selected. When the item is selected, the icon completely disappears.
This is the original icon:
This is how it looks when the item is not selected:
And here it is in the selected stated, as mentioned the icon completely disappears:
So, my question is how precisely I can achieve the above mentioned requirements. What am I currently missing? Am I better off doing everything in code than in Storyboards?
Note: I am targeting iOS versions greater than 7.0, so please include any version specific information if the behaviour differs between iOS 7 and iOS 8.
I had the same problem as you. As far as I know there is no difference for the different iOS versions.
I solved it programmatically like this:
Turning the bar color black works as following (You already said it) (in AppDelegate):
UITabBar.appearance().barTintColor = UIColor.blackColor()
To set the color of the title for the different states, I used this code (in AppDelegate):
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName!: UIColor.redColor()], forState:.Selected)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName!: UIColor.whiteColor()], forState:.Normal)
(and 4.) You can achieve the different item colors, multicolored icons and different item colors for the different states, by setting the image programmatically and change the rendering mode (imageWithRenderingMode:) to UIImageRenderingMode.AlwaysOriginal, this looks as following (do this in the first view controller class for all your view controllers):
var recentsItem = self.tabBarController!.tabBar.items![0] as UITabBarItem
var recentsItemImage = UIImage(named:"recents.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
var recentsItemImageSelected = UIImage(named: "recentsSelected.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
recentsItem.image = recentsItemImage
recentsItem.selectedImage = recentsItemImageSelected
I hope this helps, if you have any following questions, feel free to ask me.
Solution provided by smudis is great and because I don't have enough reputation to comment I decided to post the 3rd part of smudis' solution in Objective-C, in case it might help somebody:
To get a reference of the tabBar type the above code into AppDelegate's method application:didFinishLaunchingWithOptions:
UITabBarController *tbc = (UITabBarController*)self.window.rootViewController;
UITabBar *tb = tbc.tabBar;
Then the image adjustment can be done as follows:
for (UITabBarItem *tbi in tb.items) {
tbi.selectedImage = [tbi.selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tbi.image = [tbi.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
I want to change color of icons (and probably badge) in moreNavigationController from gray to something else.
I've read and successfully changed color of background and text. I did this by "replacing" data source of moreViewController (described e.g. here Customizing the More menu on a Tab bar ). But updating icons (also textLabel value) here makes no effect. Is it possible to change this gray color to white (or anything else)? Or I have to implement my own tabBarController? (any good tutorials?)
PS. I know how to change icons on tab bar itself, the question is how to do this in moreViewController?
Thanks!
Piotr
In case it is still relevant to anyone.
You can change icon colors displayed in a tableView of moreViewController:
self.tabBarController?.moreNavigationController.topViewController?.view.tintColor = UIColor.redColor()
Changing a title is like so:
self.tabBarController?.moreNavigationController.navigationBar.topItem?.title = "MyString"
Changing Edit button:
self.tabBarController?.moreNavigationController.navigationBar.tintColor = UIColor.redColor()
You can do this using the appearance proxy, new in iOS 5. In your app delegate's didFinishLaunching method:
[[UITabBar appearance] setSelectedImageTintColor:[UIColor redColor]];
In iOS 7 use:
[[UITabBar appearance] setTintColor:[UIColor redColor]];
See the UITabBar class reference for more details.
Ok, from long research on the web and answers in this thread, it seems that it is not possible on iOS7 to change color of the icons (gray color) displayed in moreViewController of UITabBarController. The best solution for customizable tab bar is to implement it (or use some library).
Thanks!
You can change the color, just subclass the tab bar controller and in it's view did load add the below code
override func viewDidLoad() {
super.viewDidLoad()
var view = self.moreNavigationController.topViewController.view as UITableView
view.tintColor = Utilities.mainColor()
view.separatorStyle = .None
}
For more you can see my question here : Change tint color of tabbar edit view controller
I am creating an iOS 7 app in which I'd like to have a SearchBar right bellow the NavigationBar, and I wanted them both to look like a single piece. Therefore I need to tint them with the same color (done already) and remove that hairline at the bottom of the NavigationBar and at the top of the SearchBar. How can I achieve that?
Officially, this is only possible by setting the shadowImage of the navigationBar to an empty image. However, a closer look at the documentation, it is said:
For a custom shadow image to be shown, a custom background image must also be set with the setBackgroundImage:forBarMetrics: method. If the default background image is used, then the default shadow image will be used regardless of the value of this property.
By using a custom background image, you would lose the blurred background translucency.
If you feel adventurous, the "hairline" is a UIImageView that is a subview of the navigation bar. You can find it and set it as hidden. This is what Apple does in their native calendar app, for example. Remember to show it when the current view disappears.
use following code in AppDelegate (didFinishLaunchingWithOptions)
Swift :
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
UINavigationBar.appearance().shadowImage = UIImage()
Objective c :
[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc] init]
forBarPosition:UIBarPositionAny
barMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];
Swift 3:
self.navigationController?.navigationBar.setValue(true, forKey: "hidesShadow")
One way to remove the hairline on the top and bottom of a UISearchBar is to replace the background image with a stretchable one, that does not have that thin border. Simply make a square shaped png with the color of your choice, then:
[searchBar setBackgroundImage:[[UIImage imageNamed:#"SearchBarImage"] resizableImageWithCapInsets:UIEdgeInsetsMake( 10, 10, 10, 10)]];
Since the background is solid you can use pretty much whatever values you want for the insets.
For those who interested how to implement "adventurous" approach of #Leo Natan, I added the sample code in my answer to the similar question.
I'd like to make a view with a unique color with uitabbar i.e I don't want to separate the view into the UITabbar and the rest, so I've created a custom UITabbar programmatically with custom color. The UITabbar and the "rest of the view" have the same color but there is a gray line on top of the UITabbar that separates the to parts. How can I hide that?
this is an example image, I want to delete that dark line:
https://picasaweb.google.com/felixdl/20Giugno2012#5756005463317234882
SOLUTION
Thank you! this works perfectly! the line I've added is:
[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:#"myImage.jpg"]];
I've never used the "appearance" tag before
If you're building for iOS 5, you can set the background as an image which would eliminate the grey line you're talking about.
[uiTabBarController setBackgroundImage:[UIImage imageNames:#"my_background.png"]];
This does require you to have an image which matches your programitically created color though.
In iOS4, you can override the drawRect function (which is significantly more complicated, but I'd be happy to answer if you're making a pre iOS 5 app)
Try this,
** Objective-C **
//Remove shadow image by assigning nil value.
[[UITabBar appearance] setShadowImage: nil];
// or
// Assing UIImage instance without image reference
[[UITabBar appearance] setShadowImage: [[UIImage alloc] init]];
** Swift **
//Remove shadow image by assigning nil value.
UITabBar.appearance().shadowImage = nil
// or
// Assing UIImage instance without image reference
UITabBar.appearance().shadowImage = UIImage()
Here is apple document for shadowImage.
#available(iOS 6.0, *)
open var shadowImage: UIImage?
Default is nil. When non-nil, a custom shadow image to show instead of
the default shadow image. For a custom shadow to be shown, a custom
background image must also be set with -setBackgroundImage: (if the
default background image is used, the default shadow image will be
used).