CODEWITHSUNDEEP
iosborderlineuitabbar
Awesome.Apple
Awesome.Apple

Reputation: 1324

Remove UITabbar upper border line

I have been using UITabbar in an app. There is an upper border line coming in top of the UITabbar. Refer below image :-

I Googled it and tried the suggested code like :-

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

Also

[[UITabBar appearance] setShadowImage:nil];

self.navigationController.toolbar.clipsToBounds = YES;

But none of them is working. Any solution?

enter image description here

Upvotes: 19

Views: 17649

Answers (12)

MkVal
MkVal

Reputation: 1064

In our case, we needed an opaque tabBar with a subtle shadow above it without the border. This means clipsToBounds = true is off the table.

// ...somewhere in your AppDelegate class

let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.shadowColor = .clear // hides the top border

UITabBar.appearance().standardAppearance = appearance

if #available(iOS 15.0, *) {
  UITabBar.appearance().scrollEdgeAppearance = appearance
}

Min iOS Deployment: 14.0

Upvotes: 1

Allen
Allen

Reputation: 6882

tabBar.clipsToBounds = YES; works for me.

Upvotes: 26

Harsh Dev Chandel
Harsh Dev Chandel

Reputation: 763

self.navigationController?.setNavigationBarHidden(true, animated: true)

worked for me

Upvotes: 0

Suresh Kansujiya
Suresh Kansujiya

Reputation: 175

update your controller method

override func viewDidLoad() {
    super.viewDidLoad()
    self.tabBar.clipsToBounds = true
    if #available(iOS 13, *) {
        self.tabBar.standardAppearance.shadowImage = nil
        self.tabBar.standardAppearance.shadowColor = nil
    }
}

Upvotes: 0

Baran
Baran

Reputation: 2820

Working solution with iOS 13 & Swift 5:

/** 
 * A custom subclass of `UITabBarController` to use whenever you want 
 * to hide the upper border of the `UITabBar`.
 */
class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        tabBar.backgroundColor = UIColor.white

        // Removing the upper border of the UITabBar.
        // 
        // Note: Don't use `tabBar.clipsToBounds = true` if you want 
        // to add a custom shadow to the `tabBar`!
        // 
        if #available(iOS 13, *) {
            // iOS 13:
            let appearance = tabBar.standardAppearance
            appearance.configureWithOpaqueBackground()
            appearance.shadowImage = nil
            appearance.shadowColor = nil
            tabBar.standardAppearance = appearance
        } else {
            // iOS 12 and below:
            tabBar.shadowImage = UIImage()
            tabBar.backgroundImage = UIImage()
        }
    } 
}

Upvotes: 14

omar alfawzan
omar alfawzan

Reputation: 51

Swift 5 Works for me

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        myTabBar.clipsToBounds = true


    }

Upvotes: 5

videolist
videolist

Reputation: 232

Improving on one of the answers above - still a bit of a hack but works better. The answer above would hide the imageView with custom image. 

    for tabBarSubview in self.tabBar.subviews {
        let tabBarSubviewName = String(describing: type(of: tabBarSubview))
        guard tabBarSubviewName == "_UIBarBackground" else { continue }
        tabBarSubview.clipsToBounds = true
    }

Upvotes: 3

Miha Hribar
Miha Hribar

Reputation: 5791

This worked for me for iOS 11, XCode 9.4

UITabBar.appearance().shadowImage = UIImage()
UITabBar.appearance().backgroundImage = UIImage()
UITabBar.appearance().backgroundColor = UIColor.white

Upvotes: 7

Pavel Stepanov
Pavel Stepanov

Reputation: 957

I could not find an answer without clipping to bounds. And the way using UITabBar.appearance().shadowImage seems to be outdated

So I made a not perfect but working and safe solution to remove UITabBar shadow for iOS10 and iOS11 without clipping to bounds. Works on iPhone X too (would be strange if it did not ;) )

The code below runs through the UITabBarController hierarchy and looks for a shadow view. Which (for now) is UIImageView that is a subview of _UIBarBackground

extension UITabBarController {
    public func hideTopShadow() {
        // looking for tabBar
        for subview in self.view.subviews {
            let tabBarSubviewName = String(describing: type(of: subview))
            guard tabBarSubviewName == "UITabBar" else { continue }

            // looking for _UIBarBackground. The other subivews are UITabBarButtons
            for tabBarSubview in subview.subviews {
                let tabBarSubviewName = String(describing: type(of: tabBarSubview))
                guard tabBarSubviewName == "_UIBarBackground" else { continue }

                // looking for UIImageView. This is the only subview
                for shadowView in tabBarSubview.subviews where shadowView is UIImageView {
                    shadowView.isHidden = true
                    return
                }
            }
        }
        print(" **** ERROR: Could not find the shadow view \(self.self) \(#function)")
    }
}

Possible usage. I have a subclass of UITabBarController so I did following:

// to avoid excessive runs through the hierarchy after the shadow was hidden
fileprivate var hasHiddenShadow: Bool = false

override open func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    guard !hasHiddenShadow else { return }

    hasHiddenShadow = true
    DispatchQueue.main.asyncAfter(deadline: .now()) {
        self.hideTopShadow()
    }
}

Upvotes: 0

Krunal
Krunal

Reputation: 79776

shadowImage property of UITabbar is responsible for this border line (gray colored shadow) on UITabbar. Update value of this property to remove it.

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

Nitin Gohel
Nitin Gohel

Reputation: 49730

You need to add only this two line of code for remove border from your UITabbar:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {


    [[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]];
    [[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];
    // Override point for customization after application launch.
    return YES;
}

Before:

enter image description here

After:

enter image description here

UPDATE: You canset background image as well and set shadow as a nil like following code

    UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
    [[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];
    [[UITabBar appearance] setBackgroundImage:tabBarBackground];

OUTPUT:

enter image description here

Upvotes: 1

Usama
Usama

Reputation: 548

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

or you can use

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

or

 [[UITabBar appearance] setShadowImage:nil];

Upvotes: 13

Related Questions