¿Mover la imagen de UITabBarItem hacia abajo?

98

Normalmente en cada pestaña de una UITabBartienes una pequeña imagen y un título que nombra la pestaña. La imagen está posicionada / centrada hacia la parte superior de la pestaña para acomodar el título debajo. Mi pregunta es: si desea tener una barra de pestañas con solo una imagen y sin título, ¿hay alguna manera de mover la imagen hacia abajo para que se centre mejor dentro de la pestaña?

Estoy usando (ver más abajo) actualmente:

[tabBarItem setFinishedSelectedImage:tabSelected withFinishedUnselectedImage:tabUnselected];

pero preferiría usar una imagen más grande sin título, en este momento, si hago la imagen más grande de aproximadamente 70 píxeles a 2x, comienza a salirse de la parte superior UITabBary deja mucho espacio sin usar en la parte inferior.

— cabra peluda
fuente

178

Intente ajustar tabBarItem's imageInsets(para mover la imagen del icono) y establezca el título del controlador en cero (para que no se muestre ningún título). Ponga algo como esto -inito -viewDidLoadmétodo en el controlador de vista:

C objetivo

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

Rápido

self.tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
self.title = nil

UITabBarItemes una subclase de la UIBarItemque tiene UIEdgeInsets imageInsetspropiedad. Juega un poco con las inserciones hasta que se vea bien (dependiendo de las imágenes del ícono de la barra de pestañas)

— Lukas Kukacka
fuente

3

@Lukas: pero esto encoge las imágenes.

— Sourabh Bhardwaj

1

@Sourabh no los encoge para mí

— TigerCoding

7

El valor real del recuadro es 5.5f si necesita que sea perfecto en píxeles.

— usuario

1

@ rr1g0 No es posible mover la insignia a la posición personalizada. Si necesita una posición personalizada de una insignia o una apariencia de insignia personalizada, debe implementarla usted mismo

— Lukas Kukacka

1

@Sourabh tienes que compensar la parte inferior con un valor negativo para no encoger la imagen.

— Rmalmoe

150

También puedes hacerlo a través del guión gráfico. Seleccione el elemento de la barra de pestañas, vaya al inspector de tamaño y asigne las inserciones adecuadas.

* Demostrado en Xcode, versión 7.3.1 (7D1014)

— Neil Galiaskarov
fuente

¡bonito y limpio!

— ken

Lo mejor de todas las respuestas ... Muchas gracias @Neil Galiaskarov

— Venkatesh Chejarla

49

Haga una subclase de UITabBarController, y en su viewDidLoad:

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.viewControllers enumerateObjectsUsingBlock:^(UIViewController *vc, NSUInteger idx, BOOL *stop) {
        vc.tabBarItem.title = nil;
        vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0);
    }];
}

Swift 3:

for vc in self.viewControllers! {
    vc.tabBarItem.title = nil
    vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}

— Brian
fuente

esto funcionó para mí. solo que para rápido, el método enumerateObjectsUsingBlock ya no está disponible

— Junchao Gu

no subclase, en su lugar ponga esto en su AppDelegate

— Laszlo

1

poner este fragmento AppDelegatetambién funciona, pero obviamente no es mejor que subclasificarlo. Sin embargo, puede tener sus propias preferencias :)

— Brian

10

Si está usando Xamarin, esto funciona:

screen.TabBarItem.ImageInsets = new UIEdgeInsets(5, 0, -5, 0);
screen.TabBarItem.Title = "";

— Jelle
fuente

10

Esto funcionó para mi

Rápido 4

let array = tabBarController?.customizableViewControllers
for controller in array! {
    controller.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}

— Alfi
fuente

2

SWIFT 3.0

Puede configurar las imágenes, configurar la parte superior, izquierda, inferior y derecha según el diseño.

self.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: 0, right: 0)

— krish
fuente

2

Para iOS 11, debe anular el método TraitCollection además de configurar ImageInsets. Agregue el método en su clase UITabBarController subclasificada

public override UITraitCollection TraitCollection {
 get {
  return UITraitCollection.FromHorizontalSizeClass(horizontalSizeClass: UIUserInterfaceSizeClass.Compact);
 }
}

— Prashant
fuente

Buen consejo que me ayudó a resolver un problema relacionado con la posición de la imagen para el elemento de la barra de pestañas en iPad e iOS 11. Pero es demasiado duro anular la colección de rasgos en el nivel del controlador de vista, es mejor subclasificar la clase UITabBar y anular la propiedad traitCollection ahí. También al devolver una colección de rasgos con solo la clase horizontal, se eliminarán otras propiedades de la colección de rasgos. return UITraitCollection(traitsFrom: [ super.traitCollection, UITraitCollection(horizontalSizeClass: .compact)])hizo el truco para mí.

— Emmanuel Paris

1

En Swift 4.2 , UIEdgeInsetsMakeestá depurado, en su lugar deberíamos usar UIEdgeInsets,

let array = tabBarController?.customizableViewControllers
    for controller in array! {
        controller.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: -5, right: 0)
    }

— Bappaditya
fuente