CODEWITHSUNDEEP
iphoneiosuitabbarcontrolleruitabbar
httpete
httpete

Reputation: 6142

iOS UITabBar : Remove top shadow gradient line

I implemented a custom UITabBar and I still have this gradient/shadow on top of it. I added

[self.tabBar setBackgroundImage:[UIImage imageNamed:@"navBarBottom.png"]];

which is just changing the background but keeping the shadow gradient.

What am I doing wrong ? Is there anything to specify to get rid of it ?

What I have :

top shadow

What I want :

without shadow

Thank you.

Upvotes: 44

Views: 40862

Answers (15)

JAHelia
JAHelia

Reputation: 7922

if you need to remove the shadow line on iOS 13 from a tab bar that has a custom font, then you have to apply it this way:

if #available(iOS 13.0, *) {
   let appearance = UITabBarAppearance()
   appearance.stackedLayoutAppearance.normal.titleTextAttributes = ...
   appearance.stackedLayoutAppearance.selected.titleTextAttributes = ...
   appearance.shadowColor = .clear
   tabBar.standardAppearance = appearance
 }

Upvotes: 1

Miravzal
Miravzal

Reputation: 2035

This code works both iOS 13 and below 

if #available(iOS 13, *) {
    let appearance = self.tabBar.standardAppearance.copy()
    appearance.backgroundImage = UIImage()
    appearance.shadowImage = UIImage()
    appearance.shadowColor = .clear
    self.tabBar.standardAppearance = appearance
} else {
    self.tabBar.backgroundImage = UIImage()
    self.tabBar.shadowImage = UIImage()
}

Upvotes: 11

Shanu Singh
Shanu Singh

Reputation: 395

I have achieved the same look by following method.
1. Set the background bar tint colour to same as the main parent view background colour.
2.

this.TabBar.BarStyle = UIBarStyle.BlackOpaque;

I used it in Xamarin, Please verify the Swift syntax.

Upvotes: 1

Nazim Siddiqui
Nazim Siddiqui

Reputation: 21

Just be setting image it will not remove the shadow line you have to set it's borderWidth to 0. here is the code

[[UITabBar appearance] setShadowImage:[UIImage new]];

[UITabBar appearance].layer.borderWidth = 0.0f;

[UITabBar appearance].clipsToBounds = true;

Upvotes: 2

dbv
dbv

Reputation: 677

Here's another easy to implement answer:

[self.tabBar setValue:@(YES) forKeyPath:@"_hidesShadow"];

Worked for me.

Upvotes: 2

Ahmadreza
Ahmadreza

Reputation: 7212

Swift 4

UITabBar.appearance().layer.borderWidth = 0.0
UITabBar.appearance().clipsToBounds = true

Upvotes: 17

Krunal
Krunal

Reputation: 79646

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 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: 1

anhtran
anhtran

Reputation: 21

Try this on viewDidload.

override func viewDidLoad() {
        super.viewDidLoad()

        self.tabBar.setValue(true, forKey: "_hidesShadow")
}

It work for me

Upvotes: 0

Catalin
Catalin

Reputation: 1899

In your view controller or view controllers or BasicViewController that most of the viewcontrollers inherit in the viewDidLoad just put these 2 lines:

[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tab_bar_background"]];
[[UITabBar appearance] setShadowImage:[UIImage imageNamed:@"transparent_shadow"]];

Be sure [email protected] is an image 1x1 or 2x2 transparent and the [email protected] is an image 640x100 as the bottom bar is 50px in height.

Works on iOS 9.3

Upvotes: 0

DocAsh59
DocAsh59

Reputation: 400

Place this in your AppDelegate under didFinishLaunchingWithOptions:

[[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];
[[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]];

Upvotes: 1

Sourabh Sharma
Sourabh Sharma

Reputation: 8322

Swift

Try this for your custom tab bar. It will hide horizontal shadow line.

self.tabBar.setValue(true, forKey: "_hidesShadow")

Objective C

[self.tabBar setValue:@(YES) forKeyPath:@"_hidesShadow"];

Upvotes: 16

JakubKnejzlik
JakubKnejzlik

Reputation: 6493

Similary in answer for this question ... if You don't want to mess with any kind of 1x1 transparent image, this work's too:

[[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]]; 
[[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];

In swift:

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

Upvotes: 129

iOSProgrammingIsFun
iOSProgrammingIsFun

Reputation: 1458

In iOS 7 - this works:

[self.actionToolbar setShadowImage:[[UIImage alloc] init] forToolbarPosition:UIBarPositionAny];
[self.actionToolbar setBackgroundImage:[[UIImage alloc] init] forToolbarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];

Hope that helps someone.

Upvotes: -2

Eric
Eric

Reputation: 16921

Calling [[UITabBar appearance] setShadowImage:] will customise all UITabBar instances in your app.

If you want to customize just one UITTabBar, you can do this: 

[self.tabBarController.navigationController.navigationBar setShadowImage:[UIImage new]];

Upvotes: 2

Brian Liang
Brian Liang

Reputation: 7774

Try setting a 1x1 pixel transparent shadow image for the UITabBar:

[[UITabBar appearance] setShadowImage:[UIImage imageNamed:@"transparentShadow.png"]];

Upvotes: 40

Related Questions