[iOS]中修改导航栏下阴影线的尺寸和颜色

2017-12-23 本文已影响2234人 e2f2d779c022

作者写了一个给 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 的图片上部两个像素点是白色，下部一个像素点是需要的分割线的颜色。

@2x@3x.png

最后，如果你有其他的尺寸需求，可以参考我的方法进行设置。谢谢你的阅读。

我的文章集合

下面这个链接是我所有文章的一个集合目录。这些文章凡是涉及实现的，每篇文章中都有 Github 地址，Github 上都有源码。

我的文章集合索引

你还可以关注我自己维护的简书专题 iOS开发心得。这个专题的文章都是实打实的干货。如果你有问题，除了在文章最后留言，还可以在微博 @盼盼_HKbuy上给我留言，以及访问我的 Github。

赞助

你这一赞助，我写的就更来劲了！

微信赞助扫码

支付宝赞助扫码