настройка изображения для UIBarButtonItem - изображение растянуто

Question

Когда я пытаюсь использовать initWithImage UIBarButtonItem для инициализации пользовательского изображения панели навигации, оно получается вымытым и растянутым к черной панели навигации.Вот как я его создаю:

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

Вот как это выглядит:

Есть идеи, если это проблема с изображением?Я получил его из набора иконок, которые я купил.

Answer 1

Лучший способ сделать это - создать кнопку, установить ее фоновое изображение и установить ее действие. Затем 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];

Answer 2

Отображаемые изображения на элементах панели кнопок «получены» из исходного изображения (при рендеринге используются только значения альфа-канала, но на вашем изображении все выглядит нормально).Возможно, он просто не подходящего размера - вам может понадобиться открыть файл изображения и обрезать его до нужного размера.

Вы также можете попробовать посмотреть, можно ли использовать настройку imageInsets (унаследованную UIBarButtonItem из UIBarItem ) для настройки размера вспособ остановить его растяжение.

Doco на изображениях элементов панели говорит следующее:

Изображения, отображаемые на панели, получены из этого изображения.Если это изображение слишком велико, чтобы поместиться на панели, оно масштабируется, чтобы соответствовать.Обычно размер панели инструментов и изображения панели навигации составляет 20 х 20 точек.

Answer 3

Я знаю, что у этого вопроса уже есть галочка с галочкой. Но я столкнулся с этим сегодня и подумал, что все равно предложу свой ответ. Помеченный ответ выше помог мне, но потребовались дополнительные эксперименты, чтобы выяснить, что на самом деле происходит.

Изображение кнопки сокращается только по оси x, а не по оси y. это потому, что он слишком высокий для кнопки и сжимает его, чтобы соответствовать. Но это не уменьшает его пропорционально. Только по вертикали. Так что кажется растянутым. Это на самом деле не растягивается - что подразумевает его расширение. Вместо этого высота уменьшается. Зная разницу, я думаю, важно понять, почему это происходит и как это исправить.

Я сделал то же самое, что и ОП. Думая, что я поддерживаю сетчатку, я сделал свою иконку 40х40. У меня была зеленая галочка с альфа-каналом. Он был дополнен пустыми пикселями до 40х40. Приложение изменило размеры, чтобы оно соответствовало доступной высоте кнопки. Но ширина осталась прежней. Так стало где-то в диапазоне 40х30 или 40х20. Я думаю, что кнопка может обрабатывать значок высотой 30, но тогда она слишком велика для коробки ИМХО.

ОП уменьшил кнопку до 30х30, и это больше не давило нажатия. Но это не лучшее решение. Потому что на самом деле это не кнопка сетчатки, когда вы делаете это. Он сжимается, а затем взорван на сетчатке.

Правильный ответ - назовите вашу версию высотой 40 пикселей с @ 2x, а затем сделайте версию половинного размера (20 пикселей) и сохраните ее без @ 2x. Ширина может быть любой. Затем загрузите с imageNamed: без указания @ 2x. Он будет использовать соответствующий PNG для устройства сетчатки или не сетчатки.

Следующее, что случилось со мной, было то, что рамка кнопки была слишком маленькой. Поэтому я увеличил размер холста в psd, чтобы увеличить ширину png до 80, чтобы сделать кнопку немного шире и более легко нажимаемой.

Answer 4

Я получил ту же проблему растянутое для моего изображения 40x40, когда я установил фоновое изображение для leftBarButtonItem

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

self.navigationItem.leftBarButtonItem = backButton;

Но моя проблема была решена со следующим кодом

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

self.navigationItem.leftBarButtonItem = backButton;

и таким же результатом, если UIBarButtonItemStyleBordered .

Answer 5

Установите правильный размер изображения: @ 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)

Answer 6

Для тех, кто сталкивался с этой проблемой растяжения элементов панели инструментов в 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]];

Тогда вам нужно будет использовать tags@2x.png, это 80x80, даже если ваше изображение tags.png имеет размер 80x80.Просто переименуйте tags.png в tags@2x.png, измените размер изображения до 40x40, как это было до iOS 11 без изменения кода, или просто добавьте tags@2x.png в ваш проект.