一、屏幕原點坐標(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贯钩,會覆蓋掉這個效果募狂。
綜上,次方式直接廢棄角雷。
1.2 通過barTintColor進(jìn)行設(shè)置:
UINavigationBar * navigationBarApperance = [UINavigationBar appearance];
navigationBarApperance.barTintColor = [UIColor redColor];
如上圖可以看到底部會有一條淺黃色(這個淺黃色是系統(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];
此方法設(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废菱,但是紅色的背景色沒有生效技矮,還是被白色背景圖覆蓋,如下圖:
綜上殊轴,此方法可行衰倦,優(yōu)先級最高,推薦旁理,綜合考量使用樊零。
這里說個查bug的小提示,當(dāng)我們在某個頁面設(shè)置了導(dǎo)航欄背景色,但是沒有生效驻襟,這個時候我們需要檢查下是不是我們用的bartintColor設(shè)置的被父類的設(shè)置背景圖給覆蓋了夺艰,導(dǎo)致沒有生效,這個時候你就需要也用設(shè)置背景色來設(shè)置了沉衣。
下面我們針對前面提出的為什么設(shè)置的backgrandColor會被遮擋做出解釋郁副。
導(dǎo)航欄的層級圖如下:
從上圖我們可以看到,導(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];