探究NavigationBar的translucent对View布局的影响
概述
最近在项目遇到一个奇怪的问题, 在初次进入自己负责的界面时View可以正常显示, 但是当进入到其他人页面返回到主页后再次进到自己的界面时, View会整体往下偏移.如果你也出现这种情况,那么很有可能就是因为NavigationBar的translucent属性引起的, 所以今天我们来探究这个属性在不同情况下会对View布局产生怎样的影响.
属性介绍
默认情况下NavigationBar的translucent的属性是YES,即导航栏为透明的.你tabbar底下的view的颜色会在导航栏位置显示出来.
效果如下:
当NavigationBar的translucent的属性设置为NO后,导航栏会变为非透明.你tabbar底下的view的颜色不会在导航栏的位置显示出来.
效果如下:
属性对View布局的影响
在项目中我发现这个属性不仅会影响tabba是否透明,还会对View的布局产生影响.
普通View
-
- translucent为Yes
当translucent设置为Yes时,控制器的View即红色View的父View是从屏幕的上边缘开始布局,所以当你的Y为0时,红色View的上边缘和屏幕的上边缘在同一水平面.
Y设置为0时的效果:
- translucent为Yes
这种情况下如果想要显示出View上面的内容时,可以将y向下偏移一个导航栏和状态栏高度和的距离.这时导航栏也不会显示View的颜色了.
Y向下偏移适当高度:
-
- translucent为No
当translucent属性设置为NO时,控制器的View即红色View的父View会从NavigationBar的下边缘开始布局.即你将Y设置为0时,红色View的上边缘还是和NavigationBar的下边缘处于同一平面.
Y设置为0时的效果:
- translucent为No
可滚动View如TableView和ScrollView
-
- transkucent为Yes
当translucent设置为Yes时,控制器的View即绿色View的父View仍然是从屏幕的上边缘开始布局.效果如下:这时我们可以可以发现虽然View仍然是从屏幕(0,0)开始布局,但是tableView的cell会往下移动,第一个cell是从tabbar下面开始布局.这样内容就不会被遮挡了.其实这是苹果为可滚动View设置的一个特性,这个特性会在cell被遮盖的情况下将cell自动往下移动,scrollView也同样如此.
- transkucent为Yes
-
- translucent为No
当translucent属性设置为NO时,控制器的View即绿色View的父View仍然是从NavigationBar的下边缘的上边缘开始布局.此时cell由于本来就不会遮盖所以也不会往下移动.此时效果如下:
- translucent为No
总结
- 1.若是使用非滚动View时,建议布局后就不要修改NavigationBar的translucent属性,或者在ViewDidAppear方法中将translucent属性统一设置成Yes或者No,这样你的内容布局才不会改变.
- 2.若是使用非滚动View时,由于view会自动根据当前内容是否被遮盖而自动调节cell的位置使其不被遮盖,所以此时不用担心这个属性会影响view的布局.
- 3.若是使用多个View布局时,建议还是在ViewDidAppear方法中将translucent统一设置,才不会出现内容偏移的现象.
