ios - bar - navigation controller

Cambiar el ancho de un UIBarButtonItem en un UINavigationBar

Question

Estoy creando un UIBarButtonItem y lo estoy agregando a mi barra de navegación de la siguiente manera:

(void)viewDidLoad { 

   ...

   // Add the refresh button to the navigation bar
   UIButton *refreshButton = [UIButton buttonWithType:UIButtonTypeCustom];
   [refreshButton setFrame:CGRectMake(0,0,30,30)];
   [refreshButton setImage:[UIImage imageNamed:@"G_refresh_icon.png"] forState:UIControlStateNormal];
   [refreshButton addTarget:self action:@selector(refreshData) forControlEvents:UIControlEventTouchUpInside];
   UIBarButtonItem *refreshBarButton = [[[UIBarButtonItem alloc] initWithCustomView:refreshButton] autorelease];
   self.navigationItem.leftBarButtonItem = refreshBarButton;
}

Parece correcto cuando corro, pero puedo seleccionar el elemento del botón de la barra tocando la barra de navegación en cualquier lugar desde x = 0 hasta aproximadamente 100. ¿Cómo puedo ajustar el área seleccionable para tener un ancho de 30 px?

Answer 1

Desde iOS 11, el solo ajuste de marco para customView y no UIBarButtonItem no funcionará (como se sugiere en la respuesta aceptada ). Parece que agregar Autolayout a UIBarButtonItem reemplaza el marco establecido. Este post me dio la idea:

navigationItem.leftBarButtonItem?.customView = yourCustomButtonView
let desiredWidth = 35.0
let desiredHeight = 35.0

let widthConstraint = NSLayoutConstraint(item: yourCustomButtonView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: desiredWidth)
let heightConstraint = NSLayoutConstraint(item: yourCustomButtonView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: desiredHeight)

yourCustomButtonView.addConstraints([widthConstraint, heightConstraint])

También tenga en cuenta que es preferible que use UIButton como su CustomView ya que tiene que confiar en él para desencadenar la acción.

Answer 2

El siguiente enfoque funcionó, vea el código para cambiar el ancho y el alto del botón y también para agregar un elemento de acción.

UIButton *imageButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 22, 22)];
[imageButton setBackgroundImage:[UIImage imageNamed:@"message_button"] forState:UIControlStateNormal];
[imageButton addTarget:self action:@selector(messageButtonTapped) forControlEvents:UIControlEventAllEvents];
UIBarButtonItem *leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:imageButton];
self.navigationItem.leftBarButtonItem = leftBarButtonItem;

Nota: el objetivo y la acción de UIBarButtonItem no se aplican a la vista de imagen

Answer 3

La clave con esto es darse cuenta de que está cambiando el ancho de la vista personalizada, en lugar del propio UIBarButton .

El código es por lo tanto:

CGRect resizedFrame = myBarButtonItem.customView.frame;
resizedFrame.size.width = myNewWidth;
myBarButtonItem.customView.frame = resizedFrame;

También deberá activar el cambio de diseño:

[myNavigationBar setNeedsLayout];

Todo esto no hace falta decir que el diseño se está haciendo con el tamaño automático y los marcos. Las incursiones en las barras de navegación con Auto Layout no tuvieron éxito. Ver mi pregunta Auto Layout con UINavigationBar y UIBarButtonItem .

Lo siento, me di cuenta de que mi código es casi idéntico al de @oscartzombie. ¡No intencional! Dejaré esta respuesta ya que creo que vale la pena agregar el diseño y otros puntos, además de explicar sin hacer referencia a la Interfaz Bulder o las imágenes específicamente.

Answer 4

Ninguna de esas soluciones funcionó para mí y descubro que el cambio de tamaño automático reemplaza las dimensiones que usted escribió en el código.

Después de crear el botón por medio de UIButton, escriba el siguiente bloque de código:

[self.navigationItem.rightBarButtonItem.customView.widthAnchor constraintEqualToConstant:mWidth].active = YES;
[self.navigationItem.rightBarButtonItem.customView.heightAnchor constraintEqualToConstant:mHeight].active = YES;

Answer 5

Puede hacerlo colocando una imagen en el elemento del botón de la barra desde el creador de la interfaz y cambiando el ancho de la vista personalizada con este código:

CGRect frame = self.navigationItem.leftBarButtonItem.customView.frame;
frame.size.width = 141;
self.navigationItem.leftBarButtonItem.customView.frame = frame;

Answer 6

Un enfoque que podría considerar es crear un UIBarButtonItem llamando a initWithCustomView: Esto no es ideal porque no obtiene estados "seleccionados" fuera del cuadro Y tiene que componer su fondo delimitado (si lo desea) con la imagen de su botón, pero con eso puede especificar más directamente un marco para su elemento de la barra de herramientas Si está utilizando texto para su título en lugar de imágenes, es posible que aún necesite agregar una imagen de fondo como una subvista. De todos modos, estoy teniendo el mismo problema ahora y este código funciona para mí:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"button-image.png"]];
imageView.frame = CGRectMake(0, 0, 43, 30);

UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:imageView];

self.navigationItem.leftBarButtonItem = barButtonItem;

En este momento, esta es la única forma que conozco de restringir el auto-dimensionamiento del UIBarButtonItem s agregado al UINavigationController ''s navigationItem .

O prueba la solución de Maggie, que es más completa que la mía .