Qual deve ser o tamanho das imagens TabBar?

Tenho ícones para um tabBar de tamanho 100.

Eu verifiquei nas Diretrizes de Interface Humana da Apple de 2013 e diz que o tamanho da imagem deve ser 30x30/ 60x60.

Mas como a altura do controlador da barra de guias é 50, mantive o tamanho da imagem em 50x50.

Agora, quando executo o projeto, vejo o design feio abaixo:

Alguma ideia do tamanho das imagens que devo usar para que o design fique perfeito?

Nota: também não estou escrevendo texto (por exemplo, Home, Search, etc). O texto do botão guia está na própria imagem.

30x30 são pontos, o que significa 30px @ 1x, 60px @ 2x, e não um ponto intermediário. Além disso, não é uma boa ideia incorporar o título da guia à imagem - você terá resultados muito ruins de acessibilidade e localização como esse.

De acordo com as diretrizes de interface humana da Apple :

@ 1x: cerca de 25 x 25 (máx .: 48 x 32)

@ 2x: cerca de 50 x 50 (máx .: 96 x 64)

@ 3x: cerca de 75 x 75 (máx .: 144 x 96)

De acordo com as últimas Diretrizes de interface humana da Apple:

Na orientação retrato, os ícones da barra de guias aparecem acima dos títulos das guias. Na orientação paisagem, os ícones e títulos aparecem lado a lado. Dependendo do dispositivo e da orientação, o sistema exibe uma barra de guias regular ou compacta. Seu aplicativo deve incluir ícones de barra de guias personalizados para ambos os tamanhos.

Eu sugiro que você use o link acima para entender o conceito completo. Porque a apple atualiza seu documento em intervalos regulares

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

Portanto, o tamanho 50x50 é uma boa escolha.

De acordo com minha prática, eu uso 40 x 40 para ícone de item da barra de guias padrão do iPad e 80 x 80 para retina.

Da referência da Apple. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Se você deseja criar um ícone de barra que pareça relacionado à família de ícones do iOS 7, use um traço bem fino para desenhá-lo. Especificamente, um traço de 2 pixels (alta resolução) funciona bem para ícones detalhados e um traço de 3 pixels funciona bem para ícones menos detalhados.

Independentemente do estilo visual do ícone, crie uma barra de ferramentas ou ícone da barra de navegação nos seguintes tamanhos:

Cerca de 44 x 44 pixels Cerca de 22 x 22 pixels (resolução padrão) Independentemente do estilo visual do ícone, crie um ícone de barra de guias nos seguintes tamanhos:

Cerca de 50 x 50 pixels (máximo de 96 x 64 pixels) Cerca de 25 x 25 pixels (máximo de 48 x 32 pixels) para resolução padrão

Perfeito antes de usar códigos, por favor !!! Crie uma imagem que cubra totalmente o item da barra de guias para cada item. Isso é necessário para usar a imagem que você criou como um botão de item da barra de guias. Certifique-se de que a relação altura / largura também seja a mesma para cada item da barra de guias. Então:

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