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.

— Epsilon Prime
fonte

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:

E aqui 25px-50px-75px:

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