iOS13中新加入UIBarAppearance的使用

UIBarAppearance是iOS13苹果新出来的一个对相应的空间统一设置外观样式的API,可以统一配置NavigationBar 、TabBar、 Toolbar等的外观样式。

  • UIBarAppearance的子类

UINavigationBarAppearance 设置导航栏外观样式
UITabBarAppearance 设置Tabbar外观样式
UIToolbarAppearance 设置Toolbar外观样式

  • 这里用导航条的UINavigationBarAppearance作为示例,TabBarToolbar的设置外观样式使用的方式与其相同

iOS 13中 UINavigationBar新增了scrollEdgeAppearance属性,但在iOS 15以前的版本中此属性只应用在大标题导航栏上。而在iOS 15中此属性适用于所有导航栏。

大家都知道导航栏在默认情况下背景是透明的,在滑动时如果系统检测到导航栏下方有其他UI的话,导航栏会变成毛玻璃效果,但有时需求要求导航栏不透明,无毛玻璃效果,那咋办呢?这时我们需要人为的去设置导航栏的样式了。
iOS15之前的设置方式:

 // 导航栏背景设置为白色
navigationBar.barTintColor = .white
// 导航栏设置为不透明
 navigationBar.isTranslucent = false 
// 导航栏文字 颜色
 navigationBar.tintColor = .white 
// 导航栏文字样式
 navigationBar.titleTextAttributes = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 18), NSAttributedString.Key.foregroundColor: UIColor.white ]

但是我们使用Xcode13编译工程后,导航栏就出现了问题,问题原因是UINavigationBar部分属性的设置在iOS15上是无效的,而且navigationBar.isTranslucent=NO也没有生效,导航条依然是透明的。因此在iOS5设置NavigationBar的样式的相关属性需要通过UINavigationBarAppearance类来实现。
iOS15适配的新方式:

if #available(iOS 15.0, *) {
    let _appearance = UINavigationBarAppearance()
    // 重置背景和阴影颜色
    _appearance.configureWithOpaqueBackground()
     // 去掉半透明效果
     _appearance.backgroundEffect = nil
     //设置背景颜色
     _appearance.backgroundColor = .white 
     //普通样式
     self.navigationBar.standardAppearance = _appearance;
     //滚动样式
     self.navigationBar.scrollEdgeAppearance = _appearance;
}
  • 相关属性说明
  1. scrollEdgeAppearance:
    当可滚动内容的边缘与导航栏的边缘对齐时,导航栏的外观设置。如果这个属性的值为nil, UIKit使用导航栏的standardAppearance外观属性的值,修改为有一个透明的背景。
  2. standardAppearance:
    设置导航栏标准高度的样式设置,默认样式。此属性的默认值是一个包含系统默认外观设置的外观对象。
  3. compactAppearance:
    紧凑高度导航栏的外观设置。
  4. compactScrollEdgeAppearance:
    当可滚动内容的边缘与导航栏的边缘对齐时,紧凑高度导航栏的外观设置。
  • UINavigationBarAppearance相关属性说明
  1. backgroundEffect:
    基于backgroundColor或backgroundImage的磨砂效果
  2. backgroundColor:
    背景色
  3. backgroundImage:
    背景图片
  4. backgroundImageContentMode:
    渲染backgroundImage时使用的内容模式。 默认为UIViewContentModeScaleToFill。
  5. shadowColor:
    阴影颜色(底部分割线),当shadowImage为nil时,直接使用此颜色为阴影色。如果此属性为nil或clearColor(需要显式设置),则不显示阴影
  6. shadowImage:
    阴影图片。template图像: [img imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]
  • 示例代码:
  1. 不透明导纯色航栏
  //navigation标题文字颜色
    NSDictionary *dic = @{NSForegroundColorAttributeName : [UIColor blackColor],
                          NSFontAttributeName : [UIFont systemFontOfSize:18 weight:UIFontWeightMedium]};
    if (@available(iOS 15.0, *)) {
        UINavigationBarAppearance *barApp = [UINavigationBarAppearance new];
        barApp.backgroundColor = [UIColor whiteColor];
        barApp.shadowColor = [UIColor whiteColor];
        barApp.titleTextAttributes = dic;
        self.navigationController.navigationBar.scrollEdgeAppearance = barApp;
        self.navigationController.navigationBar.standardAppearance = barApp;
    }else{
        //背景色
        self.navigationController.navigationBar.barTintColor = [UIColor whiteColor];
        self.navigationController.navigationBar.titleTextAttributes = dic;
        [self.navigationBar setShadowImage:[UIImage new]];
        [self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    }
    //不透明
    self.navigationController.navigationBar.translucent = NO;
    //navigation控件颜色
    self.navigationController.navigationBar.tintColor = [UIColor blackColor];

2、透明导航栏:

  //navigation标题文字颜色
    NSDictionary *dic = @{NSForegroundColorAttributeName : [UIColor whiteColor],
                          NSFontAttributeName : [UIFont systemFontOfSize:18]};
    if (@available(iOS 15.0, *)) {
        UINavigationBarAppearance *barApp = [UINavigationBarAppearance new];
        barApp.backgroundColor = [UIColor clearColor];
        barApp.titleTextAttributes = dic;
        self.navigationController.navigationBar.scrollEdgeAppearance = nil;
        self.navigationController.navigationBar.standardAppearance = barApp;
    }else{
        self.navigationController.navigationBar.titleTextAttributes = dic;
        [self.navigationBar setShadowImage:[UIImage new]];
        [self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    }
    //透明
    self.navigationController.navigationBar.translucent = YES;
    //navigation控件颜色
    self.navigationController.navigationBar.tintColor = [UIColor whiteColor];
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,607评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,239评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,960评论 0 355
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,750评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,764评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,604评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,347评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,253评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,702评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,893评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,015评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,734评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,352评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,934评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,052评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,216评论 3 371
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,969评论 2 355

推荐阅读更多精彩内容