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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,265评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,078评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,852评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,408评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,445评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,772评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,921评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,688评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,130评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,467评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,617评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,276评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,882评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,740评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,967评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,315评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,486评论 2 348

推荐阅读更多精彩内容

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