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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,666评论 25 708
  • 我的笔秃了 已然写不出生花妙语 像父亲的背影 在一条河的堤坝上 站成一株枯树 我嘶声力竭 却发不出声音 对岸很近又...
    行者走天涯阅读 593评论 35 59
  • 在我准备安心地呆在医院时,渐渐发现医院的人越来越多了,我才住院的时候每个病房都有那么一张空床,而这个时候,基本都满...
    王秀燕阅读 509评论 0 1