iOS 屏幕原點坐標(biāo) &&自定制導(dǎo)航欄的研究

一、屏幕原點坐標(biāo)的研究

小伙伴們可能發(fā)現(xiàn),我們給一個空間設(shè)置origin為(0随常,0)的時候,有時候這個點會再屏幕的最左上角(有導(dǎo)航欄的情況下還可能會被導(dǎo)航欄給蓋滋蜒摹)线罕,有時候又在導(dǎo)航欄的下邊,都是同樣的原點坐標(biāo)窃判,那么為什么會出現(xiàn)這種情況呢钞楼?下面給出答案:

一個controller的view的原點位置受self.navigationController. navigationBar 的 setTranslucent (BOOL) 屬性控制,在 iOS7 以后 translucent 屬性默認(rèn)為 YES袄琳。

translucent 為YES:原點位置坐標(biāo)為屏幕左頂端询件,即屏幕坐標(biāo)系(0 , 0),含義為毛玻璃唆樊、半透明效果宛琅。

translucent 為NO:原點位置坐標(biāo)為導(dǎo)航欄的下邊的左頂端,即屏幕坐標(biāo)系(0 , 64)逗旁,此時導(dǎo)航欄不透明嘿辟。

注意,當(dāng)我們設(shè)置navigationBar的背景圖片setBackgroundImage(注意是背景圖片不是背景顏色)的時候片效,坐標(biāo)起點也會變成(0红伦,64),因為當(dāng)我們設(shè)置背景圖片的時候淀衣,系統(tǒng)會自動修改translucent為NO昙读。

二、自定制導(dǎo)航欄

修改導(dǎo)航欄可以采用全局修改(一般在appDelegate中或者在父navigationController中設(shè)置navigationBar )膨桥,也可以單獨在相應(yīng)的頁面設(shè)置蛮浑。

全局appearance修改:

UINavigationBar * navigationBarApperance = [UINavigationBar appearance];

//后續(xù)對bar設(shè)置,代碼省略只嚣。

父navigationController修改:

獲取self.navigationBar設(shè)置沮稚,代碼省略。

單獨頁面設(shè)置:

self.navigationController.navigationBar設(shè)置册舞,代碼省略蕴掏。

注:下文我們的示例代碼都是全局設(shè)置。

1.修改導(dǎo)航欄的“背景”顏色

修改導(dǎo)航欄顏色有如下幾種方式:

1.1 通過backgroundColor進(jìn)行設(shè)置:

UINavigationBar * navigationBarApperance = [UINavigationBar appearance];

navigationBarApperance.backgroundColor = [UIColor redColor];

navigationBarApperance.translucent = YES;

此方式需要translucent=YES為前提,而且設(shè)置出來的背景顏色不純囚似,會被導(dǎo)航欄的毛玻璃效果遮擋(至于為什么會被遮擋下文會講),此方式基本不成功线得,效果太傻缺饶唤,而且效果產(chǎn)生的優(yōu)先級會很低,如果后面再設(shè)置navigationBar的barTintColor贯钩,會覆蓋掉這個效果募狂。

綜上,次方式直接廢棄角雷。


backgroundColor.png

1.2 通過barTintColor進(jìn)行設(shè)置:

UINavigationBar * navigationBarApperance = [UINavigationBar appearance];

navigationBarApperance.barTintColor = [UIColor redColor];


barTintColor.png

如上圖可以看到底部會有一條淺黃色(這個淺黃色是系統(tǒng)根據(jù)你導(dǎo)航欄的顏色自動適配的一個顏色)的分割線陰影祸穷,這條分割陰影是用來分割導(dǎo)航欄和下面視圖的。如你不想要分割線勺三,你也可以通過設(shè)置相同顏色的陰影圖片去解除:

navigationBarApperance.shadowImage = [UIImage imageWithColor:[UIColor redColor]];

此方式設(shè)置的背景色雷滚,可以達(dá)到效果,但是效果產(chǎn)生的優(yōu)先級比較弱沒有下面1.3的設(shè)置背景圖片高吗坚,同學(xué)們可以根據(jù)實際情況考量是否選擇此方法祈远。

綜上,此方法可行商源,優(yōu)先級相對弱车份,推薦,綜合考量使用牡彻。

1.3 通過設(shè)置setBackgroundImage進(jìn)行設(shè)置:

UINavigationBar * navigationBarApperance = [UINavigationBar appearance];

[navigationBarApperance setBackgroundImage:[UIImage imageWithColor:[UIColor redColor]] forBarMetrics:UIBarMetricsDefault];


backgroundImage.png

此方法設(shè)置的導(dǎo)航欄底部也會有一條淺黃的分割線陰影扫沼,和上面barTintColor效果一樣,底下的分割線陰影也可以自動以設(shè)置庄吼。但是需要注意的是缎除,此方法設(shè)置的優(yōu)先級是最高的,會覆蓋掉1.1总寻,1.2中所有設(shè)置的背景色伴找。

驗證如下:

UINavigationBar * navigationBarApperance = [UINavigationBar appearance];

[navigationBarApperance setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor]] forBarMetrics:UIBarMetricsDefault];

navigationBarApperance.barTintColor = [UIColor redColor];

以上代碼我先設(shè)置白色背景圖,再設(shè)置紅色barTintColor废菱,但是紅色的背景色沒有生效技矮,還是被白色背景圖覆蓋,如下圖:


backgroundImage優(yōu)先級最高.png

綜上殊轴,此方法可行衰倦,優(yōu)先級最高,推薦旁理,綜合考量使用樊零。

這里說個查bug的小提示,當(dāng)我們在某個頁面設(shè)置了導(dǎo)航欄背景色,但是沒有生效驻襟,這個時候我們需要檢查下是不是我們用的bartintColor設(shè)置的被父類的設(shè)置背景圖給覆蓋了夺艰,導(dǎo)致沒有生效,這個時候你就需要也用設(shè)置背景色來設(shè)置了沉衣。

下面我們針對前面提出的為什么設(shè)置的backgrandColor會被遮擋做出解釋郁副。

導(dǎo)航欄的層級圖如下:


導(dǎo)航欄圖層.png

從上圖我們可以看到,導(dǎo)航欄一共分為4大層豌习,分別是存谎,

1:背景色(backgroundColor)層,在最下面

2:背景層(barbackground)肥隆,用作父視圖

3:背景圖片(imageview)層既荚,此處有2個imageview,一個是背景圖片栋艳,一個市分割線圖片

4:主內(nèi)容(contentview)層,用來顯示navigationItem,比如導(dǎo)航欄的title恰聘,titleview耽梅,barButtonItem等问窃。

通過層級我們可以看到旦委,我們前面之所以設(shè)置的背景色顯示不出來胸懈,是因為這個背景色在最底層泣崩,會被上面的背景層給遮擋措拇,個人感覺說白了芹扭,我們設(shè)置導(dǎo)航欄的背景色就是無用的芯肤。

2.設(shè)置導(dǎo)航欄上的字體顏色

2.1 設(shè)置導(dǎo)航欄左右兩邊barbuttonItem的顏色:tintColor

navigationBarApperance.barTintColor = [UIColor greenColor];

注意:這種方式不能改變導(dǎo)航欄中間標(biāo)題的顏色

barbuttonItem的顏色也可以通過自定制視圖設(shè)置:

UIButton *leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];

[leftBtn setTitle:@"左邊" forState:UIControlStateNormal];

[leftBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];

self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:leftBtn];

以上這種自定制設(shè)置如果設(shè)置了顏色會覆蓋掉前面設(shè)置的tintColor问拘。

2.2 設(shè)置導(dǎo)航欄中間標(biāo)題的顏色遍略,字體:通過設(shè)置屬性字符串實現(xiàn)TitleTextAttributes

navigationBarApperance.titleTextAttributes = @{NSForegroundColorAttributeName : [UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:18]};

這里說下,設(shè)置頁面導(dǎo)航欄標(biāo)題的方式骤坐,有兩種:

方式一:self.title = @"首頁";

方式二:self.navigationItem.title = @"首頁";

這兩種方式都可以設(shè)置標(biāo)題绪杏,而且效果是一樣的,如果這兩個方式都設(shè)置了標(biāo)題纽绍,那么最后的標(biāo)題會覆蓋掉前面的設(shè)置的蕾久。

3.梳理下navigationBar,navigationItem的關(guān)系

navigationBar是UINavigationController的一個屬性拌夏,主要用來設(shè)置導(dǎo)航欄顏色(背景色和鏤空色tintColor)

navigationItem是UIViewController的一個分類UINavigationControllerItem中的屬性僧著,主要用來自定制導(dǎo)航欄上顯示的東西,包括左右兩邊的barbuttonItem障簿,中間的title或者中間的titleview盹愚。navigationItem主要是前面介紹的導(dǎo)航欄層級中最上層contentview的子視圖。

三站故、常用設(shè)置導(dǎo)航欄皆怕,tabbar代碼

1.統(tǒng)一設(shè)置NavigationBar的顏色、tint顏色、愈腾、字體

// 設(shè)置導(dǎo)航欄的顏色 [[UINavigationBar appearance] setBarTintColor:[UIColor redColor]]; // 設(shè)置tint顏色 [[UINavigationBar appearance] setTintColor: [UIColor whiteColor]]; // 設(shè)置導(dǎo)航欄上的標(biāo)題的顏色憋活、字體 [[UINavigationBar appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:18]}]; // 取消透明度 [[UINavigationBar appearance] setTranslucent:NO]; // 設(shè)置背景圖片(前面已經(jīng)設(shè)置了顏色,此處可以不設(shè)置虱黄,避免覆蓋掉上面的顏色) [[UINavigationBar appearance] setBackgroundImage:xxx forBarMetrics:UIBarMetricsDefault]; // 去掉導(dǎo)航欄與內(nèi)容之間的分割線 [self.navigationController.navigationBar setShadowImage:nil];

2悦即、設(shè)置tabbar相關(guān)

[[UITabBar appearance] setTintColor: [UIColor blueColor]]; //Normal [[UITabBarItem appearance] setTitleTextAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12],NSBackgroundColorAttributeName:[UIColor greenColor]} forState:UIControlStateNormal]; //Selected [[UITabBarItem appearance] setTitleTextAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15],NSBackgroundColorAttributeName:[UIColor redColor]} forState:UIControlStateSelected]; // 設(shè)置tabbar上的圖片不要用tintcolor,使用圖片原生的樣子 UIImage *normalImg = [[UIImage imageNamed:@"xxx"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; vc.tabBarItem.image = normalImg; UIImage *selectImg = [[UIImage imageNamed:@"xxx"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; vc.tabBarItem.selectedImage = selectImg; // 將tabbar的顏色設(shè)置為黑色 self.tabBar.barTintColor = [UIColor blackColor];

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末礁鲁,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子赁豆,更是在濱河造成了極大的恐慌仅醇,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件魔种,死亡現(xiàn)場離奇詭異析二,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)节预,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進(jìn)店門叶摄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人安拟,你說我怎么就攤上這事蛤吓。” “怎么了糠赦?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵会傲,是天一觀的道長。 經(jīng)常有香客問我拙泽,道長淌山,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任顾瞻,我火速辦了婚禮泼疑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘荷荤。我一直安慰自己退渗,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布蕴纳。 她就那樣靜靜地躺著氓辣,像睡著了一般。 火紅的嫁衣襯著肌膚如雪袱蚓。 梳的紋絲不亂的頭發(fā)上钞啸,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼体斩。 笑死梭稚,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的絮吵。 我是一名探鬼主播弧烤,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蹬敲!你這毒婦竟也來了暇昂?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤伴嗡,失蹤者是張志新(化名)和其女友劉穎急波,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瘪校,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡澄暮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了阱扬。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泣懊。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖麻惶,靈堂內(nèi)的尸體忽然破棺而出馍刮,到底是詐尸還是另有隱情,我是刑警寧澤窃蹋,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布渠退,位于F島的核電站,受9級特大地震影響脐彩,放射性物質(zhì)發(fā)生泄漏碎乃。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一惠奸、第九天 我趴在偏房一處隱蔽的房頂上張望梅誓。 院中可真熱鬧,春花似錦佛南、人聲如沸梗掰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽及穗。三九已至,卻和暖如春绵载,著一層夾襖步出監(jiān)牢的瞬間埂陆,已是汗流浹背苛白。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留焚虱,地道東北人购裙。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像鹃栽,于是被迫代替她去往敵國和親躏率。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容