2012-06-11 17 views
13

Estoy creando un UIBarButtonItem y agregarlo a mi barra de navegación de este modo:cambiar el ancho de un UIBarButtonItem en un UINavigationBar

(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 correcta cuando corro, pero se puede seleccionar el elemento de botón de la barra pulsando la barra de navegación va desde x = 0 hasta aproximadamente 100. ¿Cómo puedo ajustar el área seleccionable para que tenga un ancho de 30 px?

+2

Me temo que no creo que haya una manera de ajustar el área seleccionable. Sin embargo, una pregunta, ¿por qué quieres que el ancho sea de 30 px? La guía de interfaz humana de iOS indica que el tamaño mínimo cómodo de los elementos de UI tappables es de 44 x 44 puntos. http://developer.apple.com/library/ios/# documentation/UserExperience/Conceptual/MobileHIG/Characteristics/Characteristics.html –

+0

Hmm, ok gracias por el enlace a las pautas. Parece un poco extraño que el área seleccionable sea tan amplia. – Darren

+0

@AbdSaniAbdJalal ¿podemos cambiar el ancho de 'barbuttonitem' en el guión gráfico? – aircraft

Respuesta

12

Darren,

Un enfoque que podría considerar es la creación de un UIBarButtonItem llamando initWithCustomView. Esto no es ideal, ya que no obtienes estados "seleccionados" de la caja Y tienes que componer el fondo delimitado (si quieres ese aspecto) con la imagen de tu botón, pero con eso puedes especificar más directamente un marco para tu artículo de la barra de herramientas. Si está usando texto para su título en lugar de imágenes, es posible que aún necesite agregar una imagen de fondo como subvista. De todos modos, estoy teniendo el mismo problema en este momento 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 tamaño automático de las UIBarButtonItems añadido a navigationItem del UINavigationController .

[Editado]

O try Maggie's solution, which is more thorough than mine.

+2

solo funcionó cuando utilicé 'UIButton' como vista personalizada, y no' UIImageView' – Kreutzer

+1

esta solución no funcionará ya que no tiene acciones de botón en absoluto. Use 'UIButton' en su lugar. – Raptor

6

Puede hacerlo al dejar caer una imagen para el elemento de botón de la barra del constructor de interfaces y cambiar 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; 
5

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

El código es por tanto:

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

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

[myNavigationBar setNeedsLayout]; 

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

Lo siento, me acabo de dar cuenta de que mi código es casi idéntico a @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 referencia a Interface Bulder o imágenes específicamente.

+0

Tenía problemas con el tamaño de mi UIBarButtonItem personalizado, la solución llamaba '[self.navigationController.navigationBar setNeedsLayout];' en el método '- (void) viewDidLoad' de mi controlador de vista. – LunaCodeGirl

5

El siguiente enfoque funcionó, vea el código para cambiar el ancho y alto del botón y para agregar también elementos 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 la UIBarButtonItem no se aplica para ver la imagen

Cuestiones relacionadas