Como desenvolver ou migrar aplicativos para a resolução de tela do iPhone 5?

O novo monitor do iPhone 5 tem uma nova proporção e uma nova resolução (640 x 1136 pixels).

O que é necessário para desenvolver aplicativos novos ou de transição já existentes para o novo tamanho da tela?

O que devemos ter em mente para tornar os aplicativos "universais" para os monitores mais antigos e a nova proporção de tela widescreen?

1. Baixe e instale a versão mais recente do Xcode .
2. Defina um arquivo de tela de inicialização para o seu aplicativo (na guia geral das configurações de destino). É assim que você usa o tamanho máximo de qualquer tela, incluindo os tamanhos de exibição dividida do iPad no iOS 9.
3. Teste seu aplicativo e espere não fazer mais nada, pois tudo deve funcionar magicamente se você tiver definido as máscaras de redimensionamento automático corretamente ou usado o Layout automático.
4. Caso contrário, ajuste seus layouts de visualização, de preferência com o Layout automático.
5. Se houver algo que você precise fazer especificamente para as telas maiores, será necessário verificar a altura, [[UIScreen mainScreen] bounds]pois parece não haver uma API específica para isso. No iOS 8, também existem classes de tamanho que abstraem os tamanhos de tela em regulares ou compactos vertical e horizontalmente e são uma maneira recomendada de adaptar sua interface do usuário.

Se você tiver um aplicativo criado para o iPhone 4S ou anterior, ele será executado em caixa de correio no iPhone 5.

Para adaptar seu aplicativo à nova tela mais alta, a primeira coisa a fazer é alterar a imagem de inicialização para: [email protected]. Seu tamanho deve ser 1136x640 (HxW). Sim, ter a imagem padrão no novo tamanho da tela é a chave para permitir que seu aplicativo ocupe toda a nova tela do iPhone 5 .

(Observe que a convenção de nomenclatura funciona apenas para a imagem padrão. Nomear outra imagem "[email protected]" não fará com que ela seja carregada no lugar de "[email protected]". Se você precisar carregar imagens diferentes para diferentes tamanhos de tela, você precisará fazer isso de forma programática.)

Se você tiver muita sorte, pode ser ... mas com toda a probabilidade, você terá que dar mais alguns passos.

• Verifique se o Xibs / Views usa o layout automático para se redimensionar.
• Use molas e suportes para redimensionar vistas.
• Se isso não for bom o suficiente para o seu aplicativo, crie seu xib / storyboard para um tamanho de tela específico e reposicione-o programaticamente para o outro.

No caso extremo (quando nenhuma das opções acima for suficiente), projete os dois Xibs e carregue o apropriado no controlador de exibição.

Para detectar o tamanho da tela:

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
{
    CGSize result = [[UIScreen mainScreen] bounds].size;
    if(result.height == 480)
    {
        // iPhone Classic
    }
    if(result.height == 568)
    {
        // iPhone 5
    }
}

A única coisa realmente necessária é adicionar uma imagem de inicialização denominada "[email protected]" aos recursos do aplicativo e, em geral, se você tiver sorte, o aplicativo funcionará corretamente.

Caso o aplicativo não lide com eventos de toque, verifique se a janela principal tem o tamanho adequado. A solução alternativa é definir o quadro apropriado:

[window setFrame:[[UIScreen mainScreen] bounds]]

Há outros problemas não relacionados ao tamanho da tela ao migrar para o iOS 6. Leia as Notas da versão do iOS 6.0 para obter detalhes.

Às vezes (para aplicativos pré-storyboard), se o layout for suficientemente diferente, vale a pena especificar um xib diferente de acordo com o dispositivo (consulte esta pergunta - você precisará modificar o código para lidar com o iPhone 5) no viewController init, já que nenhuma quantidade de ajustes nas máscaras de redimensionamento automático funcionará se você precisar de gráficos diferentes.

-(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

    NSString *myNibName;
    if ([MyDeviceInfoUtility isiPhone5]) myNibName = @"MyNibIP5";
    else myNibName = @"MyNib";

    if ((self = [super initWithNibName:myNibName bundle:nibBundleOrNil])) {


...

Isso é útil para aplicativos direcionados para versões mais antigas do iOS.

Aqui você encontra um bom tutorial (para o MonoTouch, mas também pode usar as informações para projetos que não são do MonoTouch):
http://redth.info/get-your-monotouch-apps-ready-for-iphone-5 -ios-6-hoje /

1. Crie uma nova imagem para a tela inicial / inicial ( 640 x 1136 pixels ) com o nome " [email protected] "

2. No simulador do iOS , vá para o menu Hardware -> Dispositivo e selecione " iPhone (Retina de 4 polegadas) "

3. Crie outras imagens, por exemplo, imagens de fundo

4. Detecte o iPhone 5 para carregar suas novas imagens:

public static bool IsTall
{
    get {
        return UIDevice.currentDevice.userInterfaceIdiom
                    == UIUserInterfaceIdiomPhone
                && UIScreen.mainScreen.bounds.size.height
                    * UIScreen.mainScreen.scale >= 1136;
    }
}

private static string tallMagic = "-568h@2x";
public static UIImage FromBundle16x9(string path)
{
    //adopt the -568h@2x naming convention
    if(IsTall())
    {
        var imagePath = Path.GetDirectoryName(path.ToString());
        var imageFile = Path.GetFileNameWithoutExtension(path.ToString());
        var imageExt = Path.GetExtension(path.ToString());
        imageFile = imageFile + tallMagic + imageExt;
        return UIImage.FromFile(Path.Combine(imagePath,imageFile));
    }
    else
    {
        return UIImage.FromBundle(path.ToString());
    }
}

É fácil migrar o iPhone5 e o iPhone4 através de XIBs .........

UIViewController *viewController3;
if ([[UIScreen mainScreen] bounds].size.height == 568)
{
    UIViewController *viewController3 = [[[mainscreenview alloc] initWithNibName:@"iphone5screen" bundle:nil] autorelease];               
}    
else
{
     UIViewController *viewController3 = [[[mainscreenview alloc] initWithNibName:@"iphone4screen" bundle:nil] autorelease];
}

Eu resolvo esse problema aqui . Basta adicionar ~ 568h @ 2x sufixo às imagens e ~ 568h aos xib's. Não é necessário mais verificações de tempo de execução ou alterações de código.

Eu adicionei a nova imagem de inicialização padrão e (ao verificar várias outras respostas do SE ...) verifiquei se meus storyboards se auto-dimensionavam e subvisitavam, mas a retina de 10 cm ainda estava em caixa de correio.

Percebi então que meu plista de informações tinha um item de linha para " Iniciar imagem " definido como " Default.png ", que eu removi e, portanto, o letterbox magicamente não apareceu mais. Felizmente, isso salva outra pessoa da mesma loucura que eu sofri.

Eu acho que não vai funcionar em todos os casos, mas no meu projeto em particular, ele me impediu de duplicar os arquivos NIB:

Em algum lugar em que common.hvocê pode fazer essas definições com base na altura da tela:

#define HEIGHT_IPHONE_5 568
#define IS_IPHONE   ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone)
#define IS_IPHONE_5 ([[UIScreen mainScreen] bounds ].size.height == HEIGHT_IPHONE_5)

No seu controlador base:

- (void)viewDidLoad
{
    [super viewDidLoad];
    if (IS_IPHONE_5) {
        CGRect r = self.view.frame;
        r.size.height = HEIGHT_IPHONE_5 - 20;
        self.view.frame = r;
    }
    // now the view is stretched properly and not pushed to the bottom
    // it is pushed to the top instead...

    // other code goes here...
}

Em um constants.harquivo, você pode adicionar estas instruções de definição:

 #define IS_IPAD UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad 
 #define IS_IPHONE UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone
 #define IS_WIDESCREEN (fabs((double)[[UIScreen mainScreen] bounds].size.height - (double)568) < DBL_EPSILON) 
 #define IS_IPHONE_5 (!IS_IPAD && IS_WIDESCREEN)

Para determinar se o seu aplicativo pode suportar o iPhone 5 Retina, use: Sim ou não)

Em um arquivo ".h" comum, adicione:

BOOL IS_IPHONE5_RETINA(void);

Em um arquivo ".m" comum, adicione:

BOOL IS_IPHONE5_RETINA(void) {
    BOOL isiPhone5Retina = NO;
    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
        if ([UIScreen mainScreen].scale == 2.0f) {
            CGSize result = [[UIScreen mainScreen] bounds].size;
            CGFloat scale = [UIScreen mainScreen].scale;
            result = CGSizeMake(result.width * scale, result.height * scale);

            if(result.height == 960){
                //NSLog(@"iPhone 4, 4s Retina Resolution");
            }
            if(result.height == 1136){
                //NSLog(@"iPhone 5 Resolution");
                isiPhone5Retina = YES;
            }
        } else {
            //NSLog(@"iPhone Standard Resolution");
        }
    }
    return isiPhone5Retina;
}

Primeiro crie dois xibs e anexe todos os delegados, classe principal ao xibe então você pode colocar nesta condição mencionada abaixo no seu appdelegate.marquivo em

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 

    if ([[UIScreen mainScreen] bounds].size.height == 568)
        {

        self.ViewController = [[ViewController alloc] initWithNibName:@"ViewControlleriphone5" bundle:nil];
        }

        else
        {
             self.ViewController = [[ViewController alloc] initWithNibName:@"ViewControlleriphone4" bundle:nil];

        }

você pode usá-lo em qualquer lugar do programa, dependendo de seus requisitos, mesmo em suas ViewControlleraulas. O que importa mais é que você criou dois xibarquivos separados paraiphone 4(320*480) and iphone 5(320*568)

Experimente o método abaixo em uma classe singleton:

-(NSString *)typeOfDevice
    {
        if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
        {
            CGSize result = [[UIScreen mainScreen] bounds].size;
            if(result.height == 480)
            {
                return @"Iphone";
            }
            if(result.height == 568)
            {
                return @"Iphone 5";
            }
        }
        else{
            return @"Ipad";;
        }


        return @"Iphone";
    }

Você pode usar o Auto Layoutrecurso e criar o design usando a resolução de tela do iPhone 5 e ele funcionará para os dispositivos de 4 "e 3,5", mas nesse caso, você deve ter um conhecimento suficiente do gerenciador de layout.

Verificando boundscom568 falhará no modo paisagem. O iPhone 5 é iniciado apenas no modo retrato, mas se você deseja oferecer suporte a rotações, a "verificação" do iPhone 5 também precisará lidar com esse cenário.

Aqui está uma macro que lida com o estado da orientação:

#define IS_IPHONE_5 (CGSizeEqualToSize([[UIScreen mainScreen] preferredMode].size, CGSizeMake(640, 1136)))

O uso da chamada 'selectedMode' é de outra postagem que li algumas horas atrás, por isso não tive essa ideia.

Primeiro mostre esta imagem. Nessa imagem, você mostra um aviso para o suporte ao Retina 4, então clique neste aviso e clique em adicionar para que a tela inicial do Retina 4 seja automaticamente adicionada ao seu projeto.

e depois de usar este código:

if([[UIScreen mainScreen] bounds].size.height == 568)
    {
        // For iphone 5
    }
    else
    {
        // For iphone 4 or less
    }

Eu nunca enfrentei um problema com qualquer dispositivo, pois tinha uma base de código para todos, sem valores codificados. O que faço é ter a imagem de tamanho máximo como recurso, em vez de uma para cada dispositivo. Por exemplo, eu teria um para exibição de retina e mostraria como o aspecto se encaixa, para que ele seja visto como em todos os dispositivos. Chegando a decidir o quadro do botão, por exemplo, em tempo de execução. Para isso, uso o valor% da visualização da patente, por exemplo, se quiser que a largura seja metade da visualização pai, pegue 50% da visualização pai e o mesmo se aplica à altura e ao centro.

Com isso, eu nem preciso dos xibs.

Você pode usar esta definição para calcular se você está usando o iPhone 5 com base no tamanho da tela:

#define IS_IPHONE_5 ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) < DBL_EPSILON )

então use uma ifdeclaração simples :

    if (IS_IPHONE_5) {

    // What ever changes
    }

Peter, você realmente deve dar uma olhada no Canappi, ele faz tudo isso para você, tudo o que você precisa fazer é especificar o layout da seguinte forma:

button mySubmitButton 'Sumbit' (100,100,100,30 + 0,88,0,0) { ... }

A partir daí, o Canappi irá gerar o código objetivo-c correto que detecta o dispositivo em que o aplicativo está sendo executado e usará:

(100,100,100,30) for iPhone4
(100,**188**,100,30) for iPhone 5

O Canappi funciona como o Interface Builder e o Story Board combinados, exceto que ele está em forma de texto. Se você já possui arquivos XIB, poderá convertê-los para não precisar recriar toda a interface do usuário a partir do zero.

Você pode verificar manualmente o tamanho da tela para determinar em qual dispositivo você está:

#define DEVICE_IS_IPHONE5 ([[UIScreen mainScreen] bounds].size.height == 568)

float height = DEVICE_IS_IPHONE5?568:480;
if (height == 568) {
    // 4"

} else {

    // 3"

}

Você pode adicionar este código:

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
        if ([[UIScreen mainScreen] respondsToSelector: @selector(scale)]) {
            CGSize result = [[UIScreen mainScreen] bounds].size;
            CGFloat scale = [UIScreen mainScreen].scale;
            result = CGSizeMake(result.width * scale, result.height * scale);

            if(result.height == 960) {
                NSLog(@"iPhone 4 Resolution");
            }
            if(result.height == 1136) {
              NSLog(@"iPhone 5 Resolution");
            }
        }
        else{
            NSLog(@"Standard Resolution");
        }
    }

Este é um código universal real, você pode criar três storyboards diferentes:

Defina o modo Universal do seu projeto e defina o iPhone principal da história com o storyboard iPhone5 e o ipad principal com o storyboard de destino do iPad, agora adicione um novo destino de storyboard para iphone e modifique a resolução para iphone 4s ou menos e agora implemente seu AppDelegate.m

iPhone4 / 4s (é o mesmo para 3 / 3Gs), um para iPhone5 e universalize o projeto , com um novo destino do Storyboard para iPad, agora no AppDelegate.m, abaixo de didFinishLaunchingadicionar este código:

    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
        UIStoryboard *storyBoard;

        CGSize result = [[UIScreen mainScreen] bounds].size;
        CGFloat scale = [UIScreen mainScreen].scale;
        result = CGSizeMake(result.width *scale, result.height *scale);

//----------------HERE WE SETUP FOR IPHONE4/4s/iPod----------------------

        if(result.height == 960){
            storyBoard = [UIStoryboard storyboardWithName:@"iPhone4_Storyboard" bundle:nil];
            UIViewController *initViewController = [storyBoard instantiateInitialViewController];
            [self.window setRootViewController:initViewController];
        }

//----------------HERE WE SETUP FOR IPHONE3/3s/iPod----------------------

        if(result.height == 480){
            storyBoard = [UIStoryboard storyboardWithName:@"iPhone4_Storyboard" bundle:nil];
            UIViewController *initViewController = [storyBoard instantiateInitialViewController];
            [self.window setRootViewController:initViewController];
        }
    }

        return YES;
 }

Então você criou um aplicativo Universal para iPhone 3 / 3Gs / 4 / 4s / 5 Todos os tipos de iPod e Todo o tipo de iPad

Lembre-se de integrar todo IMG com myImage.pnge[email protected]

De acordo comigo, a melhor maneira de lidar com esses problemas e evitar algumas condições necessárias para verificar a altura do dispositivo, é usar o quadro relativo para visualizações ou qualquer elemento da interface do usuário que você esteja adicionando à visualização, por exemplo: se você estiver adicionando algum elemento da interface do usuário que você deseja na parte inferior da vista ou logo acima da barra de guias, deve-se ter a origem y em relação à altura da vista ou em relação à barra de guias (se houver) e também temos propriedades de redimensionamento automático. Espero que isso funcione para você

Em vez de usar um conjunto de condicionais, você pode redimensionar sua exibição automaticamente usando o tamanho da tela.

int h = [[UIScreen mainScreen] bounds].size.height;
int w = [[UIScreen mainScreen] bounds].size.width;
self.imageView.frame = CGRectMake(20, 80, (h-200), (w-100));

No meu caso, quero uma visualização que preencha o espaço entre alguns campos de entrada na parte superior e alguns botões na parte inferior, de modo a fixar o canto superior esquerdo e o inferior direito variável com base no tamanho da tela. Meu aplicativo preenche a exibição da imagem com a foto tirada pela câmera, para que eu queira todo o espaço que puder.

Se você precisar converter um aplicativo já existente em universal, precisará selecionar o arquivo xib correspondente-> mostrar Utilitários-> Mostrar inspetor de tamanho.

No Inspetor de tamanho, você pode ver o dimensionamento automático, usando esta ferramenta, você pode converter para o aplicativo iOS existente.

Usando o xCode 5, selecione "Migrar para o catálogo de ativos" em Projeto> Geral.

Em seguida, use "Mostrar no localizador" para encontrar sua imagem de inicialização. Você pode editá-la como 640x1136 e arrastá-la para o catálogo de ativos, como mostra a imagem abaixo.

Verifique se as seções iOS7 e iOS6 R4 têm uma imagem de 640x1136. Na próxima vez que você iniciar o aplicativo, as barras pretas desaparecerão e o aplicativo usará a tela de 4 polegadas

Vale a pena notar - no novo Xcode, você precisa adicionar esse arquivo de imagem [email protected] aos ativos

Use o Auto Layout recurso para visualizações. Ele se ajustará automaticamente a todas as resoluções.

Crie dois xibs para um controlador com nome de controlador com sufixo ~ iphone ou ~ ipad. No momento da compilação, o Xcode utilizará o xib correto com base no dispositivo.

Use classes de tamanho, se desejar criar um único xib para iPhone e iPad, se a visualização for simples o suficiente para ser portada para iPhone e iPad.

Há um pequeno problema ao testar no dispositivo iOS e no iOS Simulator. Parece que o simulador (XCode 6.0.1) fornece valores comutados para largura e altura em[[UIScreen mainScreen] bounds].size dependendo da orientação do dispositivo.

Portanto, isso pode ser um problema ao determinar o tamanho certo da tela física. Esse código também ajuda a diferenciar todas as 2014. Gerações de modelos do iPhone:

• iPhone4s
• iPhone5 (e iPhone5s)
• iPhone6 ​​(e iPhone6 ​​+)

Também pode ser facilmente alterado para fazer a distinção entre, por exemplo, iPhone6 ​​de iPhone6 ​​+.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    CGSize iOSDeviceScreenSize = [[UIScreen mainScreen] bounds].size;

    if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone)
    {
        if (iOSDeviceScreenSize.width > 568 || // for iOS devices
            iOSDeviceScreenSize.height > 568) // for iOS simulator
        {   // iPhone 6 and iPhone 6+

            // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone6
            storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone6" bundle:nil];

            NSLog(@"loaded iPhone6 Storyboard");
        }
        else if (iOSDeviceScreenSize.width == 568 || // for iOS devices
                 iOSDeviceScreenSize.height == 568) // for iOS simulator
        {   // iPhone 5 and iPod Touch 5th generation: 4 inch screen (diagonally measured)

            // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone5
            storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone5" bundle:nil];

            NSLog(@"loaded iPhone5 Storyboard");
        }
        else
        {   // iPhone 3GS, 4, and 4S and iPod Touch 3rd and 4th generation: 3.5 inch screen (diagonally measured)

                // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone4
            storyboard = [UIStoryboard story    boardWithName:@"MainStoryboard_iPhone" bundle:nil];

                NSLog(@"loaded iPhone4 Storyboard");
        }
    }
    else if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPad)
    {   // The iOS device = iPad

        storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPadnew" bundle:nil];

        NSLog(@"loaded iPad Storyboard");
    }

    // rest my code
}

Eu sugeriria usar a Máscara de redimensionamento automático em seus aplicativos de acordo com a interface da interface do usuário, ele economiza muitos problemas e é melhor do que criar UI diferente para as telas do iPhone 4 e 5.