iOS导航栏设置背景图片

一、基础知识铺垫

1.众所周知，导航栏设置背景图片有两个方法：

1.-setBackgroundImage:forBarMetrics:
2.-setBackgroundImage:forBarPosition:barMetrics:

设置属性的话分别取：

forBarPosition ： 
UIBarPositionAny
UIBarPositionBottom ：官方解释shadow above the bar，注：除了这个枚举，其他使用都有效。
UIBarPositionTop
UIBarPositionTopAttached

barMetrics ： 
UIBarMetricsDefault ： 我试过了除了这个默认属性，其他的使用了都无效。
UIBarMetricsCompact
UIBarMetricsDefaultPrompt
UIBarMetricsCompactPrompt
UIBarMetricsLandscapePhone
UIBarMetricsLandscapePhonePrompt

注：一般情况下，只需要用1方法就行。

二、遇到问题

但是，我就这么设置，然后遇到一个问题。
UI给了我们有一张颜色渐变的背景图，尺寸为750*6。
这张图分别用于：1.我们app中所有的按钮 2.首页的一张背景图 3.导航栏背景
设置时，这张图默认是平铺的。设置按钮和UIImageview时都没问题，但是导航栏背景出问题了。

1.png

从图中可以看出，导航栏的颜色和用UIImageView设置的颜色并不相同，导航栏中颜色没有渐变。
怎么办呢，我在想这是什么原因造成的。

我把设置导航栏的代码又检查了一遍，而且用了各种方法。

比如 ： 1.将图片变成颜色给导航栏设置backgroundcolor 
        2.自己来画渐变色
        3.设置导航栏的透明度 
        4.自定义UINavigaitonbar、、、等等

但是毫无效果，我细细琢磨，发现该导航栏上的颜色并没有出现渐变的颜色，而只取到了渐变颜色最左边的色值。有个朋友提醒我是不是导航栏设置颜色和其他控件设置颜色有什么不同。

最终我们猜想是导航栏可能是通过像素来平铺图片的。而出现上面问题的原因是，我这张背景图只有一张，没有@2x和@3x。在这里又涉及到关于@1x和@2x、@3x的意思和设置问题。 2.png

知识小结：
如果只有一张图，拖进Xcode中Assets.xcassets里，会自动放入@1x的选项框内。
在iPhone4及后面的机型，都是取@2x和@3x的。那如果没有@2x和@3x，会默认选择@1x，而且尺寸和原图像素相同。
如果有@2x和@3x，得到的尺寸是原图像素的一半。
所以UI给我的图是750*6，我只取到了它的前一部分的色值。所以颜色没有渐变。

三、验证猜想

为了验证猜想，我将图设置为320*6，用的是iPhone5s进行测试。 3.png

完美！
此刻我的心情是激动的，为了进一步验证我的猜想，我创建了两张图@2x和@3x，图的尺寸分别为750 × 626和1125 × 939。

为了方便观看效果，我用了另一张图来试验，用的是iPhone7测试。 4.png

问题完美解决。
由于代码非常简单，这里给一张渐变的图，就放入下文了。

资源文件： gradient.png

-------------------------------------------------------- 分割线 --------------------------------------------------
还有个东西忘记说了，就是设置设置导航栏底部阴影效果。
系统有个方法是:setShadowImage

[self.navigationController.navigationBar setShadowImage:[UIImage imageNamed:@"timg"]]; //这里的timg就是那张叶子图

然后得到了下面这样的效果。

5.png

初看时觉得这又是啥情况，它的UI结构其实很简单，如下图

6.png

由此可见，导航栏上所有的图片设置，都是按照像素来平铺的。

为了达到阴影效果，我在下面的UIImageView上加了一个view，设置view的阴影。

[self.navigationController.navigationBar setShadowImage:[UIImage new]]; //去除导航栏自带阴影
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor blackColor]; //这个随便设置什么颜色，切记不可设置为clearColor
view.frame = CGRectMake(0, -1, [UIScreen mainScreen].bounds.size.width, 1);
view.layer.shadowOpacity = 0.7; //不透明度
view.layer.shadowOffset = CGSizeMake(0, 3); //偏移距离
view.layer.shadowRadius = 5; //阴影半径
[self.imgView addSubview: view];

最终效果：

7.png