How can I change the top border of my UITabBar?

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?

Solution 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")

Solution 2

If you want to completely remove tab bar, put this in your AppDelegate:

UITabBar.appearance().shadowImage = UIImage()
UITabBar.appearance().backgroundImage = UIImage()

Solution 3

This is how I get it done. I added a subview on top of the UITabBar.

var lineView = UIView(frame: CGRect(x: 0, y: 0, width:tabBarController.tabBar.frame.size.width, height: 1))
lineView.backgroundColor = UIColor.yellow
tabBarController.tabBar.addSubview(lineView)

Solution 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))

Solution 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

View more solutions

Comments

[Blind Ninja]

Create you own TabBar SubClass and make an Overlay with top border on it.

[TIMEX]

This hides the top border, but I want a border with color.

[Dharmesh Kheni]

I think you can set background image now which have top border with yellow color.

[TIMEX]

Thanks. What dimensions should the image be?

[Dharmesh Kheni]

The default tab dimensions are 320x49 - google.co.in/…

[QuangDT]

Thanks - no other solution on S) (which does not use a private api) worked for iOS9 except this.

[Jared Chu]

Work perfectly!

[Oscar Falmer]

not the right answer, this adds border to bottom, left, right and top

[Mohit G.]

Not worked for me, i tried all the ways you suggested in your Answer, I wrote in the firstVC under the tabbar and inside the tabbar itself 🙁

[J A S K I E R]

Doesn't work now. Swift 4,5. The same margins, borders as before.

[Dante Puglisi]

Nice solution although the description is wrong since the UIView will be placed inside the UITabBar and not on top of it. Also lineView should be a let since it's never mutated.