2014-01-27 93 views
51

我正在使用故事板,並且我有一個帶有五個選項卡的選項卡欄控制器。在故事板中,我可以爲標籤欄項目設置圖像。 Apple文檔建議每個標籤欄項目都有兩個圖標 - 一個用於選擇,一個用於未選中狀態。在故事板中設置選項卡欄控制器中的選定圖像

我無法弄清楚如何使用故事板來做到這一點。

+1

簡單回答一個簡單的問題:你不能,它只是代碼(至少暫時)。 'initWithTitle:image:selectedImage:' –

回答

135

您可以使用情節提要設置選定欄的圖像。我試過了,它爲我工作。 選擇UITabbarItem並添加運行時屬性'selectedImage',選擇類型爲'圖像',並將圖像的名稱作爲其值。

Setting selected image of Tabbar using storyboard

我使用的XCode 6.0,我最小的部署目標是iOS的8.0。

+31

新版本的XCode在屬性檢查器中有一個「Selected Image」字段,但它似乎不起作用。謝天謝地,這個答案對我有用。 –

+0

這很好,我一直在尋找如何解決這個問題幾個小時。感謝您提供答案! –

+3

我已經嘗試過。但是,不爲我工作。我不確定是什麼原因。 –

11

是的,這不能使用故事板完成 - 需要編寫代碼。

UINavigationViewControllerviewDidLoad方法中,我們可以寫出如下代碼 -

UITabBar *tabBar = self.tabBar; 

UITabBarItem *targetTabBarItem = [[tabbar items] objectAtIndex:0]; // whichever tab-item 
UIImage *selectedIcon = [UIImage imageNamed:@"name-of-selected-image.png"]; 
[targetTabBarItem setSelectedImage:selectedIcon]; 
+1

沒有叫做'UINavigationViewController'的類,如果你的意思是'UINavigationController',它沒有叫'tabBar'的屬性。 –

+1

實際的第一行代碼應該是這樣的:'UITabBar * tabBar = self.navigationController.tabBarController.tabBar;' – CTiPKA

+1

這不適合我。 – coolcool1994

3

的圖標應在相應的視圖控制器來設置。當您這樣做時,您可以自由地重新排列故事板主選項卡控制器內的視圖控制器的順序,而無需更改每個圖標的代碼(objectAtIndex:0)。

將下面的行進viewDidLoad方法:

if (self.navigationController.viewControllers.count < 2) 
    self.navigationController.tabBarItem.selectedImage = [UIImage imageNamed:@"image-selected.png"]; 

if條件可確保按鈕只改變最頂部的視圖控制器。當您在導航層級中將視圖控制器重新用作子視圖控制器時,這是必需的。

+1

這應該是被接受的答案,注意「相應的視圖控制器」是UINavigationController的根視圖控制器。 –

+1

這對我來說不起作用 –

7

您現在可以在故事板中輕鬆完成此操作。在你有的每個tabviewcontroller上,它應該包含層次結構中的一個選項卡欄項目(看起來像一個藍色的小星星),點擊它,右邊的設置應該如下圖所示。標籤欄標題&圖像可以在這裏更改。

enter image description here

+6

此字段存在但尚未開始工作。去哈馬茲的答案... –

+1

@DavidNelson你只能填寫圖像部分,你必須保持選定的圖像部分爲空,它的工作。 –

+1

在這種情況下,「選定的圖像」是什麼?爲什麼「標籤欄條目」和「條目條目」有單獨的部分?如果我選擇其中一個系統項目,它工作正常 - 自定義圖像失敗。 – wcochran

5

我認爲,最簡單的方法是從Inspector設置圖像。 您有一個名爲的欄位欄項目 - >圖片,它在那裏您必須設置圖像名稱。 小心,不與標籤欄項目混淆 - >選擇的圖像

enter image description here

6

在Xcode 8.0及以上,你可以簡單地做它的圖片資源,只需選擇圖像,然後選擇渲染爲「原始圖片」。 (請檢查附加圖像)..有樂趣:) enter image description here

+0

這是一個非常重要的部分,因爲簡單地將UIImage設置爲selectedImage對我沒有任何幫助。 (我必須注意,我正在編程)謝謝@Infaz –

3

在新的Xcode 8中,您可以在Storyboard中進行操作,而無需像高指出的答案中所建議的那樣定義運行時屬性。

Print Screen Tab Bar item

不要忘記,圖像應該有這樣的尺寸:

  • @ 1X:約25×25
  • @ 2倍:約50×50
  • @ 3X:約75 x 75
7

下面是Tab中選定/未選擇圖像的完整解決方案巴的XCode> = 8:

  • 去圖像資產 - >選擇圖像
  • 選擇呈現爲: 「原始圖像」

enter image description here

  • 之後去故事板 - >選擇Tabbar項目
  • 在Attribute Inspectors下,設置「Selected Image」&「Im如下面的截圖所示 時代」,that`s它:

enter image description here

2

SWIFT 3.0 - > 的理想方法來設置你的標籤欄按鈕圖像如下:

第一設置要使用按鈕的圖像:

let homeImage = UIImage(named: "TabHome") 
    let homeTappedImage = UIImage(named: "TabHomeRed") 

然後設置類型UITabButtonItem的按鈕:

let homeButton = UITabBarItem(title: homeText, image: homeImage, selectedImage: homeTappedImage) 

    //with this method you set the image when the button is not selected 
    homeButton.image = homeImage?.withRenderingMode(UIImageRenderingMode.alwaysOriginal) 


    //with this method you set the image when the button is selected 
    homeButton.selectedImage = homeTappedImage?.withRenderingMode(.alwaysOriginal) 
相關問題