Just a Computer Graphics Studio & My Life

[iOS] Navigation Bar 客製化

iOS App幾乎少不了Navigation Bar,想要客製化Navigation Bar就要多些技巧,因為iOS SDK內建的功能有限(也許我沒發現XD~)。過去我們團隊常自己刻Navigation Bar,每一頁都拉介面設定,儘管麻煩還是依樣畫葫蘆,有時候某些頁面要呈現特別的樣子,就會慶幸我們使用非原生:P~

原生預設長得像下方圖⋯⋯

navigation-bar2

如果沒有特別設定,高度和顏色固定。

那假如我想改成下方的樣子呢?

navigation-bar

因為原本是用原生的方法做,所以有嘗試過拉高Navigation Bar,不過一直有點擊問題。

/**
 Theme: Navigation Bar Customization
 IDE: Xcode 8
 Language: Objective C
 Date: 105/12/27
 Author: HappyMan
 Blog: https://cg2010studio.wordpress.com/
 */
    // 設定 Navigation Bar 高度
    [self.navigationController.navigationBar setFrame:CGRectMake(self.navigationController.navigationBar.frame.origin.x, self.navigationController.navigationBar.frame.origin.y, self.navigationController.navigationBar.frame.size.width, 50)];

    // Navigation Bar 背景
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav_background"] forBarMetrics:UIBarMetricsDefault];

    // Navigation Bar 陰影
    [self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];

    [self.navigationController.navigationBar setShadowImage:[UIImage imageNamed:@"nav_shadow"]];

後來發現Navigation Bar可以設定背景和陰影,於是就解決我們大部分的問題囉~

navigation-bar

是不是很像Navigation Bar拉高呢?但事實上高度一直沒有變,是下方的介面顏色跟上方一樣。

參考:How to hide iOS7 UINavigationBar 1px bottom line

廣告

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: