相关属性标签:edgesForExtendedLayout,safeAreaInsets,translucent,automaticallyAdjustsScrollViewInsets,contentInset,adjustedContentInset,contentInsetAdjustmentBehavior
1.关于edgesForExtendedLayout 与 safeAreaInsets
1.1 edgesForExtendedLayout:iOS7推出,指定边缘要延伸的方向,UIViewController属性
默认UIRectEdgeAll即self.view全屏显示。
1.2 safeAreaInsets:iOS11推出,安全区域,view属性
readonly只读属性,系统控制;同时新增两个方法获取安全区域改变
UIViewController中新增:
- (void)viewSafeAreaInsetsDidChange;
UIView中新增:
- (void)viewSafeAreaInsetsDidChange;
1.3 以下分别测试控制器view的frame,view的safeAreaInsets
iOS12.1下测试,以iPhone X(真机,{375,812})为例
edgesForExtendedLayout | view.frame(CGRect) | view.safeAreaInsets(UIEdgeInsets) |
---|---|---|
UIRectEdgeNone (带导航栏) | {{0, 88}, {375, 724}} | {0, 0, 34, 0} |
UIRectEdgeAll(带导航栏) | {{0, 0}, {375, 812}} | {88, 0, 34, 0} |
UIRectEdgeNone (不带导航栏) | {{0, 0}, {375, 812}} | {44, 0, 34, 0} |
UIRectEdgeAll(不带导航栏) | {{0, 0}, {375, 812}} | {44, 0, 34, 0} |
iOS8.1和12.1下测试,以iPhone6(模拟器,{375,667})为例
edgesForExtendedLayout | view.frame(CGRect) | view.safeAreaInsets(UIEdgeInsets) iOS8.1 | view.safeAreaInsets(UIEdgeInsets) iOS12.1 |
---|---|---|---|
UIRectEdgeNone (带导航栏) | {{0, 64}, {375, 603}} | 没有该属性 | {0, 0, 0, 0} |
UIRectEdgeAll(带导航栏) | {{0, 0}, {375, 667}} | 没有该属性 | {64, 0, 0, 0} |
UIRectEdgeNone (不带导航栏) | {{0, 0}, {375, 667}} | 没有该属性 | {20, 0, 0, 0} |
UIRectEdgeAll(不带导航栏) | {{0, 0}, {375, 667}} | 没有该属性 | {20, 0, 0, 0} |
edgesForExtendedLayout值为其他情况时相信你已经知道了,有兴趣请自行测试。
总结:edgesForExtendedLayout属性影响在是否有NavigationBar,Tabbar时view的frame;safeAreaInsets属性影响view的可视范围的frame。
2.translucent:iOS3推出,半透明度,UINavigationBar属性
Default is NO on iOS 6 and earlier. Always YES if barStyle is set to UIBarStyleBlackTranslucent
现在的App基本都支持iOS8.0以上,translucent可以认为默认为YES。translucent为YES,控制器view从坐标(0,0)开始;translucent为NO,控制器view从(0,64)开始。当我们使用滚动视图的时候,比如tableVIew,scrollview时候,建议不要修改translucent属性,就是用系统默认的YES
edgesForExtendedLayout = UIRectEdgeAll 时
iOS12.1下测试,以iPhone X(真机,{375,812})为例
view.frame(CGRect) | view.safeAreaInsets(UIEdgeInsets) | |
---|---|---|
translucent = NO (带导航栏) | {{0, 88}, {375, 724}} | {0, 0, 34, 0} |
translucent = YES (带导航栏) | {{0, 0}, {375, 812}} | {88, 0, 34, 0} |
translucent = NO(不带导航栏) | {{0, 0}, {375, 812}} | {44, 0, 34, 0} |
translucent = YES(不带导航栏) | {{0, 0}, {375, 812}} | {44, 0, 34, 0} |
总结:translucent = NO 与 edgesForExtendedLayout = UIRectEdgeNone效果相同。开发中建议translucent = YES使用默认值,在基类中修改edgesForExtendedLayout = UIRectEdgeNone来控制所有控制器View的布局。
3.UIScrollView及其子类
首先,根据以上的默认属性提出一个问题:新建一个工程,让初始的控制器(ViewController)带导航栏,在ViewController的view上添加一个webview,webview的frame设置为self.view.frame。请问webview的内容会不会被导航栏挡住?代码理解如下:
有导航栏,translucent = YES 与 edgesForExtendedLayout = UIRectEdgeAll
- (void)viewDidLoad {
[super viewDidLoad];
WKWebView *webview = [[WKWebView alloc] init];
webview.frame = self.view.frame;
[self.view addSubview:webview];
[webview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
}
接下来我们解决了解UIScrollView相关属性
automaticallyAdjustsScrollViewInsets: 默认YES,自动适应滚动视图的内边距,在iOS11系统后,该属性无效。
scrollView.contentInset: 决定滚动视图的内容和边缘距离的属性,iOS11由adjustedContentInset决定
adjustedContentInset: iOS11推出,readonly,When contentInsetAdjustmentBehavior allows, UIScrollView may incorporate its safeAreaInsets into the adjustedContentInset.(当contentInsetAdjustmentBehavior允许时,UIScrollView可以合并它的safeareainset进入adjustedContentInset。)
contentInsetAdjustmentBehavior:内边距适应行为,该值决定adjustedContentInset的值。
官方文档:
typedef NS_ENUM(NSInteger, UIScrollViewContentInsetAdjustmentBehavior) {
UIScrollViewContentInsetAdjustmentAutomatic, // Similar to .scrollableAxes, but for backward compatibility will also adjust the top & bottom contentInset when the scroll view is owned by a view controller with automaticallyAdjustsScrollViewInsets = 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));
上述问题的代码在iPhone X,iOS12.1下测试
contentInsetAdjustmentBehavior 以下采用简写:
AdjustmentAutomatic | AdjustmentScrollableAxes | AdjustmentNever | AdjustmentAlways | |
---|---|---|---|---|
automaticallyAdjustsScrollViewInsets | YES | YES | YES | YES |
contentInsetAdjustmentBehavior | 3 | 1 | 2 | 3 |
scrollView.contentInset | {{0, 0}, {0, 0}} | {{0, 0}, {0, 0}} | {{0, 0}, {0, 0}} | {{0, 0}, {0, 0}} |
self.view.safeAreaInsets | {88, 0, 34, 0} | {88, 0, 34, 0} | {88, 0, 34, 0} | {88, 0, 34, 0} |
scrollView.adjustedContentInset | {88, 0, 34, 0} | {88, 0, 34, 0} | {0, 0, 0, 0} | {88, 0, 34, 0} |
测试打印:
po self.automaticallyAdjustsScrollViewInsets
po self.webview.scrollView.contentInsetAdjustmentBehavior
po NSStringFromUIEdgeInsets(self.webview.scrollView.contentInset)
po NSStringFromUIEdgeInsets(self.view.safeAreaInsets)
po NSStringFromUIEdgeInsets(self.webview.scrollView.adjustedContentInset)
总结:UIScrollViewContentInsetAdjustmentAutomatic回去选择一个最适合的适应行为。UIScrollViewContentInsetAdjustmentNever就是adjustedContentInset = contentInsets;
UIScrollViewContentInsetAdjustmentAlways就是adjustedContentInset = safeAreaInsets + contentInsets;
UIScrollViewContentInsetAdjustmentScrollableAxes:它的成立依赖于滚动轴,当垂直方向上的contentSize大于滚动视图的高度时,那么垂直方向上的 insets 就由`safeAreaInsets + contentInsets决定,水平方向上同理。
//竖屏状态栏高度
#define Portrait_Status_SafeArea_Height (kDeviceInfo.isiPhoneXSeries ? 44 : 20)
//竖屏底部不带tabbar安全区域高度
#define Portrait_Bottom_SafeArea_Height (kDeviceInfo.isiPhoneXSeries ? 34 : 0)
//竖屏底部带tabbar时安全区域高度
#define Portrait_Tabbar_SafeArea_Height (kDeviceInfo.isiPhoneXSeries ? (49 + 34) : 49)
//横屏底部安全区域的高度
#define Landscal_Bottom_SafeArea_Height (kDeviceInfo.isiPhoneXSeries ? 21 : 0)
//横屏左右安全区域的宽度
#define Landscal_LeftRight_SafeArea_Width (kDeviceInfo.isiPhoneXSeries ? 44 : 49)
现在来回答最初提出的那个问题:我们添加webview时,使用的frame是self.view.frame,automaticallyAdjustsScrollViewInsets为默认YES,在iOS12.1下测试,所以该属性无效,contentInsetAdjustmentBehavior行为未设置,则默认为Automatic即UIScrollViewContentInsetAdjustmentAlways,所以该webview的scrollView.adjustedContentInset为{88, 0, 34, 0},所以内容显示是从导航栏底部开始显示的。