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?

回答1:

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

or you can use

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

 [[UITabBar appearance] setShadowImage:nil];

回答2:

tabBar.clipsToBounds = YES; is work for me.

回答3:

Swift 5 Works for me

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


    }

回答4:

This worked for me for iOS 11, XCode 9.4

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

回答5:

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
    }

回答6:

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

回答7:

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:

After:

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:

回答8:

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

回答9:

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

回答10:

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

来源：https://stackoverflow.com/questions/32645674/remove-uitabbar-upper-border-line

标签

ios

border

line

uitabbar