2011-08-18 179 views
24

當我嘗試使用UIBarButtonItem的「initWithImage」初始化導航欄自定義圖像時,它會出現在黑色導航欄上並被拉伸。這是我如何創建它:UIBarButtonItem的設置圖像 - 圖像拉伸

UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"gear.png"] style:UIBarButtonItemStyleBordered target:self action:@selector(showSetting:)]; 

這裏是什麼樣子:

enter image description here

,如果它與圖像的問題,你知道嗎?我從我購買的一系列圖標中得到它。

回答

12

條形圖按鈕項目上顯示的圖像是源圖像中的「派生」(它在渲染中僅使用Alpha通道值,但在圖像中全部看起來都不錯)。它可能只是不正確的尺寸 - 您可能需要打開圖像文件並將其裁剪到合適的尺寸。

您也可以嘗試看是否設置imageInsets屬性(由的UIBarButtonItem繼承UIBarItem)可以使用的方式來調整大小,以阻止它越來越捉襟見肘。

DOCO在杆項目圖像說以下內容:欄上顯示

的圖像被從該圖像的。如果此圖像太大而無法放在條上,則會縮放以適合該條。通常,工具欄和導航欄圖像的大小爲20 x 20點。

+1

的圖像是40×40 ......裁剪〜30×使它看起來像大小合適,但它仍然是灰色的。我想我應該讓裝備的內部是白色的,以便它與文字相符? –

+0

雅,使它白色(調整大小後)的作品。 –

31

這樣做的最好方法是創建一個按鈕,設置其背景圖像並設置其操作。然後,可以使用此按鈕作爲自定義視圖創建一個UIBarButtonItem。這裏是我的示例代碼:

UIButton *settingsView = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 61, 30)]; 
[settingsView addTarget:self action:@selector(SettingsClicked) forControlEvents:UIControlEventTouchUpInside]; 
[settingsView setBackgroundImage:[UIImage imageNamed:@"settings"] forState:UIControlStateNormal]; 
UIBarButtonItem *settingsButton = [[UIBarButtonItem alloc] initWithCustomView:settingsView]; 
[self.navigationItem setRightBarButtonItem:settingsButton]; 
+0

謝謝 - 這對我來說是一個很好的工作。我有一個我想縮小的圖像,這是一個相當簡單的方法來做到這一點。我使用imageWithRenderingMode創建了我的圖像的第二個版本:UIImageRenderingModeAlwaysTemplate],以便它適當地着色。 – mdebeus

9

我知道這個問題已經有一個選中標記的anser。但是我今天跑到這裏,並且認爲我會提供我的答案。上面標記的答案確實對我有所幫助,但是它也花了一些額外的實驗來弄清真正發生了什麼。

按鈕圖像僅在x軸收縮而不是y。這是因爲它對於按鈕來說太高了,並且縮小了它的尺寸。但它並沒有按比例縮小。只在垂直方向上。所以它看起來很緊張。它並沒有被拉伸 - 這意味着它的擴大。相反,高度縮小了。瞭解其中的差異我認爲對於理解它發生的原因以及如何解決它很重要。

enter image description here

我做的OP做同樣的事情。以爲我支持視網膜我做了我的圖標40x40。礦是一個alpha通道的綠色複選標記。它填充空白像素爲40x40。該應用調整大小以適應按鈕的可用高度。但寬度保持不變。所以它變成了40x30或40x20的範圍。我認爲按鈕可以處理30高的圖標,但對於盒子恕我直言,這有點太大了。

OP將按鈕減少到30x30,這使得它不再擠壓。但這不是最好的解決方案。因爲當你這樣做時,它實際上並不是視網膜按鈕。它收縮,然後吹回視網膜。

正確的答案是用@ 2x命名您的40像素高版本,然後製作一半尺寸(20像素高)的版本並將其保存爲不帶@ 2x的版本。寬度可以是任何。然後用imageNamed加載:不指定@ 2x。它將使用合適的PNG用於視網膜或非視網膜裝置。

發生在我身上的下一件事是那個按鈕框太小了。所以我在psd中增加了我的畫布大小,將png填充到80寬,使按鈕稍微更寬和更可點擊。

+0

非常有幫助的回答!你的帖子中的綠色勾號是有道理的=) –

2

stretch

我得到了相同的拉伸問題對我的40x40的圖像時,我爲設置背景圖片leftBarButtonItem

UIBarButtonItem *backButton = [UIBarButtonItem new]; 
[backButton setBackButtonBackgroundImage:[UIImage imageNamed:@"back_icon"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; 

self.navigationItem.leftBarButtonItem = backButton; 

但我的問題得到解決用下面的代碼

resolved

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_icon"] style:UIBarButtonItemStylePlain target:self action:@selector(handleBack:)]; 

self.navigationItem.leftBarButtonItem = backButton; 

和相同的結果,如果UIBarButtonItemStyleBordered被使用。

+0

迄今爲止最好的答案,輕鬆修復 –

0

對於那些在iOS 11中特別遇到此工具欄項擴展問題的人,現在需要您的圖像的@ 2x版本來呈現其框架和/或邊界。

所以,如果你有這樣的地方,你要添加的自定義圖像的UIBarButtonItem這樣的代碼:

UIButton *tagsBtn = [UIButton buttonWithType:UIButtonTypeCustom]; 
tagsBtn.bounds = CGRectMake(0, 0, 40, 40); 
[tagsBtn setImage:[UIImage imageNamed:@"tags.png"] forState:UIControlStateNormal]; 
tags = [[UIBarButtonItem alloc] initWithCustomView:tagsBtn]; 
[tagsBtn addTarget:self action:@selector(tags:) forControlEvents:UIControlEventTouchUpInside]; 

[bottomToolbar setItems:[NSArray arrayWithObjects:flexibleSpace,tags,flexibleSpace,nil]]; 

然後,你將需要有一個[email protected]這是80×80,即使你的標籤。 PNG圖像是80x80。只需將tags.png重命名爲[email protected],就可以將圖像大小調整爲40x40,就像在iOS 11之前一樣,不需要更改代碼,或者只需將[email protected]添加到項目中即可。

0

首先設置正確的圖像大小:@ 1x = 22px,@ 2x = 44px @ 3x = 88px。

然後

let leftBarButtonItem = UIBarButtonItem(image: yourUIImage, style: .plain, target: self, action: #selector(action)) 
leftBarButtonItem.tintColor = UIColor.red 
navigationItem.leftBarButtonItem = leftBarButtonItem 

let btn = UIButton(type: .custom) 
btn.addTarget(self, action: #selector(contactMe), for: .touchUpInside) 
btn.setImage(#imageLiteral(resourceName: "open"), for: .normal)