How can I change the top border of my UITabBar? - ios

Question

I'd like the UITabBar to have a top border of width 5.0. The border should be yellow color.
I don't want any left/bottom/right borders.
The Tab Bar border should be flat (no shadows or anything like that).
How can I remove shadow (image) line?

Answer 1

You can hide the top border this way in your FirstViewController.swift:
self.tabBarController!.tabBar.layer.borderWidth = 0.50
self.tabBarController!.tabBar.layer.borderColor = UIColor.clear.cgColor
self.tabBarController?.tabBar.clipsToBounds = true
And result will be:
Before:
After:
Hope it helps.
EDIT:
You can set background image this way:
UITabBar.appearance().backgroundImage = UIImage(named: "yourImageWithTopYellowBorder.png")

Answer 2

If you want to completely remove tab bar, put this in your AppDelegate:
UITabBar.appearance().shadowImage = UIImage()
UITabBar.appearance().backgroundImage = UIImage()

Answer 3

This is how I get it done. I added a subview on top of the UITabBar.
let lineView = UIView(frame: CGRect(x: 0, y: 0, width:tabBarController.tabBar.frame.size.width, height: 1))
lineView.backgroundColor = UIColor.yellow
tabBarController.tabBar.addSubview(lineView)

Answer 4

This is the complete solution, compiled of different SO answers, that worked for me (Swift 3):
// The tabBar top border is done using the `shadowImage` and `backgroundImage` properties.
// We need to override those properties to set the custom top border.
// Setting the `backgroundImage` to an empty image to remove the default border.
tabBar.backgroundImage = UIImage()
// The `shadowImage` property is the one that we will use to set the custom top border.
// We will create the `UIImage` of 1x5 points size filled with the red color and assign it to the `shadowImage` property.
// This image then will get repeated and create the red top border of 5 points width.
// A helper function that creates an image of the given size filled with the given color.
// http://stackoverflow.com/a/39604716/1300959
func getImageWithColor(color: UIColor, size: CGSize) -> UIImage
{
let rect = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: size.width, height: size.height))
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(rect)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
// Setting the `shadowImage` property to the `UIImage` 1x5 red.
tabBar.shadowImage = getImageWithColor(color: UIColor.red, size: CGSize(width: 1.0, height: 5.0))

Answer 5

SWIFT 3
I needed border colors (and line colors and weights) to match other elements in my app, so this worked for me in my custom UITabBarController's viewDidLoad:
tabBar.layer.borderWidth = 0.3
tabBar.layer.borderColor = UIColor(red:0.0/255.0, green:0.0/255.0, blue:0.0/255.0, alpha:0.2).cgColor
tabBar.clipsToBounds = true

Answer 6

UIView *borderLine = [[UIView alloc] initWithFrame:CGRectMake(0, 0, screenWidth, 5.0)];
borderLine.backgroundColor = [UIColor yellowColor];
[self.tabBarController.tabBar addSubview:borderLine];
This is the way to add border to a UITabBar which I follow.
It works cool.

Answer 7

Swift 4.2
self.tabBarController!.tabBar.layer.borderWidth = 0.50
self.tabBarController!.tabBar.layer.borderColor = UIColor.clear.cgColor
self.tabBarController?.tabBar.clipsToBounds = true
Just change border color as you want.

Answer 8

There is a property named shadowImage that was introduced in iOS 6. You can change this to change the top border. For example, you can use a 1x1px image with a single colour to change the top border to that colour:
UITabBar.appearance().shadowImage = UIImage(named: "TabBarShadow")
You can also set it as just UIImage() to completely remove the top border.
UITabBar.appearance().shadowImage = UIImage()
To answer your question of a 5px border, this can be done by using a 1x5px image. There does not appear to be a limit on the size of the image and it will just repeat (so you could have a dotted line for example by having a 4x5px image where the first 2x5px are black and the next 2x5px are transparent). Note that if you use this, it is outside the bounds of the UITabBar so content will go behind the image unless you change the view bounds.

Answer 9

It's a shadow image (property) of tabbar. Try following solutions and see.
** Swift **
//Remove shadow image by assigning nil value.
UITabBar.appearance().shadowImage = nil
// or
// Assing UIImage instance without image reference
UITabBar.appearance().shadowImage = UIImage()
** 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]];
Here is apple guideline 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).

Answer 10

Firstly create an extension of UIImage as follow
extension UIImage {
func createSelectionIndicator(color: UIColor, size: CGSize, lineWidth: CGFloat) -> UIImage {
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(CGRect(x: 0, y: 0, width: size.width, height: lineWidth))
let image = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
}
In your view controller add the following code.
let tabBar = self.tabBarController!.tabBar
tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: UIColor.blue, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height: tabBar.frame.height) , lineWidth: 5.0)

Answer 11

Just set the UITabBar backgroundImage and shadowImage to be clear color:
tabBar.shadowImage = UIImage.init(color: UIColor.clear)
tabBar.backgroundImage = UIImage.init(color: UIColor.clear)