Qual deve ser o tamanho das imagens TabBar?

99

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:

insira a descrição da imagem aqui

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.

Fahim Parkar
fonte
1
"Tenho ícones para um tabBar de tamanho 100." Você quis dizer 50?
Blaszard

Respostas:

112

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.

Garrettmurray
fonte
3
Eu sabia disso, mas se quero formulações dentro da própria imagem, o que pode ser feito?
Fahim Parkar
Se você está planejando criar um UITabBar totalmente personalizado, você provavelmente deve fazer exatamente isso, em vez de usar imagens para a versão padrão do UIKit. Caso contrário, acredito que você ficará com um espaço morto no fundo.
garrettmurray
hmmm isso está acontecendo ... Vou pedir ao designer para fazer imagens padrão para a barra de guias do suporte da Apple ... obrigado
Fahim Parkar
Obrigado, cara. Esta foi uma grande e rápida ajuda.
Felipe
208

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)

rsc
fonte
Sim, está correto de acordo com a apple. Verifique o link abaixo para obter mais informações developer.apple.com/library/ios/documentation/UserExperience/…
Chamath Jeevan
legal, mas como é possível fazer uma imagem tão pequena sem desfocar?
niX de
2
Desde então, foi atualizado para 23x23 (para quadrados) ou 25x25 (para imagens circulares) ( developer.apple.com/ios/human-interface-guidelines/… )
Seop Yoon
Seop, você pode apenas atualizar minha resposta para refletir as informações mais recentes. Mas notei que eu disse "cerca de 25", então consideraria 23 como estando dentro dessa faixa.
rsc
Geralmente eu uso glifos quadrados como um ícone de casa, felizmente @SeopYoon apontou isso. Usarei 23x23 para o tamanho do ícone da barra de guias.
Cons Bulaquena
44

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.

insira a descrição da imagem aqui

insira a descrição da imagem aqui

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

Mihir Oza
fonte
2
Isso deve ser mais votado a favor, já que é a nova diretriz deles.
Seop Yoon
Para obter instruções sobre como definir um ícone diferente para uma barra de guia normal ou compacta, consulte esta resposta: stackoverflow.com/questions/49492229/tab-bar-icon-size/…
Marián Černý
2

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

firelyu
fonte
-3

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
James
fonte