Resolução de imagem para o novo iPhone 6 e 6+, com suporte a 3x adicionado?


141

Analisei alguns artigos e discussões, como um aqui e aqui, sobre as resoluções de imagem que os novos iPhones usarão em imagens 3x para exibição. É verdade?

Então, isso significa que teremos que manter três imagens? Digamos, por exemplo, que eu tenho uma imagem de 50 x 50, terei que manter três imagens para otimizar a aparência de novos iPhones?

  • Normal (50 x 50)
  • @ 2x - Retina (100 x 100)
  • @ 3x - Retina HD (150 x 150)

Ou os novos telefones usarão apenas imagens @ 2x e não há nada como @ 3x?

Eu testei fazendo um projeto de amostra e todos os simuladores parecem usar imagens @ 3x, isso é confuso.

Editar

Aqui estão mais algumas informações

  • 3GS (163 ppi, use Normal)
  • 4, 4s, 5 e 5s (326 ppi, então usamos @ 2x)
  • 6 (326 ppi, parece que ele usará @ 2x)
  • 6 mais (401 ppi aqui reside a confusão)

Editar

Com base nas respostas dadas por Tsob e nitin, adicionei imagens @ 3x ao meu projeto.

Edição informativa

Vejo que poucos usuários estão confusos sobre o motivo pelo qual o iPhone 6 usa imagens @ 2x, mesmo com uma resolução mais alta, o motivo é

O iPhone 6 pode ter uma resolução diferente, mas tem a mesma densidade de por pixel de polegada (PPI)

  • A resolução diz respeito a um número absoluto de pixels.
  • A densidade (também conhecida como Pixels por polegada - PPI) refere-se a um número relativo de pixels por polegada, o mesmo no iPhone 6 e nos iPhones anteriores, mas diferente no iPhone 6 plus.

Confira mais sobre isso aqui neste tópico

Portanto, o iPhone 6 usa a imagem @ 2x igual aos iPhones 4, 5 e 5S, pois possui o mesmo PPI e o iPhone 6 plus usa @ 3x.


Então, o que o uso do Retina 4 2x, se nenhum dispositivo usá-lo?
Mrunal

1
Concordo que a densidade é a mesma para 4, 5 e 6 iPhones, mas como resolver um problema de resolução diferente? Portanto, é uma grande diferença 640x960 e 750 × 1334 pixels. Se eu precisar usar uma imagem de plano de fundo que sobreponha a tela inteira. Como posso definir xcassets de imagem neste caso?
Matrosov Alexander 03/02

@MatrosovAlexander como você resolveu isso?
Mário Carvalho

como resolver imagem iphone 6 I utilizado para @ 2x imagem bem mas é starnge que xcode não tem imagem apropriada para ele
Matrosov Alexander

Respostas:


54

Tentei em um projeto de amostra usar imagens padrão, @ 2x e @ 3x, e o simulador do iPhone 6+ usa a imagem @ 3x. Portanto, parece que há @ 3x imagens para ser feito (se o simulador realmente replica o comportamento do dispositivo). Mas o estranho é que todos os dispositivos (simuladores) parecem usar essa imagem @ 3x quando estão na estrutura do projeto, o iPhone 4S / iPhone 5 também.
A falta de comunicação da Apple em uma estrutura potencial de 3x, enquanto eles pedem que os desenvolvedores publiquem seus aplicativos iOS8 é bastante confusa, especialmente ao ver esses resultados no simulador.

** Editar no site da Apple **: também foi encontrado na seção "O que há de novo no iOS 8" no espaço de desenvolvedor da Apple:

Suporte para uma nova escala de tela O iPhone 6 Plus usa uma nova tela Retina HD com uma escala de tela de 3,0. Para fornecer a melhor experiência possível nesses dispositivos, inclua novos trabalhos artísticos projetados para esta escala de tela. No Xcode 6, os catálogos de ativos podem incluir imagens nos tamanhos 1x, 2x e 3x; basta adicionar os novos ativos de imagem e o iOS escolherá os ativos corretos ao executar no iPhone 6 Plus. O comportamento de carregamento de imagem no iOS também reconhece um sufixo @ 3x.

Ainda não entendo por que todos os dispositivos parecem carregar o @ 3x. Talvez seja porque eu estou usando arquivos regulares e não xcassets? Vai tentar em breve.

Editar após mais testes: Ok, parece que o iOS8 fala sobre isso. Ao testar em um simulador do iPhone 5 do iOS 7.1, ele usa corretamente a imagem @ 2x. Mas, ao lançar o mesmo no iOS 8, ele usa o @ 3x no iPhone 5. No entanto, não tenho certeza se esse é um comportamento desejado ou um erro / bug no iOS8 GM ou simuladores no Xcode 6.


2
Sim, eu testado com simulador, todos os dispositivos tomar @ 3x imagens, confundindo fato
Bhumit Mehta

Então, em conclusão, até hoje o melhor caminho possível seria utilizar "@ 2x" nos nomes das imagens, mas, de alguma forma, verificar o dispositivo 6 Plus e usar uma imagem 3x SEM o "@ 3x" para não envenenar os dispositivos 2x?
darkheartfelt

Parece que a opção 3x no iPhone 6 só acontece se o ativo em questão for JPG em vez de PNG.
Emreberge

102

ATUALIZAR:

Novo link para o tamanho da imagem dos ícones da apple.

https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/

insira a descrição da imagem aqui


Sim, é verdade, aqui está a Apple fornece documentação oficial sobre o tamanho do ícone ou da imagem

insira a descrição da imagem aqui

você precisa definir imagens para iPhone6 ​​e iPhone6 ​​+

Para o iPhone 6:

750 x 1334 (@2x) for portrait

1334 x 750 (@2x) for landscape

Para o iPhone 6 Plus:

1242 x 2208 (@3x) for portrait

2208 x 1242 (@3x) for landscape

Para obter mais informações sobre imagens e resolução, este é o melhor post útil.

Para definir o tamanho das imagens para os controles, você pode definir 1x @ 2x e @ 3x da seguinte maneira:

insira a descrição da imagem aqui


8
se todos os dispositivos são retina 2x ou 3x, por que o catálogo de ativos solicita imagens 1x em projetos de segmentação para iPhone apenas no iOS 7/8? Não faz sentido.
Duck

1
Pode ser que para iphone4 @RubberDuck :) ver que iPad 2 e iPad Mini essa necessidade 1x
Nitin Gohel

desculpe, mas você não leu o que eu escrevi. Estou falando de um projeto exclusivo do iPhone para iOS 7. Não há iphone com 1x que possa executar o iOS 7, mas o catálogo de ativos ainda o solicita.
Duck

@RubberDuck Selecione seu ativo de imagem e, em seguida, visualize o painel de utilitários no lado direito do Xcode. Uma das guias possui um conjunto de caixas de seleção. Talvez seus recursos tenham muitas caixas de seleção selecionadas, resultando no 1x sendo exibido como uma opção.
Rdddy


10

Eu testei fazendo um projeto de amostra e todos os simuladores parecem usar imagens @ 3x, isso é confuso.

Crie versões diferentes de uma imagem em seu catálogo de ativos, para que a própria imagem informe qual versão é:

insira a descrição da imagem aqui

Agora execute o aplicativo em cada simulador por vez. Você verá que a imagem 3x é usada apenas no iPhone 6 Plus.

A mesma coisa acontece se as imagens são desenhadas a partir do aplicativo pacote usando seus nomes (por exemplo one.png , one@2x.png e one@3x.png ) chamando imageNamed:e atribuindo a uma visualização da imagem.

(No entanto, há uma diferença se você atribuir a imagem a uma visualização de imagem no Interface Builder - a versão 2x é ignorada em dispositivos de dupla resolução. Isso é presumivelmente um bug, aparentemente um bug pathForResource:ofType:.)


1
Você marcou o ativo como "universal" e, por isso, vê um comportamento consistente. Tente selecionar "dispositivo específico" no menu suspenso!
Nikolay Spassov

1
@RalphZhouYuan Agora funciona bem para mim. Você não verá a versão 2x listada , mas apenas atribua a versão 1x e a versão 2x ou 3x será usada corretamente. Ou, apenas use um catálogo de ativos.
mate

1
@RalphZhouYuan Aqui está o meu exemplo para download: github.com/mattneub/Programming-iOS-Book-Examples/tree/master/… - ele exibe os arquivos de imagem usando o pacote de aplicativos e os arquivos de imagem no catálogo de ativos e todos eles funcionam corretamente.
9185 matt-

3
@matt Finalmente, acho que meu problema está relacionado às configurações de destino de implantação (que é 6.0) do meu aplicativo. Abri uma pergunta: stackoverflow.com/questions/26333278/… e disparei um relatório de bug para a Apple.
inexcii 13/10/14

1
@RalphZhouYuan Uau, ótimo trabalho de detetive rastreando isso! Obrigado por relatar.
Matt

2

O ios sempre tenta obter a melhor imagem, mas recorre a outras opções. Portanto, se você tiver apenas imagens normais no aplicativo e precisar de imagens @ 2x, utilizará as imagens normais.

se você colocar apenas 2x no projeto e abrir o aplicativo em um dispositivo normal, as imagens serão redimensionadas para serem exibidas.

se você segmentar dispositivos ios7 e ios8 e desejar a melhor qualidade, precisará de @ 2x e @ 3x para recursos de telefone e normal e @ 2x para recursos de ipad, já que não há telefone sem retina e ipad @ 3x.

talvez seja melhor criar os ativos no aplicativo a partir de gráficos vetoriais ... verifique http://mattgemmell.com/using-pdf-images-in-ios-apps/


basta usar o incrível PaintCode para vetores em aplicativos
Fattie
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.