Che dimensioni devono avere le immagini TabBar?

Ho icone per una tabBar di dimensione 100.

Ho controllato le linee guida sull'interfaccia umana di Apple del 2013 e dice che la dimensione dell'immagine dovrebbe essere 30x30/ 60x60.

Ma poiché l'altezza del controller della barra delle schede è 50, ho mantenuto le dimensioni dell'immagine a 50x50.

Ora, quando eseguo il progetto, vedo il brutto design di seguito:

Qualche idea di quale dimensione delle immagini dovrei usare in modo che il design sia perfetto?

Nota: non sto scrivendo anche testo (ad esempio Home, Cerca, ecc.). Il testo del pulsante scheda è presente nell'immagine stessa.

30x30 sono punti, il che significa 30px @ 1x, 60px @ 2x, non una via di mezzo. Inoltre, non è una buona idea incorporare il titolo della scheda nell'immagine: avrai risultati di accessibilità e localizzazione piuttosto scadenti.

Secondo le linee guida per l'interfaccia umana di Apple :

@ 1x: circa 25 x 25 (max: 48 x 32)

@ 2x: circa 50 x 50 (max: 96 x 64)

@ 3x: circa 75 x 75 (max: 144 x 96)

Secondo le ultime linee guida per l'interfaccia umana di Apple:

Nell'orientamento verticale, le icone della barra delle schede vengono visualizzate sopra i titoli delle schede. Nell'orientamento orizzontale, le icone e i titoli vengono visualizzati fianco a fianco. A seconda del dispositivo e dell'orientamento, il sistema visualizza una barra delle schede normale o compatta. La tua app dovrebbe includere icone della barra delle schede personalizzate per entrambe le dimensioni.

Ti suggerisco di utilizzare il link sopra per comprendere il concetto completo. Perché Apple aggiorna il suo documento a intervalli regolari

Riferimento: https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/[https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons /] .

Quindi la dimensione 50x50 è una buona scelta.

Secondo la mia pratica, utilizzo il 40 x 40 per l'icona della barra delle schede dell'iPad standard, 80 X 80 per la retina.

Dal riferimento Apple. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Se vuoi creare un'icona a barra che sembri correlata alla famiglia di icone di iOS 7, usa un tratto molto sottile per disegnarla. In particolare, un tratto di 2 pixel (alta risoluzione) funziona bene per icone dettagliate e un tratto di 3 pixel funziona bene per icone meno dettagliate.

Indipendentemente dallo stile di visualizzazione dell'icona, crea un'icona della barra degli strumenti o della barra di navigazione nelle seguenti dimensioni:

Circa 44 x 44 pixel Circa 22 x 22 pixel (risoluzione standard) Indipendentemente dallo stile di visualizzazione dell'icona, creare un'icona della barra delle schede nelle seguenti dimensioni:

Circa 50 x 50 pixel (96 x 64 pixel massimo) Circa 25 x 25 pixel (48 x 32 pixel massimo) per la risoluzione standard

Pollice in alto prima di utilizzare i codici per favore !!! Crea un'immagine che copra completamente l'intero elemento della barra delle schede per ciascun elemento. Ciò è necessario per utilizzare l'immagine creata come pulsante di un elemento della barra delle schede. Assicurati di fare in modo che il rapporto altezza / larghezza sia lo stesso di ogni elemento della barra delle schede. Poi:

UITabBarController *tabBarController = (UITabBarController *)self;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

int x,y;

x = tabBar.frame.size.width/4 + 4; //when doing division, it may be rounded so that you need to add 1 to each item; 
y = tabBar.frame.size.height + 10; //the height return always shorter, this is compensated by added by 10; you can change the value if u like.

//because the whole tab bar item will be replaced by an image, u dont need title
tabBarItem1.title = @"";
tabBarItem2.title = @"";
tabBarItem3.title = @"";
tabBarItem4.title = @"";

[tabBarItem1 setFinishedSelectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-select.png"] scaledToSize:CGSizeMake(x, y)] withFinishedUnselectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-deselect.png"] scaledToSize:CGSizeMake(x, y)]];//do the same thing for the other 3 bar item