configurando la imagen para UIBarButtonItem - imagen estirada

Question

Cuando trato de usar UIBarButtonItem's "initWithImage" para inicializar una imagen personalizada de la barra de navegación, sale vaciada y estirada contra una barra de navegación negra. Se trata de cómo creo que:

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

Esto es lo que parece:

Alguna idea de si se trata de un problema con la imagen? Lo obtuve de un conjunto de iconos que compré.

Answer 1

Las imágenes mostradas en los elementos del botón de la barra se 'derivan' de la imagen de origen (solo utiliza los valores del canal alfa en el renderizado pero todo se ve bien en su imagen). Posiblemente no sea del tamaño correcto, es posible que deba abrir el archivo de imagen y recortarlo al tamaño correcto.

También puede intentar observar si el ajuste de la imageInsets propiedad (heredado por UIBarButtonItem de UIBarItem) se puede utilizar para ajustar el tamaño de una forma de detenerlo conseguir estiró.

Doco en las imágenes elemento de la barra dice lo siguiente:

Las imágenes que se muestran en la barra se derivan de esta imagen. Si esta imagen es demasiado grande para caber en la barra, se ajusta a escala. Por lo general, el tamaño de una barra de herramientas y la imagen de la barra de navegación es de 20 x 20 puntos.

Answer 2

La mejor manera de hacerlo es crear un botón, establecer su imagen de fondo y establecer su acción. Entonces se puede crear un UIBarButtonItem usando este botón como vista personalizada. Aquí está mi código de ejemplo:

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

Sé que esta pregunta ya tiene un mensaje de confirmación. Pero me encontré con esto hoy y pensé que ofrecería mi respuesta de todos modos. La respuesta a la marca de verificación de arriba me ayudó, pero también me llevó un poco de experimentación para descubrir lo que realmente estaba sucediendo.

La imagen del botón se encoge solo en el eje xy no en y. esto es porque es demasiado alto para el botón y se encoge para ajustarse. Pero no lo reduce proporcionalmente. Solo en la vertical Entonces parece estirado. En realidad no está estirado, lo que implica una ampliación de la misma. En cambio, la altura se reduce. Conocer la diferencia, creo que es importante para entender por qué está sucediendo y cómo solucionarlo.

me hicieron lo mismo hizo el OP. Al pensar que estoy apoyando la retina, hice mi ícono 40x40. El mío era una marca de verificación verde con un canal alfa. Fue rellenado con píxeles en blanco para ser de 40x40. La aplicación se redimensionó para caber dentro de la altura disponible del botón. Pero el ancho se mantuvo igual. Entonces se convirtió en algo en el rango de 40x30 o 40x20. Creo que el botón puede manejar un icono de 30 de alto, pero luego es un poco demasiado grande para la caja en mi humilde opinión.

El OP redujo el botón a 30x30 y eso hizo que no se aplastara más. Pero esa no es la mejor solución. Porque no es realmente un botón de retina cuando haces eso. Se encoge y luego se infla en la retina.

La respuesta correcta es nombrar su versión de 40 píxeles de altura con el @ 2x y luego hacer una versión de la mitad del tamaño (20 píxeles de alto) y guardarla sin el @ 2x.El ancho puede ser lo que sea. A continuación, cargue con imageNamed: sin especificar @ 2x. Utilizará el png apropiado para un dispositivo retina o no retina.

Lo siguiente que me sucedió fue que el marco del botón era demasiado pequeño. Así que aumenté el tamaño de mi lienzo en psd para rellenar el png a 80 de ancho para hacer que el botón sea ligeramente más ancho y más taptable.

Answer 4

Tengo el mismo extendió tema de la imagen de mi 40x40 para cuando me puse la imagen de fondo para leftBarButtonItem

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

self.navigationItem.leftBarButtonItem = backButton; 

Pero mi problema tengo resolvieron con el código

siguiente

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

self.navigationItem.leftBarButtonItem = backButton; 

y el mismo resultado si UIBarButtonItemStyleBordered se utiliza.

Answer 5

Para aquellos que se han encontrado específicamente con este problema de la barra de herramientas en iOS 11, parece que ahora se requiere la versión @ 2x de su imagen para representar su marco y/o límites.

Así que si usted tiene un código como éste en el que está una imagen personalizada UIBarButtonItem añadiendo así:

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

, entonces tendrá que tener un tags@2x.png que es 80x80, incluso si sus etiquetas. la imagen png es 80x80. Simplemente cambiar el nombre de tags.png a tags@2x.png cambiaría el tamaño de la imagen a 40x40 como lo hizo antes de iOS 11 sin cambiar el código, o simplemente agregar tags@2x.png a su proyecto.

Answer 6

Establecer el tamaño de imagen correcto: @ 1x = 22px, @ 2x = 44px @ 3x = 88px en primer lugar.

Entonces

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

o

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