UITabBar/UINavigationBar 的 translucent 属性--整理

translucent 这个BOOL属性能控制 UITabBar/UINavigationBar 的半透明效果,默认为YES,即默认情况下为半透明效果。

1. 设置translucent值对 对应的 UITabBar/UINavigationBar 设置图片的影响

translucent(默认为YES)

  • NO:强制使用非透明背景
    1. 如果导航条使用自定义背景图片,那么默认情况该属性的值由图片的alpha(透明度)决定,如果alpha的透明度小于1.0值为YES。
    2. 使用自定义带透明度(透明度小于0)的图片,那么系统会展示这张背景图片,只不过这张图片会使用事先确定的barTintColor进行不透明处理,若barTintColor为空,则会使用UIBarStyleBlack(黑色)或者UIBarStyleDefault(白色)。
  • YES:默认使用原生半透明效果
    1. 如果导航条使用自定义不透明图片,那么会自动设置系统透明度(小于1.0)在这个图片上。
ps:设置导航栏背景图片透明度问题
  • 如果背景图片没有透明度,系统会自动把导航控制器的栈顶控制器的view的Y值增加64,如果有透明度,则不会增加。
  • 这一情况的图片必须是imageSet格式的,并且图片的透明度为1(不透明),系统才会去调整。

2. 设置translucent值对 控制器 View、普通View 、scrollView 布局的影响

控制器 View、普通View布局影响

  1. translucent 属性默认为 YES (保留半透明效果)

    默认情况下,如果使用 UITabBarController 和 UINavigationController(translucent属性默认为YES),在其子控制器的 View添加一个蓝色的 view 并设置距离屏幕边距为(0,0,0,0),展示效果如下:
    可以看到,UITabBarController和UINavigationBarController被蓝色的view“穿透”了,此时view的边距也正如设置的一样,零点坐标在(0,0)处。
  1. translucent 属性默认为 NO (不保留半透明效果)
导航条的translucent设置为NO效果展示 TabBar的translucent设置为NO效果展示
导航条的translucent设置为NO效果展示.png
TabBar的translucent设置为NO效果展示.png

对 ScrollView 布局的影响

  1. 将上述蓝色的 view 替换成 tableView,展示效果如下:
tableView默认情况示例1 tableView默认情况示例2.png
tableView默认情况示例1.png
tableView默认情况示例2.png

tableView 的 cell 并没有因为“穿透”效果而出现被遮挡的情况,这是由于苹果对滚动视图的特殊性进行处理:对于类ScrollView,系统默认默认控制器属性automaticallyAdjustsScrollViewInsets默认为YES。

对于普通 scrollView 默认情况 translucent = YES && automaticallyAdjustsScrollViewInsets = YES,scrollView 的内容会在 navBar 底部开始到 TabBar 顶部结束

请注意:iOS11开始,苹果摒弃了ViewController 的
automaticallyAdjustsScrollViewInsets属性,改由ScrollView 的
contentInsetAdjustmentBehavior(枚举值)控制,下面会有详细的解释。

  1. automaticallyAdjustsScrollViewInsets = YES时系统底层所干的事

    scrollView的内容原本没有内边距,但是考虑到导航栏(高度44px)、状态栏(高度20px)、TabBar(高度49px)会挡住后面scrollView所展示的内容,系统自动为scrollView增加上下的内边距,这时候我们打印一下tableView的描述(友情提示:tableView继承自scrollView):

    可以看出,contentOffset(内容坐标偏移量)和contentSize(内容尺寸大小)都发生了变化,结合tableView自身的frame可以看出,系统自动为scrollView增加了顶部64px的内边距以及底部49px的内边距,正好是导航栏高度+状态栏高度以及TabBar高度。一旦手动在系统布局页面之前设置automaticallyAdjustsScrollViewInsets = NO,将会取消上述操作,届时scrollView内容将会被部分挡住

    PS:上述的情况仅仅对UIScrollView或者子类(如UITableView)有效。

  2. contentInsetAdjustmentBehavior定义及使用(适用于iOS11+,替代automaticallyAdjustsScrollViewInsets)

    如果只想单纯地设置导航条不偏移导航条+状态栏和Tabbar高度,不想看解释,可以直接使用该宏定义解决方法适配的问题(宏定义来源:http://www.jianshu.com/p/352f101d6df1):

// 宏定义解析:看UIScrollView实例是否响应setContentInsetAdjustmentBehavior方法,
响应则赋值2(2表示枚举值UIScrollViewContentInsetAdjustmentNever),
否则设置视图控制器的automaticallyAdjustsScrollViewInsets = NO,
_Pragma包括的代码表示消除-Warc-performSelector-leaks警告。

#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)

首先来看下在Xcode 9的SDK中关于原有属性automaticallyAdjustsScrollViewInsets的描述:

@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
// 中文解析:此API已经过期且被UIScrollView下的contentInsetAdjustmentBehavior属性替代

这里描述得很清楚了,iOS11之后该属性过期了!那么接下来我们看看替代属性到底是啥:

/* Configure the behavior of adjustedContentInset.
 Default is UIScrollViewContentInsetAdjustmentAutomatic.
 中文解析:该属性用来配置UIScrollView调整内边距的行为,其值为枚举值,
默认值是UIScrollViewContentInsetAdjustmentAutomatic,就是自动调整。
 */
@property(nonatomic) UIScrollViewContentInsetAdjustmentBehavior contentInsetAdjustmentBehavior API_AVAILABLE(ios(11.0),tvos(11.0));

// 以下是该枚举的具体值(选项)
typedef NS_ENUM(NSInteger, UIScrollViewContentInsetAdjustmentBehavior) {
    // 中文解析:与UIScrollViewContentInsetAdjustmentScrollableAxes相似,但为了向后兼容(向低版本兼容),
    //当scroll view被view controller管理,且该view controller的automaticallyAdjustsScrollViewInsets = YES并在导航条控制器栈内,
    //该枚举也会调整顶部(导航条)和底部(Tabbar)的内边距,无论该scroll view是否可滚动。
    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

    // 中文解析:滚动轴的边缘会被调整(例如contentSize.width/height > frame.size.width/height 或 alwaysBounceHorizontal/Vertical = YES)
    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

    // 中文解析:内边距总是被scroll view的safeAreaInsets所调整,safeAreaInsets顾名思义就是safeArea的内边距,safeArea下面会有一个概括性的解释。
    UIScrollViewContentInsetAdjustmentAlways, 
    // contentInset is always adjusted by the scroll view's safeAreaInsets
} API_AVAILABLE(ios(11.0),tvos(11.0));

safeArea概括性解释:表示一个区域,该区域避开了导航条、Tabbar等可能挡住view controller的view的控件,如果添加一个view控件是相对于它父控件的safeAreaLayoutGuide做布局,则不用担心被导航条、Tabbar等控件“挡住”

视图控制器view的safeArea.png
3. 关于iOS7之后与view全屏相关的知识点

在iOS7之后,默认情况下,控制器的view是”全屏“的,也就是说,即便有TabBar或者NavigationBar,控制器的view也是可以”穿透至全屏“的,针对这一特性,苹果对UIViewController提供了以下几个属性供开发者使用:

// 在iOS7之前,控制器的view默认非全屏,如果想要全屏效果,需要设置为YES,该属性已从iOS7开始过期
@property(nonatomic,assign) BOOL wantsFullScreenLayout NS_DEPRECATED_IOS(3_0, 7_0) __TVOS_PROHIBITED; 
// Deprecated in 7_0, Replaced by the following:  该属性被以下三个属性代替

// Defaults to UIRectEdgeAll
@property(nonatomic,assign) UIRectEdge edgesForExtendedLayout NS_AVAILABLE_IOS(7_0); 

// Defaults to NO, but bars are translucent by default on 7_0\.  
@property(nonatomic,assign) BOOL extendedLayoutIncludesOpaqueBars NS_AVAILABLE_IOS(7_0); 

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

下面解释一下这三个属性:

  • edgesForExtendedLayout:意思是view的边缘允许额外布局的情况,默认为UIRectEdgeAll,意味着全屏布局(带穿透效果)。

  • extendedLayoutIncludesOpaqueBars:意思是额外布局是否包括不透明的Bar,默认为NO,意味着如果导航条或者TabBar非透明,view内容不会被他们遮挡,如果该属性设置为YES,那么在导航条或者TabBar非透明的情况下,view的内容将会被他们遮挡(原点为0,0),该属性仅仅对非透明的Bar控件有效。

    示例展示如下图所示(代码设置 navigationBar.translucent = NO 并且 extendedLayoutIncludesOpaqueBars = YES)

非透明导航条遮挡内容效果展示.png
  • automaticallyAdjustsScrollViewInsets:意思是是否由系统自动调整滚动视图的内边距,默认为YES,意味着系统将会根据导航条和TabBar的情况自动增加上下内边距以防止滚动视图的内容被Bar遮挡。
简单场景快速使用补充:

(如下问题是针对垂直起始布局位置的设置)

  1. 如果你想让 UINavigationController-UIViewController 结构下,ViewController 的 View 起始点是从 NavBar 底部开始,添加如下代码:
self.navigationController.navigationBar.translucent = NO;

此时的 navBar 是不透明且默认为白色;Controller 的 view 起始点从 navBar 底部开始到屏幕底部,如有 tabbar 则会贯穿(注意这里只是设置了navigationBar.translucent,没有设置 tabbar.translucent,所以此时 view 同样会贯穿 tabbar的)

  1. 如果不想修改translucent同时希望具有第1种情况的需求,则可以通过edgesForExtendedLayout进行设置,该值默认是UIRectEdgeAll
self.edgesForExtendedLayout = UIRectEdgeTop;

此时的 navBar 是默认带透明样式的;此时的 view 布局与情况1一样(如果设置为UIRectEdgeNone则,view 布局是从 navBar 底部到 tabbar 顶部之间)。

ps:这是我阅读该文章时的整理摘抄文,权当自我记录使用。推荐阅读原文。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容