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

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

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

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

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

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

注意,當(dāng)我們?cè)O(shè)置navigationBar的背景圖片setBackgroundImage(注意是背景圖片不是背景顏色)的時(shí)候,坐標(biāo)起點(diǎn)也會(huì)變成(0,64),因?yàn)楫?dāng)我們?cè)O(shè)置背景圖片的時(shí)候,系統(tǒng)會(huì)自動(dòng)修改translucent為NO。

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

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

全局appearance修改:

UINavigationBar * navigationBarApperance = [UINavigationBar appearance];

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

父navigationController修改:

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

單獨(dú)頁(yè)面設(shè)置:

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

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

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

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

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

UINavigationBar * navigationBarApperance = [UINavigationBar appearance];

navigationBarApperance.backgroundColor = [UIColor redColor];

navigationBarApperance.translucent = YES;

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

綜上,次方式直接廢棄。


backgroundColor.png

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

UINavigationBar * navigationBarApperance = [UINavigationBar appearance];

navigationBarApperance.barTintColor = [UIColor redColor];


barTintColor.png

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

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

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

綜上,此方法可行,優(yōu)先級(jí)相對(duì)弱,推薦,綜合考量使用。

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

UINavigationBar * navigationBarApperance = [UINavigationBar appearance];

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


backgroundImage.png

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

驗(yàn)證如下:

UINavigationBar * navigationBarApperance = [UINavigationBar appearance];

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

navigationBarApperance.barTintColor = [UIColor redColor];

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


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

綜上,此方法可行,優(yōu)先級(jí)最高,推薦,綜合考量使用。

這里說(shuō)個(gè)查bug的小提示,當(dāng)我們?cè)谀硞€(gè)頁(yè)面設(shè)置了導(dǎo)航欄背景色,但是沒(méi)有生效,這個(gè)時(shí)候我們需要檢查下是不是我們用的bartintColor設(shè)置的被父類(lèi)的設(shè)置背景圖給覆蓋了,導(dǎo)致沒(méi)有生效,這個(gè)時(shí)候你就需要也用設(shè)置背景色來(lái)設(shè)置了。

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

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


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

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

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

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

3:背景圖片(imageview)層,此處有2個(gè)imageview,一個(gè)是背景圖片,一個(gè)市分割線圖片

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

通過(guò)層級(jí)我們可以看到,我們前面之所以設(shè)置的背景色顯示不出來(lái),是因?yàn)檫@個(gè)背景色在最底層,會(huì)被上面的背景層給遮擋,個(gè)人感覺(jué)說(shuō)白了,我們?cè)O(shè)置導(dǎo)航欄的背景色就是無(wú)用的。

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

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

navigationBarApperance.barTintColor = [UIColor greenColor];

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

barbuttonItem的顏色也可以通過(guò)自定制視圖設(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è)置了顏色會(huì)覆蓋掉前面設(shè)置的tintColor。

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

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

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

方式一:self.title = @"首頁(yè)";

方式二:self.navigationItem.title = @"首頁(yè)";

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

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

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

navigationItem是UIViewController的一個(gè)分類(lèi)UINavigationControllerItem中的屬性,主要用來(lái)自定制導(dǎo)航欄上顯示的東西,包括左右兩邊的barbuttonItem,中間的title或者中間的titleview。navigationItem主要是前面介紹的導(dǎo)航欄層級(jí)中最上層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)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容