Ustawianie obrazu dla UIBarButtonItem - obraz rozciągnięty

Question

Kiedy próbuję użyć "initWithImage" UIBarButtonItem, aby zainicjować niestandardowy obraz paska nawigacyjnego, zostanie on wyrzucony i rozciągnięty na czarnym pasku nawigacyjnym. W ten sposób tworzę go:

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

Oto jak to wygląda:

Każdy pomysł, jeśli jest to problem z obrazem? Dostałem go z zestawu ikon, które kupiłem.

Answer 1

Wyświetlane obrazy na elementach przycisku paska są "wyprowadzane" z obrazu źródłowego (w renderowaniu są używane tylko wartości kanału alfa, ale wszystko wygląda dobrze na obrazie). Prawdopodobnie nie jest to właściwy rozmiar - może być konieczne otwarcie pliku obrazu i przycięcie go do odpowiedniego rozmiaru.

Można również spróbować patrząc czy ustawienie imageInsets własność (dziedziczona przez UIBarButtonItem z UIBarItem) może być używany, aby dostosować rozmiar w taki sposób, aby zatrzymać go coraz rozciągnięte.

Doco na obrazach poz bar mówi następujące:

Obrazy wyświetlane na pasku pochodzą z tego obrazu. Jeśli obraz jest zbyt duży, aby zmieścił się na pasku, jest skalowany, aby pasował. Zazwyczaj rozmiar paska narzędzi i obrazu paska nawigacji wynosi 20 x 20 punktów.

Answer 2

Najlepszym sposobem na zrobienie tego jest utworzenie przycisku, ustawienie jego tła i ustawienie jego działania. Następnie można utworzyć element UIBarButtonItem, używając tego przycisku jako widoku niestandardowego. Oto mój przykładowy kod:

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]; 

Answer 3

Wiem, że to pytanie ma już zaznaczone anser. Ale dzisiaj doszłam do tego i pomyślałam, że i tak udzielę mojej odpowiedzi. Sprawdzenie zaznaczonej powyżej odpowiedzi pomogło mi, ale trzeba było jeszcze trochę eksperymentować, aby dowiedzieć się, co naprawdę się dzieje.

Obraz przycisku jest zmniejszany tylko na osi X, a nie na y. dzieje się tak dlatego, że jest on za wysoki na przycisk i obkurcza go, aby pasował. Ale nie zmniejsza się proporcjonalnie. Tylko w pionie. Wydaje się rozciągnięty. W rzeczywistości nie jest rozciągnięty - co oznacza jego poszerzenie. Zamiast tego wysokość się zmniejsza. Znając różnicę, myślę, że ważne jest zrozumienie, dlaczego tak się dzieje i jak to naprawić.

zrobiłem to samo PO zrobił. Myśląc, że wspieram siatkówkę, stworzyłem ikonę 40x40. Mój był zielonym znacznikiem z kanałem alfa. Zostało dopełnione pustymi pikselami do 40x40. Aplikacja zmieniła rozmiar, aby zmieścić się w dostępnej wysokości przycisku. Ale szerokość pozostała taka sama. Tak więc stało się to gdzieś w zakresie 40x30 lub 40x20. Myślę, że przycisk może obsłużyć ikonę 30 wysoko, ale potem jest trochę za duży dla skrzynki IMHO.

OP zredukował przycisk do 30x30, dzięki czemu nie był już zgniatany. Ale to nie jest najlepsze rozwiązanie. Ponieważ tak naprawdę nie jest to przycisk siatkówki. Jest skurczona, a następnie wysadzana z powrotem na siatkówce.

Prawidłowa odpowiedź to nazwa wysokiej, 40-pikselowej wersji z @ 2x, a następnie zrobienie połowy rozmiaru (20 pikseli wysokości) i zapisanie jej bez znaku @ 2x.Szerokość może być dowolna. Następnie załaduj z imageNamed: bez określania @ 2x. Użyje odpowiedniego png dla urządzenia siatkówki lub nie-siatkówki.

Następną rzeczą, która mi się przydarzyła, było to, że ramka na guziki była zbyt mała. Więc podniosłem rozmiar płótna w psd, aby ustawić png na 80 szerokości, aby przycisk był nieco szerszy i bardziej dopasowany.

Answer 4

mam takie same rozciągnięte problem dla mojej 40x40 obrazu kiedy ustawić obraz tła dla leftBarButtonItem

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

self.navigationItem.leftBarButtonItem = backButton; 

Ale mój problem dostał rozwiązany z następującego kodu

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

self.navigationItem.leftBarButtonItem = backButton; 

i sam wynik, jeśli UIBarButtonItemStyleBordered służy.

Answer 5

Dla tych, którzy natknęli się na problem z rozciąganiem pozycji na pasku narzędzi w szczególności w iOS 11, wydaje się, że obecnie wymagana jest wersja @ 2x obrazu, aby wyrenderować jego ramkę i/lub ograniczenia.

Więc jeśli masz kod jak to gdzie jesteś dodając obraz niestandardowy UIBarButtonItem tak:

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]]; 

Potem trzeba będzie mieć tags@2x.png który jest 80x80, nawet jeśli tagi. Obraz png to 80x80. Po prostu zmiana nazwy tags.png na tags@2x.png spowoduje zmianę rozmiaru obrazu na 40x40, podobnie jak wcześniej w systemie iOS 11 bez zmiany kodu, lub po prostu dodaj tag@2x.png do projektu.

Answer 6

Ustaw prawidłowy rozmiar obrazu: @ 1x = 22px, @ 2x = 44px @ 3x = 88px.

Następnie

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

lub

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