Qual deve ser o tamanho da imagem UIBarButtonItem?

130

Estou procurando criar meus próprios botões personalizados de Classificar por Data e Classificar por Número que pretendo colocar na barra de navegação como o botão direito.

Qual deve ser o tamanho da minha imagem para preencher adequadamente o espaço - a página de documentação UIBarItem não lista nada sobre o tamanho que a imagem deve ter.

ios uikit uibarbuttonitem uibaritem Epsilon Prime
fonte

Respostas:

236

No iOS 11, as Diretrizes da interface humana sugerem que os glifos tenham cerca de 25 × 25 pontos nas barras de ferramentas e nas barras de navegação, até um máximo de cerca de 28 pontos. (E o HIG definitivamente deve estar nos seus favoritos, se você estiver trabalhando em aplicativos para iOS!)

Isso se traduziria em imagens de 25px quadrados para dispositivos mais antigos como iPad 2 / Mini, 50px quadrados para a maioria dos dispositivos atuais como iPhone 8 ou iPad e 75px quadrados para dispositivos Retina HD (iPhone 6/7/8 Plus ou iPhone X). Os catálogos de ativos ajudarão imensamente a manter os diferentes tamanhos de ativos organizados (e o Xcode pode até gerá-los a partir de fontes vetoriais atualmente).

Sixten Otto
fonte
1
Obrigado, exatamente o que eu precisava saber combinado com um ponteiro para um ótimo documento. Marcado como favorito.
Epsilon Prime
1
Desejo que o Mobile HIG tenha declarado algo mais útil do que "cerca de 20x20". Se você usar uma imagem de exatamente 20x20px, ela não mapeará 1: 1 e o botão não será quadrado.
Clafou
1
Clafou, você está falando de uma imagem para o conteúdo do botão (como essa pergunta é) ou para ser usada como plano de fundo do botão (com a API de personalização de aparência)? Você postou uma pergunta sobre isso?
Sixten Otto
Você pode ver alguns dos vários tamanhos Apple usa, olhando para as imagens a Apple tem aqui: developer.apple.com/library/ios/#documentation/uikit/reference/...
JasonZ
1
Para iOS 7, consulte a resposta de @ hashier.
Rudolf Adamkovič
46

As Diretrizes da interface humana informam isso desde o iOS7:

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)

Aqui está uma ótima matriz de todos os tamanhos necessários para recursos para todas as plataformas

hashier
fonte
19

Sim, a Apple sugere o uso de imagens nos tamanhos 22px, 44px e 66px UIBarButtonItems, mas se você usar ícones pré-instalados, como o ícone Favorito, ele será dimensionado em 25px 50px e 75px para 1x, 2x e 3x, respectivamente.

Aqui estão 2 ícones UIToolbar. À direita está o ícone de marcador do sistema da Apple e à esquerda meu ícone personalizado.

Aqui, meu ícone personalizado mede 22px-44px-66px:

insira a descrição da imagem aqui

E aqui 25px-50px-75px:

insira a descrição da imagem aqui

Portanto, se você usar ícones personalizados e do sistema em uma barra de ferramentas, sugiro usar a escala 25px-50px-75px, ou seus ícones personalizados serão menores. Na verdade, eu sempre uso a escala 25px-50px-75px, fica melhor nas barras de ferramentas, quanto a mim.

Peter Tretyakov
fonte
1
Obrigado por isso! Eu tinha certeza que alguns dos ícones como os marcadores um são um pouco maiores do que o tamanho 22-44-66px
tech4242
1
Eu tentei 25px-50px-75px e está realmente bonito. nem pequeno nem grande.
MBH
-4

Fácil: inclua suas imagens em Assets.xcassets.

Quão?

  • Clique em Assets.xcassets
  • Clique no ícone Clic + e clique em "Novo conjunto de imagens"
  • Arraste e solte sua imagem no slot 3x
  • Renomeie o conjunto de imagens
  • No BarButton, você pode usar esse nome no campo "Imagem"
jobima
fonte
3
Como isso responde à pergunta sobre tamanho?
Andrea Lazzarotto
@AndreaLazzarotto bom ponto, mas essa resposta inclui informações importantes deixados de fora das outras respostas
paul