CODEWITHSUNDEEP
iosswiftuitabbarcontrolleruitabbar
TIMEX
TIMEX

Reputation: 272214

How can I change the top border of my UITabBar?

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?

Upvotes: 26

Views: 36317

Answers (11)

Udaya Sri
Udaya Sri

Reputation: 2452

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)

Upvotes: 10

Alisha
Alisha

Reputation: 1

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)

Upvotes: 0

Dharmesh Kheni
Dharmesh Kheni

Reputation: 71852

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:

before - top border is visible

After:

after - top border is not visible

Hope it helps.

EDIT:

You can set background image this way:

UITabBar.appearance().backgroundImage = UIImage(named: "yourImageWithTopYellowBorder.png")

Upvotes: 48

Mashood Murtaza
Mashood Murtaza

Reputation: 497

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.

Upvotes: 2

ABHILASH P
ABHILASH P

Reputation: 113

    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.

Upvotes: 3

Krunal
Krunal

Reputation: 79766

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

Upvotes: 0

evya
evya

Reputation: 3647

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)

Upvotes: -1

iurii
iurii

Reputation: 2707

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

Upvotes: 6

A.J. Hernandez
A.J. Hernandez

Reputation: 968

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

Upvotes: 4

James
James

Reputation: 1887

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

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

Upvotes: 10

Ben Dodson
Ben Dodson

Reputation: 448

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.

Upvotes: 0

Related Questions