Estoy recibiendo algún comportamiento extraño con mi costumbre de la barra de pestañas. Las imágenes parecen estar alineados incorrectamente. Aquí está una captura de pantalla (me han quitado mi propia ficha de la barra de fondo para resaltar mi problema):

iOS 5 ficha personalizada de la barra de alineación vertical de la imagen

Este es el código que estoy usando para establecer las imágenes de cada estado:

self.tabBarController = [[[UITabBarController alloc] init] autorelease];
self.tabBarController.viewControllers = [NSArray arrayWithObjects:homeNavController, whatsOnNavController, mapNavController, infoNavController, nil];
self.tabBarController.delegate = self;

//For iOS 5 only - custom tabs
if ([self.tabBarController.tabBar respondsToSelector:@selector(selectedImageTintColor)]) 
{

    //Set the background images
    //[[UITabBar appearance] setBackgroundImage: [UIImage imageNamed:@"nav_bg.png"]];
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"nav_over.png"]];

    [homeNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_home_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_home"]];
    [whatsOnNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_whats_on_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_whats_on"]];
    [mapNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_map_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_map"]];
    [infoNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_info_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_info"]];

}

Todos los de mi reemplazo de la ficha imágenes son del tamaño correcto (49 píxeles de alto y 80 píxeles de ancho para la no-retina versiones).

Lo que podría ser la causa de este extraño comportamiento?

— Actualización —

Aquí es una actualización de la captura de pantalla con el fondo en lugar de:

iOS 5 ficha personalizada de la barra de alineación vertical de la imagen

InformationsquelleAutor boz | 2012-05-10

6 Comentarios

  1. 66

    Hay una propiedad en UIBarItem (UIBarButton elemento hereda de esta clase) imageInsets.

    Para el uso completo de la altura de imágenes (49px) para finishedSelectedImage y finishedUnselectedImage que usted necesita para establecer estas imágenes márgenes:


    tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);

    • Esto funcionó para mí, pero sólo para los no seleccionados imágenes. Las imágenes seleccionadas tienen una línea negra en la parte superior! Alguna idea de alguien pls?
    • Trabajó como un encanto. A pesar de 5,0,-5,0 parecía más centro alineados.
    • Todavía puedo toque en ese espacio extra que se encuentra debajo de la imagen del mapa de la opción que se muestra en cuestión y también en el espacio por encima de la opción del mapa después de la configuración de los márgenes de la imagen. Por qué así?
    • El número mágico SEIS =)
    • Su respuesta me ayudó, +1 bro.
  2. 25

    Se puede solucionar este problema en el Storyboard ahora. Guión tamaño inspector de la imagen de margen de ajuste
    iOS 5 ficha personalizada de la barra de alineación vertical de la imagen

    Seleccione la Pestaña de la Barra de Elemento que desea ajustar, abra el Tamaño de Inspector, y ajustar la parte Superior y la parte Inferior de la Imagen Insertos. Necesita ajustar la misma cantidad o que se acaba de aplastar/estiramiento de la imagen (tan +5 en la parte Superior, y -5 en la parte Inferior)

  3. 3

    Esto puede parecer un poco hackish pero creo que es la única manera de lograr lo que usted desea: usted sólo tiene que utilizar la barra de pestañas terminado de imágenes que tienen un transparente de 11 pixels «top padding» (22 píxeles de la retina). Sus imágenes tendrán que ser 60px (120px) de alto.

    Mi aplicación ya está en la App Store utilizando esta técnica, por lo que debe ser seguro para usarlo.

    Espero que ayude!

    • Eso es muy inteligente – voy a probar esto en mi próxima aplicación. La aplicación estaba hablando en mi pregunta inicial ya está en vivo.
    • Sólo mantenga la adición extra de la parte superior transparente relleno en su tabBar imagen y debería centro de alinear.
  4. 3

    Esta API está muy mal documentada.

    Su finishedSelectedImage debe ser un icono ~30×30 px. Esto es sólo el icono de la parte de la ficha. Si crea un finishedSelectedImage que es demasiado alto, el sistema no se lo puso a la derecha en la parte inferior de la pantalla.

    Conceptualmente, se comienza con un ancho completo, 49px alta backgroundImage para la tabBar, agregar una sola ficha de ancho, 49px alta selectionIndicatorImage que funciona como la imagen de fondo de la ficha seleccionada, a continuación, añadir dos versiones de cada ficha del icono ~30×30 px, finishedUnselectedImage y finishedSelectedImage.

  5. 2

    Resulta que siempre debe tener el texto dentro de un tabitem. El espacio fue creado por el texto en blanco.

    • Puede usted por favor aclarar a qué te refieres por «usted siempre debe tener el texto dentro de un tabitem»? A partir de la imagen de arriba, parece que ya había texto en tabBarItem.título
    • Ese texto fue parte de la imagen de modo que traté de hacer que el título sólo una cadena vacía.
    • Si el texto se dibuja como parte de su imagen y no quieres tener más texto en la parte superior de la misma, acaba de establecer una cadena con un espacio interior: @» «, que va a hacer el truco, porque no es una cadena vacía y no se mostrará.
  6. -1

    Si usted agregue la imagen como una subvista lugar con tramas definidas, puede ayudarle.
    Marque esta

    Trate de usar ligeramente más pequeñas imágenes, tabbar se coloca ligeramente

    • Lo siento, pero no veo la manera de que me pudiera ayudar – sólo estoy orientación de iOS 5.x aquí.

Dejar respuesta

Please enter your comment!
Please enter your name here