关于UINavigationBar的背景和分割线设置

我们可以通过两个系统提供的方法很方便的修改导航栏的颜色,直接设置一个颜色:

[self.navigationController.navigationBar setBarTintColor:[UIColor greenColor]];

也可以设置一张背景图片:

UIImage *image = [UIImage imageFromColor:[UIColor greenColor] withSize:CGSizeMake(kWidth, kStatus_h + 44.f)];

[self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

这里用到一个自己添加的方法和两个宏。

+ (UIImage *)imageFromColor:(UIColor *)color withSize:(CGSize)size

{

CGRect rect=CGRectMake(0.0f, 0.0f, size.width, size.height);

UIGraphicsBeginImageContext(rect.size);

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetFillColorWithColor(context, [color CGColor]);

CGContextFillRect(context, rect);

UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

return theImage;

}

这是干啥的看方法名就能明白了吧,你可以新建UIImage的Category,把这个方法加进去,说不定以后还能用到~

还有这两个宏

//获取屏幕高度

#define kWidth [UIScreen mainScreen].bounds.size.width

//获取状态栏高度

#define kStatus_h  [[UIApplication sharedApplication] statusBarFrame].size.height

在iPhone X出来之前,状态栏高度都是固定20,现在要添加一个宏来动态获取了。

这两个方法目前的效果是一样的,如下图。


关于UINavigationBar的背景和分割线设置_第1张图片



这时候如果有需求想要修改导航栏分割线的颜色呢? 通常我们通过修改UINavigationBar的 shadowImage属性来设置分割线。

下面是头文件里对shadowImage属性的描述

/* Default is nil. When non-nil, a custom shadow image to show instead of the default shadow image. For a custom shadow to be shown, a custom background image must also be set with -setBackgroundImage:forBarMetrics: (if the default background image is used, the default shadow image will be used). */ @property(nullable, nonatomic,strong) UIImage *shadowImage NS_AVAILABLE_IOS(6_0) UI_APPEARANCE_SELECTOR;

@property(nullable, nonatomic,strong) UIImage *shadowImage 

大致意思,你如果要通过设置这个属性来修改分割线,那么你要同时通过setBackgroundImage:forBarMetrics:为UINavigationBar设置一个背景图片,这样你设置的分割线样式才能生效。一开始我是不信的,那我们来试一下。

//通过设置BarTintColor为 navigationBar设置白色背景颜色,不通过setBackgroundImage:forBarMetrics:为UINavigationBar设置背景图片

[self.navigationController.navigationBar setBarTintColor:[UIColor whiteColor]];


//通过设置shadowImage为 navigationBar设置红色分割线

UIImage *lineImage = [UIImage imageFromColor:[UIColor redColor] withSize:CGSizeMake(kWidth, 0.5f)];

[self.navigationController.navigationBar setShadowImage:lineImage];


关于UINavigationBar的背景和分割线设置_第2张图片



我们设置的红色分割线并没有生效,而是默认的黑色。

还是乖乖听话,同时用-setBackgroundImage:forBarMetrics:方法设置背景颜色。

//通过设置-setBackgroundImage:forBarMetrics:方法设置白色背景颜色

//通过设置-setBackgroundImage:forBarMetrics:方法设置白色背景颜色

UIImage *bgimage = [UIImage imageFromColor:[UIColor whiteColor] withSize:CGSizeMake(kWidth, kStatus_h + 44.f)];

[self.navigationController.navigationBar setBackgroundImage:bgimage forBarMetrics:UIBarMetricsDefault];

//通过设置shadowImage为 navigationBar设置红色分割线

UIImage *lineImage = [UIImage imageFromColor:[UIColor redColor] withSize:CGSizeMake(kWidth, 0.5f)];

[self.navigationController.navigationBar setShadowImage:lineImage];


关于UINavigationBar的背景和分割线设置_第3张图片



果然分割线变成了红色。

总结:

你可以这样设置微导航栏设置背景颜色,或者是各种图案。

//通过设置BarTintColor为 navigationBar设置背景颜色

[self.navigationController.navigationBar setBarTintColor:[UIColor whiteColor]];

//通过-setBackgroundImage:forBarMetrics:方法设置白色背景颜色

UIImage *bgimage = [UIImage imageFromColor:[UIColor whiteColor] withSize:CGSizeMake(kWidth, kStatus_h + 44.f)];

[self.navigationController.navigationBar setBackgroundImage:bgimage forBarMetrics:UIBarMetricsDefault];

但是如果你想同时设置背景样式和分割线颜色,你只能通过-setBackgroundImage:forBarMetrics:方法来设置你的背景,否则你通过设置shadowImage属性修改分割线样式就不会生效。

单是如果你是一个刚烈的孩子,一定要通过设置barTintColor修改背景颜色,还想修改分割线颜色的话,方法是有的。通过遍历UINavigationBar找到那条分割线,并且直接修改。或者隐藏原来的分割线,自定义一条分割线。

你问我具体怎么实现? 

https://www.baidu.com



以上代码都是在iOS 10.3.1 上的模拟器运行。后来我发现,在iOS11和以上的设备上已经不需要使用

-setBackgroundImage:forBarMetrics:方法设置背景图片才能通过设置shadowImage修改分割线样式了。

不设置BackgroundImage,直接设置shadowImage也能修改分割线的样式,大家可以自己试一试。不过为了适配iOS11以下的设备,还是需要同时设置背景图片~

你可能感兴趣的:(关于UINavigationBar的背景和分割线设置)