iOS開發(fā) - iOS15導(dǎo)航欄適配(Object-C、Swift)

iOS15導(dǎo)航欄適配

設(shè)置導(dǎo)航欄純色/透明劲阎、解決ScrollView類上滑導(dǎo)航欄出現(xiàn)磨砂陰影的問題

Swift版導(dǎo)航欄適配參考>>

在iOS 13中給導(dǎo)航的UINavigationBar增加了scrollEdgeAppearance屬性應(yīng)用在iOS 14及更早版本的大標(biāo)題導(dǎo)航欄上绘盟,在iOS 15中scrollEdgeAppearance屬性適用于所有的導(dǎo)航欄

官方解釋:描述當(dāng)關(guān)聯(lián)的UIScrollView到達(dá)與導(dǎo)航條相鄰的邊緣(導(dǎo)航條的上邊緣)時(shí)要使用的導(dǎo)航條的外觀屬性。如果沒有設(shè)置悯仙,將使用修改后的standardAppearance

/// Describes the appearance attributes for the navigation bar to use when an associated UIScrollView has reached the edge abutting the bar (the top edge for the navigation bar). If not set, a modified standardAppearance will be used instead.
@property (nonatomic, readwrite, copy, nullable) UINavigationBarAppearance *scrollEdgeAppearance UI_APPEARANCE_SELECTOR API_AVAILABLE(ios(13.0));

scrollEdgeAppearance 與 standardAppearance 一樣同屬于 UINavigationBarAppearance 類型 父類是 UIBarAppearance
其中影響導(dǎo)航欄顏色龄毡、陰影涉及到以下屬性

  • backgroundEffect 基于backgroundColor或backgroundImage的磨砂效果

  • backgroundColor 背景色,層級在backgroundImage之下

  • backgroundImage 背景圖片

  • backgroundImageContentMode渲染backgroundImage時(shí)的內(nèi)容模式锡垄。 默認(rèn)是UIViewContentModeScaleToFill

  • shadowColor 陰影顏色(底部分割線)
    1.當(dāng)shadowImage為nil時(shí)稚虎,直接使用此顏色為陰影色。如果此屬性為nil或clearColor(需要顯式設(shè)置)偎捎,則不顯示陰影蠢终。
    2.如果shadowImage包含 template 圖像,則使用該圖像作為陰影并使用此屬性中的值對其進(jìn)行著色茴她。如果此屬性為nil或clearColor(需要顯式設(shè)置)寻拂,則不顯示陰影。
    3.如果shadowImage不包含 template 圖像丈牢,則此屬性無效祭钉。

  • shadowImage陰影圖片(可以使用圖片的渲染模式:UIImageRenderingModeAlwaysOriginal 保持原色)

scrollEdgeAppearance

/// A specific blur effect to use for the bar background. This effect is composited first when constructing the bar's background.
@property (nonatomic, readwrite, copy, nullable) UIBlurEffect *backgroundEffect;
/// A color to use for the bar background. This color is composited over backgroundEffects.
@property (nonatomic, readwrite, copy, nullable) UIColor *backgroundColor;
/// An image to use for the bar background. This image is composited over the backgroundColor, and resized per the backgroundImageContentMode.
@property (nonatomic, readwrite, strong, nullable) UIImage *backgroundImage;
/// The content mode to use when rendering the backgroundImage. Defaults to UIViewContentModeScaleToFill. UIViewContentModeRedraw will be reinterpreted as UIViewContentModeScaleToFill.
@property (nonatomic, readwrite, assign) UIViewContentMode backgroundImageContentMode;

/// A color to use for the shadow. Its specific behavior depends on the value of shadowImage. If shadowImage is nil, then the shadowColor is used to color the bar's default shadow; a nil or clearColor shadowColor will result in no shadow. If shadowImage is a template image, then the shadowColor is used to tint the image; a nil or clearColor shadowColor will also result in no shadow. If the shadowImage is not a template image, then it will be rendered regardless of the value of shadowColor.
@property (nonatomic, readwrite, copy, nullable) UIColor *shadowColor;
/// Use an image for the shadow. See shadowColor for how they interact.
@property (nonatomic, readwrite, strong, nullable) UIImage *shadowImage;

兼容iOS15設(shè)置透明導(dǎo)航欄示例:

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
       //navigation標(biāo)題文字顏色
       NSDictionary *dic = @{NSForegroundColorAttributeName : HexAlphaColor(@"#FFFFFF",1.f),
                             NSFontAttributeName : [UIFont systemFontOfSize:18]};
    
       if (@available(iOS 13.0, *)) {
           UINavigationBarAppearance *barApp = [UINavigationBarAppearance new];
           barApp.backgroundColor = [UIColor clearColor];
           #//基于backgroundColor或backgroundImage的磨砂效果
           barApp.backgroundEffect = nil;
           #//陰影顏色(底部分割線),當(dāng)shadowImage為nil時(shí)己沛,直接使用此顏色為陰影色慌核。如果此屬性為nil或clearColor(需要顯式設(shè)置),則不顯示陰影申尼。
           //barApp.shadowColor = nil;
           //標(biāo)題文字顏色
           barApp.titleTextAttributes = dic;
           self.navigationController.navigationBar.scrollEdgeAppearance = nil;
           self.navigationController.navigationBar.standardAppearance = barApp;
       }else {
          self.navigationController.navigationBar.titleTextAttributes = dic;
          [self.navigationBar setShadowImage:[UIImage new]];
          UIImage *navBgImg = [[UIImage createImageWithColor:HexAlphaColor(@"#FFFFFF",0.0) size:CGSizeMake(SCREEN_WIDTH, 44.f)] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
          [self.navigationController.navigationBar setBackgroundImage:navBgImg forBarMetrics:UIBarMetricsDefault];
       }
    //透明設(shè)置
    self.navigationController.navigationBar.translucent = YES;
    //navigationItem控件的顏色
    self.navigationController.navigationBar.tintColor = [UIColor whiteColor];
}

解決設(shè)置透明導(dǎo)航欄垮卓,出現(xiàn)ScrollView類頁面上滑,導(dǎo)航欄變成磨砂陰影效果

原因分析:

因?yàn)?code>scrollEdgeAppearance = nil师幕,當(dāng)前控制器如果使用有ScrollView類的控件粟按,當(dāng)ScrollView向上滾動(dòng)時(shí)scrollEdgeAppearance會(huì)默認(rèn)使用standardAppearance的屬性效果。所以backgroundEffectshadowColor屬性需要顯式設(shè)置為nil霹粥,以防止backgroundEffect灭将、shadowColor有顏色值影響導(dǎo)航欄透明效果。

兼容iOS15設(shè)置不透明純色導(dǎo)航欄示例:


- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
       //navigation標(biāo)題文字顏色
       NSDictionary *dic = @{NSForegroundColorAttributeName : HexAlphaColor(@"#FFFFFF",1.f),
                             NSFontAttributeName : [UIFont systemFontOfSize:18]};
    
       if (@available(iOS 13.0, *)) {
           UINavigationBarAppearance *barApp = [UINavigationBarAppearance new];
           barApp.backgroundColor = [UIColor whiteColor];
           #//基于backgroundColor或backgroundImage的磨砂效果
           barApp.backgroundEffect = nil;
           #//陰影顏色(底部分割線)后控,當(dāng)shadowImage為nil時(shí)庙曙,直接使用此顏色為陰影色。如果此屬性為nil或clearColor(需要顯式設(shè)置)浩淘,則不顯示陰影捌朴。
           barApp.shadowColor = [UIColor whiteColor];
           //標(biāo)題文字顏色
           barApp.titleTextAttributes = dic;
           self.navigationController.navigationBar.scrollEdgeAppearance = barApp;
           self.navigationController.navigationBar.standardAppearance = barApp;
       }else {
          self.navigationController.navigationBar.titleTextAttributes = dic;
          [self.navigationBar setShadowImage:[UIImage new]];
          UIImage *navBgImg = [[UIImage createImageWithColor:HexAlphaColor(@"#FFFFFF",1.f) size:CGSizeMake(SCREEN_WIDTH, 44.f)] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
          [self.navigationController.navigationBar setBackgroundImage:navBgImg forBarMetrics:UIBarMetricsDefault];
       }
    //透明設(shè)置
    self.navigationController.navigationBar.translucent = NO;
    //navigationItem控件的顏色
    self.navigationController.navigationBar.tintColor = [UIColor blackColor];
}

下一篇:Swift版導(dǎo)航欄適配>>
下一篇:Swift自定義適配多樣式導(dǎo)航欄升級版>>


\color{gray}{歡迎大佬來指正糾錯(cuò)吴攒,共同學(xué)習(xí)??} PERFECT!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末男旗,一起剝皮案震驚了整個(gè)濱河市舶斧,隨后出現(xiàn)的幾起案子欣鳖,更是在濱河造成了極大的恐慌察皇,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泽台,死亡現(xiàn)場離奇詭異什荣,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)怀酷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進(jìn)店門稻爬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蜕依,你說我怎么就攤上這事桅锄。” “怎么了样眠?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵友瘤,是天一觀的道長。 經(jīng)常有香客問我檐束,道長辫秧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任被丧,我火速辦了婚禮盟戏,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘甥桂。我一直安慰自己柿究,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布黄选。 她就那樣靜靜地躺著笛求,像睡著了一般。 火紅的嫁衣襯著肌膚如雪糕簿。 梳的紋絲不亂的頭發(fā)上探入,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天,我揣著相機(jī)與錄音懂诗,去河邊找鬼蜂嗽。 笑死,一個(gè)胖子當(dāng)著我的面吹牛殃恒,可吹牛的內(nèi)容都是我干的植旧。 我是一名探鬼主播辱揭,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼病附!你這毒婦竟也來了问窃?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤完沪,失蹤者是張志新(化名)和其女友劉穎域庇,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體覆积,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡听皿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了宽档。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尉姨。...
    茶點(diǎn)故事閱讀 40,040評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖吗冤,靈堂內(nèi)的尸體忽然破棺而出又厉,到底是詐尸還是另有隱情,我是刑警寧澤椎瘟,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布覆致,位于F島的核電站,受9級特大地震影響降传,放射性物質(zhì)發(fā)生泄漏篷朵。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一婆排、第九天 我趴在偏房一處隱蔽的房頂上張望声旺。 院中可真熱鬧,春花似錦段只、人聲如沸腮猖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽澈缺。三九已至,卻和暖如春炕婶,著一層夾襖步出監(jiān)牢的瞬間姐赡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工柠掂, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留项滑,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓涯贞,卻偏偏與公主長得像枪狂,于是被迫代替她去往敵國和親危喉。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容