iOS15導(dǎo)航欄適配
設(shè)置導(dǎo)航欄純色/透明劲阎、解決ScrollView類上滑導(dǎo)航欄出現(xiàn)磨砂陰影的問題
在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)是UIViewContentModeScaleToFillshadowColor
陰影顏色(底部分割線)
1.當(dāng)shadowImage為nil時(shí)稚虎,直接使用此顏色為陰影色。如果此屬性為nil或clearColor(需要顯式設(shè)置)偎捎,則不顯示陰影蠢终。
2.如果shadowImage包含 template 圖像,則使用該圖像作為陰影并使用此屬性中的值對其進(jìn)行著色茴她。如果此屬性為nil或clearColor(需要顯式設(shè)置)寻拂,則不顯示陰影。
3.如果shadowImage不包含 template 圖像丈牢,則此屬性無效祭钉。shadowImage
陰影圖片(可以使用圖片的渲染模式:UIImageRenderingModeAlwaysOriginal 保持原色)
/// 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
的屬性效果。所以backgroundEffect
和shadowColor
屬性需要顯式設(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)航欄升級版>>
PERFECT!