Solving View Bounds Overlap with Status Bar and Navigation Bar in iOS 7

Problem Background and Phenomenon Analysis

In iOS 7, many developers encountered a common layout issue where view bounds failed to properly account for the presence of status bar and navigation bar. Specifically, when printing view bounds in the viewDidLayoutSubviews method, the output showed {{0, 0}, {320, 568}}, resulting in interface content being obscured by the status bar and navigation bar.

Changes in iOS 7 Layout Mechanism

iOS 7 introduced a new full-screen layout concept, providing view controllers with more granular control over layout. The traditional wantsFullScreenLayout property has been deprecated and replaced by a more flexible layout property system.

Core Solution: edgesForExtendedLayout Property

The edgesForExtendedLayout property allows precise control over which edges of a view should be extended. This property uses the UIRectEdge type, enabling developers to specify exactly which edges of the view should extend under bars.

- (void)viewDidLoad {
    [super viewDidLoad];
    
    if ([self respondsToSelector:@selector(edgesForExtendedLayout)]) {
        self.edgesForExtendedLayout = UIRectEdgeNone;
    }
}

The above code, by setting edgesForExtendedLayout to UIRectEdgeNone, prevents the view from extending under the status bar and navigation bar, ensuring content displays within the safe area.

Detailed Explanation of Related Layout Properties

In addition to edgesForExtendedLayout, iOS 7 provides other important layout control properties:

extendedLayoutIncludesOpaqueBars

When using opaque navigation bars, you can further refine layout behavior by setting the extendedLayoutIncludesOpaqueBars property to NO. The default value of this property is NO, meaning views don't extend under opaque bars by default.

automaticallyAdjustsScrollViewInsets

For interfaces containing scroll views, the system automatically adjusts content insets by default. If you don't want automatic adjustment, set automaticallyAdjustsScrollViewInsets to NO.

Layout Guides: topLayoutGuide and bottomLayoutGuide

The topLayoutGuide and bottomLayoutGuide properties provide information about the location of top and bottom bar edges. In Interface Builder, you can create constraints relative to these guides to precisely position view elements.

Special Handling for Translucent Navigation Bars

In certain scenarios, such as full-screen image viewing, developers may want to maintain the translucent characteristic of navigation bars. This can be achieved by setting the navigation bar's translucent property:

self.navigationController.navigationBar.translucent = YES;

Combined with appropriate edgesForExtendedLayout settings, this allows content to display under translucent navigation bars.

Configuration Methods in Interface Builder

In addition to programmatic approaches, developers can configure these settings in Interface Builder through the attributes inspector. Deselecting "Under Top Bars" in the "Extend Edges" options achieves the same effect as setting edgesForExtendedLayout to UIRectEdgeNone.

Practical Application Recommendations

In actual development, it's recommended to choose appropriate layout strategies based on specific requirements: maintain default settings for full-screen content; use UIRectEdgeNone for interfaces that need to avoid system bars; combine multiple layout properties for complex layout needs.

Compatibility Considerations

Since edgesForExtendedLayout is a new feature introduced in iOS 7, applications supporting older iOS versions need to use conditional checks to ensure code compatibility:

if ([self respondsToSelector:@selector(edgesForExtendedLayout)]) {
    // Code for iOS 7 and later
} else {
    // Compatibility code for older iOS versions
}

Through proper layout configuration, developers can fully utilize iOS 7's modern layout system to create both aesthetically pleasing and functionally complete user interfaces.