iOS处理导航栏遮挡视图问题

来源:互联网 发布:linux 环境变量path 编辑:程序博客网 时间:2024/05/18 03:19

在iOS开发中UINavigationViewController是一个非常重要的控件,

可是有时候使用时会导致导航栏遮挡视图的问题,(比如先做好约束,后添加导航栏的时候就有可能)。

当我在视图中添加一个tableview和一个collectionView的时候,遮挡问题如下图:


解决办法:

1.在使用storyboard做布局的时候,一开始就设置top bar为有导航栏的(如下图),然后添加视图,做相关约束。

2.使用iOS7新增加ViewController的属性edgeForExtendedLayout(控制视图在Controller中扩张样式,默认为四边/全屏扩张),将值设为UIEdge(rawValue:0),或者不设置上边即可

代码如下:

var edgeOptions:UIRectEdge = [.left,.bottom,.right] //注意位移多选枚举的使用
self.edgesForExtendedLayout = edgeOptions
其中UIRectEdge枚举定义

public struct UIRectEdge : OptionSet {    public init(rawValue: UInt)        public static var top: UIRectEdge { get }    public static var left: UIRectEdge { get }    public static var bottom: UIRectEdge { get }    public static var right: UIRectEdge { get }    public static var all: UIRectEdge { get }}

使用该方法时,导航栏好像不能设置为半透明。

扩展a:Swift位移类型枚举的定义与使用

使用过OC的朋友都应该知道位移型枚举,使用的时候可以使用"|"传入多个枚举值。

而swift的位移多选型枚举必须遵循optionSet,使用的时候以传入一个数组的形式使用,注意但是不能声明为数组型是的,如上使用方法。

扩展b:将视图延伸到状态栏下

设置controller的属性extendedLayoutIncludeOpaqueBar(默认值为false)为true,而且当状态栏为隐藏或者透明的时候才有效

扩展c:如何让视图可以穿过导航栏下方

上面的解决方案只是让视图在导航栏下方铺展视图,比如tableView的上拉无法通过导航栏底层,解决办法,就是设置控制器的automaticallyAdjustsScrollViewInsets属性(只有嵌套scrollView及其子类的时候才有该属性)设置为true(默认为false),得保证上便扩展是有的。

我的问题应该是这个导致,有两个含scrollview的,第二个没反应过来,就被遮挡啦。

所以这个可以用来设置被遮挡或者将内容可以放在导航栏底层去


3.使用布局约束将视图强行移出导航栏之外

具体方法就是在storyboard中拉出约束,并设置变量,把相关的视图也要拉过来,在设置约束或者视图将要出现或者加载的时候修改约束。

修改代码如下:

if var nav = self.navigationController {                        CollectionViewTopConstraint = NSLayoutConstraint(item: CollectionViewTopConstraint.firstItem, attribute: .top, relatedBy: .equal, toItem: CollectionViewTopConstraint.secondItem, attribute: .top, multiplier: 1, constant: 44+20)//注意:需要加上状态栏高度20            //一般状态的导航栏高度为44(横向模式为32).含prompt的为74,当然,你也可以取属性值获取            self.colletionView.translatesAutoresizingMaskIntoConstraints = false //必须设置,否则约束无效            self.view.addConstraint(CollectionViewTopConstraint)                 //约束添加在父视图上,不是添加字自身视图            print(CollectionViewTopConstraint)        }

最后修改效果图如下:


其他解决参考原理:【传送门】

解决添加导航栏控制器,隐藏导航栏之后,视图无法在状态栏的下层。

问题视图:


目标效果:


解决:通过取消当前控制器的layout的Adjust scroll View insets 解决选择。

如果设置:self.edgesForExtendedLayout = 不设置top 也可以解决的(即随便设置其他三个),不同取消inset选择的情况下

所以:self.edgesForExtendedLayout设置了哪几边,那几边就会延伸扩展进去,




原创粉丝点击