作者写了一个给 iPhone X 去掉刘海的 APP,而且其他 iPhone 也可以玩,有兴趣的话去 App Store 看看。点击前往。
阅读完本文以后,你会使用我提供的方法去自定义导航栏下阴影线的尺寸和颜色,也就是下图红色方框里的控件,最终的效果如图:
可能你看到这篇文章的时候,已经实在找不到办法来解决这个问题了,因为我在成功解决这个问题之前,和你的感受是一样的。请你继续往下看,我这篇文章或许可以为你解决这个问题提供一些思路。
这篇文章包括两个部分,第一部分是iOS中怎么设置导航栏下的阴影线;第二部分是怎么去设置这条阴影线的尺寸和颜色。
01.iOS中怎么设置导航栏下的阴影线?
[self.navigationController.navigationBar setShadowImage:[UIImage imageNamed:@"line_opacity"]];
这个是系统提供的方法,当然,这里的UIImage可以是UI设计师给的图片。同时你也可以使用纯色来作为阴影线,但是,你需要借助以下分类来获得一张纯色图片。
具体代码如下:
#import "UIImage+Image.h"
@implementation UIImage (Image)
+ (UIImage *)imageWithColor:(UIColor *)color {
// 描述矩形
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
// 开启位图上下文
UIGraphicsBeginImageContext(rect.size);
// 获取位图上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 使用color演示填充上下文
CGContextSetFillColorWithColor(context, [color CGColor]);
// 渲染上下文
CGContextFillRect(context, rect);
// 从上下文中获取图片
UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
// 结束上下文
UIGraphicsEndImageContext();
return theImage;
}
@end
这是一个 UIImage
的分类,这个分类有一个分类方法,给该方法传入一个 UIColor
的实例对象就可以获得一张大小为 1.0 × 1.0 的纯色图片。
02.怎么去设置这条阴影线的尺寸和颜色?
包括我自己看官方文档和在 Google
上找了很多资料,暂时还没有发现有可以设置这条阴影线的API(如果你知道,烦请务必要在文章最后留言区留言,让更多同行朋友知道,谢谢)。
我截屏给UI设计师,请她帮我测量这条阴影线的像素个数,得到的结论是两个像素(设备: iPhone6S 64GB 国行版)。
现在项目需求是这条阴影线的尺寸必须是1个像素。
没有办法,最后我想了一个投机的方法。这个方法也是你或许可以借鉴的。先补充一点UI知识,我这里@2x的图片是两个像素点(因为苹果默认这个阴影高度就是两个像素),那对应的@3x的图片就是3个像素点。
好,继续。如下图所示,我让 UI 设计师给我两张图片,第一张 @2x 的图片一半的像素(一个像素点)是白色(导航栏背景颜色,和导航栏背景颜色一致就是为了让多出来的一个像素和背景色一致,这样看起来就像是上部多出来的一个像素是属于上方导航栏的),另一半像素(一个像素点)的颜色是需要的分割线的颜色。而 @3x 的图片上部两个像素点是白色,下部一个像素点是需要的分割线的颜色。
最后,如果你有其他的尺寸需求,可以参考我的方法进行设置。谢谢你的阅读。
我的文章集合
下面这个链接是我所有文章的一个集合目录。这些文章凡是涉及实现的,每篇文章中都有 Github 地址,Github 上都有源码。
我的文章集合索引
你还可以关注我自己维护的简书专题 iOS开发心得。这个专题的文章都是实打实的干货。如果你有问题,除了在文章最后留言,还可以在微博 @盼盼_HKbuy上给我留言,以及访问我的 Github。