ios 11 transparent navigation bar

Viewed 16724

Creating a transparent navigation bar no longer works with ios 11. I get this black bar at the top because the table view doesn't come under the bar anymore (the insets in the storyboard are set properly to start from 0) Any ideas why?

enter image description here

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
4 Answers

I faced the same problem and I was able to solve it. Here is what works for me:

public override func viewDidLoad() {
    super.viewDidLoad()
    
    self.navigationController?.navigationBar.backgroundColor = UIColor.clear
    self.navigationController?.navigationBar.isTranslucent = true
    if #available(iOS 11.0, *) {
        collectionView.contentInsetAdjustmentBehavior = .never
    } else {
        // Fallback on earlier versions
    }
}

And one more thing, that I found still necessary to make it working. Most probably you have your UICollectionView/UITableView/UIScrollview aligned to top of Safe Area. Change this constraint to be aligned to top of super view instead.

enter image description here

And that's it. Isn't it straightforward and intuitive? Thanks Apple.


old:

if you have used tableView,add code:

if (@available(iOS 11.0, *)) {
    self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever
} else {
    self.automaticallyAdjustsScrollViewInsets = NO
}

new:

a change of automaticallyAdjustsScrollViewInsets in iOS11:

@property(nonatomic,assign) BOOL automaticallyAdjustsScrollViewInsets 
API_DEPRECATED_WITH_REPLACEMENT("Use UIScrollView's 
contentInsetAdjustmentBehavior instead", ios(7.0,11.0),tvos(7.0,11.0)); 
// Defaults to YES

about contentInsetAdjustmentBehavior:

typedef NS_ENUM(NSInteger, UIScrollViewContentInsetAdjustmentBehavior) {
    UIScrollViewContentInsetAdjustmentAutomatic, // Similar to .scrollableAxes, but will also adjust the top & bottom contentInset when the scroll view is owned by a view controller with automaticallyAdjustsScrollViewContentInset = YES inside a navigation controller, regardless of whether the scroll view is scrollable
    UIScrollViewContentInsetAdjustmentScrollableAxes, // Edges for scrollable axes are adjusted (i.e., contentSize.width/height > frame.size.width/height or alwaysBounceHorizontal/Vertical = YES)
    UIScrollViewContentInsetAdjustmentNever, // contentInset is not adjusted
    UIScrollViewContentInsetAdjustmentAlways, // contentInset is always adjusted by the scroll view's safeAreaInsets
} API_AVAILABLE(ios(11.0),tvos(11.0));

/* Configure the behavior of adjustedContentInset.
 Default is UIScrollViewContentInsetAdjustmentAutomatic.
 */
@property(nonatomic) UIScrollViewContentInsetAdjustmentBehavior contentInsetAdjustmentBehavior API_AVAILABLE(ios(11.0),tvos(11.0));

it could be a problem of safeArea for iOS11. try this define from one expert:

#define  adjustsScrollViewInsets_NO(scrollView,vc)\
do { \
    _Pragma("clang diagnostic push") \
    _Pragma("clang diagnostic ignored \"-Warc-performSelector-leaks\"") \
        if ([UIScrollView instancesRespondToSelector:NSSelectorFromString(@"setContentInsetAdjustmentBehavior:")]) {\
            [scrollView   performSelector:NSSelectorFromString(@"setContentInsetAdjustmentBehavior:") withObject:@(2)];\
        } else {\
            vc.automaticallyAdjustsScrollViewInsets = NO;\
        }\
    _Pragma("clang diagnostic pop") \
} while (0)

to have consistent behavior between iOS 10 and 11, try adding this to your navigationViewController

func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {

    if navigationBar.isTranslucent, #available(iOS 11.0, *) {           
        viewController.additionalSafeAreaInsets.top = -navigationBar.bounds.height
    }
}
Related