Convertendo Storyboard do iPhone para o iPad


218

Eu tenho um iPhoneaplicativo que possui um storyboard. Agora também quero fornecer um iPadaplicativo. Então, perguntei-me se existe uma função que me ajude a converter meu iPhonestoryboard em um iPadstoryboard.

Para ser específico:

Existe uma função semelhante ou existe apenas a maneira manual?


5
oh obrigado, eu não sabia que tinha que marcá-los, marquei uma resposta agora como a correta. Também fiz isso nos meus tópicos antigos, obrigado.
dehlen

1
Uma informação detalhada com as etapas e imagens encontradas aqui em datacalculation.blogspot.in/2014/09/…
Teste do iOS

Respostas:


535

Eu descobri um tipo de solução:

  1. Duplique seu iPhone-Storyboard e renomeie-o MainStoryboard_iPad.storyboard

  2. Feche o Xcode e abra esse arquivo em qualquer editor de texto.

  3. Pesquise targetRuntime="iOS.CocoaTouch"e altere paratargetRuntime="iOS.CocoaTouch.iPad"

  4. Altere o código no MainStoryboard_iPad.storyboard de:

    <simulatedScreenMetrics key="destination" type="retina4"/> para

    <simulatedScreenMetrics key="destination"/>

  5. Agora salve tudo e reabra o Xcode. O iPad-Storyboard tem o mesmo conteúdo que o arquivo do iPhone, mas tudo pode ser desarrumado.

Isso me salvou horas - espero que isso ajude você


20
+1 Se eu pudesse, daria a você +100 da minha própria reputação. Conselho brilhante! A única coisa que não pude fazer foi abrir o storyboard com o Dashcode, então usei o TextWrangler (mas acho que qualquer editor de texto faria). Obrigado!
Piotr Justyna

45
Bons conselhos, obrigado. Enquanto você está nisso, provavelmente também pode querer alterar toda a largura = "320" para largura = "768", altura = "480" para altura = "1024", etc ... diretamente daqui. Como é muito mais simples do que fazê-lo elemento por elemento no IB.
217 Ben Ben G

63
não use o Dashcode, nem o textWrangler, dentro do xCode simplesmente: clique com o botão direito do mouse no storyboard -> "abra como" -> "Código-Fonte" quando terminar, faça o mesmo, exceto o "Interface Builder - IOS
StoryBoard

16
@PiotrJustyna você pode fazer isso. Imprensa start a bountysob a pergunta, selecione quantidade desejada e Reward existing answer...
Filip Radelic

33
para obter o formato iPad também alterar o código no MainStoryboard_iPad.storyboard de: <simulatedScreenMetrics key="destination" type="retina4"/>a<simulatedScreenMetrics key="destination"/>
Marcus Schwab

61

Se você tivesse criado um projeto universal, por padrão, o storyboard do iPad vazio teria sido criado, basta selecionar o storyboard do iPhone, selecionar todos (Command + A), copiar (Command + C) e colá-lo no storyboard do iPad. Certifique-se de mover o ponto de entrada do storyboard vazio para o storyboard recém-copiado antes de compilar.


9
Melhor resposta, solução fácil e permite que você modifique a interface facilmente depois, diferentemente da resposta principal. :)
Matt Reid

e o layout?
tryKuldeepTanwar

10

Isso não funcionou muito para mim. Eu fiz algo um pouco diferente.

  1. Crie um novo arquivo de storyboard para a versão do iPad
  2. Abra o novo arquivo e o arquivo que eu quero copiar no textwrangler (editor de texto)
  3. Copiou o texto xml do arquivo antigo para o novo arquivo entre essas tags xml
  4. Primeira etiqueta <scenes> <!--Contents View Controller-->
  5. Colar aqui
  6. Tags finais </class> </classes>

Isso funcionou para mim. Recebi um novo layout com todas as minhas tomadas conectadas, o que só me salvou algumas horas.


1
+1 os outros não funcionou para mim e isso faz tudo funcionar como esperado
Shereef Marzouk

4
Você pode fazer isso no Xcode. Apenas clique com o botão direito / controle nos .storyboardarquivos e clique Open As > Source Codepara visualizar o XML bruto.
Matt Kantor

8

Ao ler muitos threads no stackoverflow, descobri que a solução é

1. Duplique o iPhone-Storyboard e renomeie-o como MainStoryboard_iPad.storyboard

2.Clique com o botão direito do mouse no storyboard -> "abrir como" -> "Código-fonte".

3. Procure targetRuntime = "iOS.CocoaTouch" e altere-o para targetRuntime = "iOS.CocoaTouch.iPad"

5. Pesquise <simulatedScreenMetrics key="destination" type="retina4"/>e altere para<simulatedScreenMetrics key="destination"/>

4.Agora salve tudo e clique com o botão direito em MainStoryboard_iPad.storyboard “open as” -> "IOS StoryBoard" 5. Você também pode precisar alterar suas restrições. Isso é tudo que você fez.


8
1. Create New Storyboard file with MainStoryboard_iPad.storyboard
2. Copy All the views from MainStoryboard and paste to MainStoryboard_iPad.storyboard

8

1 - Crie seu "MainStoryboard_iPad.storyboard";

2 - Clique com o botão direito do mouse em você "MainStoryboard_iPhone.storyboard"e em "Abrir como -> Código Fonte". Copie tudo;

3- Clique com o botão direito do mouse em você "MainStoryboard_iPad.storyboard"e em "Abrir como -> Código Fonte". Cole tudo. Agora pesquise e mude:

  • targetRuntime="iOS.CocoaTouch" to targetRuntime="iOS.CocoaTouch.iPad"
  • type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" to type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.iPad.XIB"

4 - Salve. Agora reabra, mas usando o construtor de interface. Você só precisará reorganizar.

Este método também pode ser usado para arquivos .xib


1
Esta é a melhor maneira de fazê-lo. porque todas as visualizações e componentes serão redimensionados para o formato ipad.
Ben

1
Não há necessidade de alterar type = "com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" na versão mais recente do ios7.
super9

5

Isso está acontecendo de outra maneira, mas consegui selecionar tudo e copiar no storyboard do iPad (~ 35 cenas) e colá-lo no storyboard do iPhone. Os tamanhos das cenas foram ajustados automaticamente. Eu só vi dois problemas, tive que substituir o UISplitViewController (já que é apenas o iPad) e o plano de fundo padrão tornou-se transparente em vez de cinza (ainda trabalhando para corrigir isso corretamente, sem definir manualmente o plano de fundo para tudo).

EDIT: Parece que o plano de fundo padrão do UITableView no inspetor de Atributos é bastante estranho. Eu tive que definir manualmente o plano de fundo para "Agrupar cor de plano de fundo da exibição de tabela" para exibições de tabelas agrupadas e "Cor branca" para exibições de tabela não agrupadas. Em seguida, ele foi exibido como "Padrão" (presumo que ele correspondeu a um valor codificado). - Na verdade, ainda mais fácil, mudar de "Agrupado" para "Estático" e voltar parece redefinir a cor padrão.


4

Aqui está algo que me salvou horas e pode ajudar aqueles com habilidades em Python.

Desenvolvo um aplicativo nos últimos dois meses, focado apenas no iPad, iterando o UX com a equipe.

Hoje focado na criação da versão para iPhone, segui as etapas acima (obrigado!), Mas eu não queria redimensionar todos os elementos da interface do usuário das dimensões do iPad no editor visual do storyboard.

Então, escrevi este pequeno script python jig para procurar no arquivo do storyboard x, y, largura, altura e dimensionar tudo na proporção 320./768. Permitiu-me, então, me concentrar apenas nos ajustes finos.

  1. Copie o storyboard do iPad em um novo arquivo. (por exemplo, iPhoneStoryboard.storyboard)

  2. Execute o script abaixo com o nome do arquivo copiado do storyboard como o primeiro parâmetro.

  3. Gerará arquivo de saída com o sufixo _adjusted.storyboard (por exemplo, iPhoneStoryboard.storyboard_adjusted.storyboard)

Espero que ajude...

import re
import sys
import math

afile = sys.argv[1]

scale = 320./768.

number_pattern = '[-0-9]+(.[0-9]+)?'
#width_pattern = 'width="[-0-9]+( ?px)?"'
width_pattern = 'width="[-0-9]+(.[0-9]+)?( ?px)?"'
height_pattern = 'height="[-0-9]+(.[0-9]+)?( ?px)?"'
x_pattern = 'x="[-0-9]+(.[0-9]+)?( ?px)?"'
y_pattern = 'y="[-0-9]+(.[0-9]+)?( ?px)?"'


def replacescaledvalue(scale,pattern,sometext,replacefmt) :
    ip = re.search(pattern, sometext, re.IGNORECASE)
    if(ip) :
        np = re.search(number_pattern,ip.group(0))
        if(np) :
            val = float(np.group(0))
            val = int(math.floor(val*scale))
            sval = replacefmt+str(val)+'"'#+'px"'
            newtext = re.sub(pattern,sval,sometext)
            return newtext
    else :
        return sometext

fin = open(afile)
fout = open(afile+"_adjusted.storyboard", "wt")
for line in fin:
    newline = line
    newline = replacescaledvalue(scale,width_pattern,newline,'width="')
    newline = replacescaledvalue(scale,height_pattern,newline, 'height="')
    newline = replacescaledvalue(scale,x_pattern,newline, 'x="')
    newline = replacescaledvalue(scale,y_pattern,newline, 'y="')
#   print newline
    fout.write( newline )

fin.close()
fout.close()

1
Oi Chrish, eu sou novo no phython. portanto, não consigo entender o código para alterar o storyboard do iPhone no iPad. então você pode me ajudar nisso? Meu storyboard do ipad está se convertendo no storyboard do iphone sem problemas. mas preciso converter meu storyboard do iphone em iPad. Então, quando o exigir alterações necessárias no script acima ou você pode compartilhar o script que converte iphone em ipad. Desde já, obrigado.
Shubham 14/11

@ Chris Robertson Chris, se eu quisesse usar esse script para conversão de iPhone para iPad, mudaria a 'scale = 320./768'. para 'escala = 768./320.'?
Charles Robertson

3

Vá para o Resumo de destino e mude os dispositivos para universal, depois desça e defina a versão do ipad para qualquer storyboard que você desejar, incluindo um copiado e renomeado, se quiser.


3

Assim como uma nota rápida para aqueles que podem ter tido o meu problema com isso:

Meu problema:

O conteúdo do storyboard copiou muito bem para um novo arquivo do quadro que eu adicionei. No entanto, ele não colocaria alterações no meu iPad provisionado. Percebendo que eu tinha que mudar o storyboard designado para o destino da compilação (veja a imagem), deixe as alterações aparecerem.

Eu postaria uma imagem se tivesse os pontos, mas a configuração está localizada em:

Navegador de projeto no menu de origem do lado esquerdo, destino raiz da guia geral do painel (painel central), informações de implantação (segundo subtítulo), com a guia do botão do iPad selecionada.

A partir daí, escolha seu storyboard em "interface principal".

Obrigado pelo post, espero que essa menção ajude um problema em algum lugar.


3

Apenas por diversão, no XCode 5.1 e iOS 7.1, também precisei alterar os valores de "toolVersion" e "systemVersion" para isso:

toolsVersion="5023" systemVersion="13A603"

Sem isso, o novo arquivo de storyboard não seria compilado


3

Usando as Classes de tamanho XCode6, você não precisa mais converter o storyboard em iPad. O mesmo Storyboard pode ser usado para o iPhone e o iPad, evitando que você mantenha dois arquivos atualizados.

O storyboard resultante é compatível com iOS7 +.

Leia mais sobre isso aqui: https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html#//apple_ref/doc/uid/TP40014436-CH6-SW1

Use classes de tamanho para permitir que um storyboard ou arquivo xib funcione com todos os tamanhos de tela disponíveis. Isso permite que a interface do usuário do seu aplicativo funcione em qualquer dispositivo iOS.


3

For Xcode10

  1. Apenas duplicar Main.storyboard

  2. Em seguida, renomeie os arquivos para Main_iPad.storyboardeMain_iPone.storyboard

  3. Defina nomes apropriados em .plist

insira a descrição da imagem aqui

4. Basta selecionar o .storyboard adequado para configurar insira a descrição da imagem aqui


2

Esta funcionalidade está agora incorporada. Por exemplo, se alguém alterar as configurações do projeto em Informações de implantação -> Dispositivos do iPhone para Universal, a seguinte caixa de diálogo será exibida:

insira a descrição da imagem aqui


3
Pode ser um bug no Xcode, mas nunca tive esse trabalho. O storyboard do iPad resultante não é adicionado ao projeto e parece que ele não foi criado.
S73v3r

2

Eu segui esta discussão quando fui atingido com o mesmo problema ontem. Os passos que segui

  1. Para o Xcode 5.1, eu tive que fazer uma limpeza no storyboard do iPhone, como a falta de reutilização dos identificadores das células da tabela, fornecer a identificação do storyboard para cada controlador, remover cenas não utilizadas.
  2. Copie MainStoryboard_iPhone.storyboard para MainStoryboard_iPad.storyboard.
  3. Usando o editor vi - alterado targetRuntime="iOS.CocoaTouch"paratargetRuntime="iOS.CocoaTouch.iPad"
  4. Altere o código no MainStoryboard_iPad.storyboard de: <simulatedScreenMetrics key="destination" type="retina4"/>para<simulatedScreenMetrics key="destination"/>
  5. Abra o projeto no Xcode.
  6. Os dispositivos de implantação foram alterados para Universal - escolha a opção NÃO copiar o Storyboard do iPhone.
  7. O Xcode padronizará o Deployment Target para 7.1, cuidou das funções obsoletas.
  8. Para corrigir o erro de exibição incorreta no iPad Storyboard - Alterado o layout do quadro para controladores, fornecendo erros.

Foi isso .. Obrigado a todos pela ajuda ..


1

A maneira mais fácil e confiável de fazer isso é copiar e colar do storyboard do iPad.

  1. Crie um novo storyboard e chame-o de MainStoryboard_ipad.
  2. Torne seu aplicativo um aplicativo Universal, definindo a propriedade Dispositivos como Universal na página Resumo das propriedades de Destino do seu projeto. insira a descrição da imagem aqui
  3. Abra o storyboard do iPhone, selecione tudo e copie
  4. Abra o storyboard do iPad e cole.

Você precisará redimensionar, mas pode ser mais rápido do que recriar todo o storyboard.


1

Existe uma solução realmente simples para as versões do Xcode que suportam classes de tamanho (Testada no Xcode 7, que é a versão atual no momento da redação). Marque a caixa de seleção "usar classes de tamanho" em um arquivo de storyboard ( File Inspector ), confirme a caixa de diálogo exibida. Em seguida, desmarque a mesma caixa de seleção - o Xcode perguntará se você deseja usar esse storyboard com um iPhone ou iPad e converterá as telas nele adequadamente. Não há necessidade de editar diretamente o arquivo do storyboard . Para o iPad e o iPhone, basta copiar o mesmo storyboard e configurar um para o iPad e outro para o iPhone usando o método descrito.

E antes que alguém sugira o uso de classes de tamanho - apesar de ótimas, elas são menos convenientes para a interface do usuário altamente personalizada, como jogos etc.


1

Uma abordagem diferente

  1. Adicione um controlador de exibição vazio com o controlador de navegação no iPad-Storyboard

  2. Altere a classe para a classe do seu primeiro ViewController usado para iPhone, "fooViewController"

  3. Adicione o Storyboard-Identifier no iPhone-Storyboard "fooViewController_storyboard_identifier" para o primeiro ViewController

  4. Vá para "fooViewController.m"

  5. Adicionar bool Bool variável nibWasLoadForIpad=false

  6. Vá para viewDidLoad-Method

if ( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad && !nibWasLoadForIpad)
{
    nibWasLoadForIpad=true;
    UIStoryboard* Storyboard_iphone=[UIStoryboard storyboardWithName:@"Main_iPhone" bundle: nil];
    fooViewController *controller = [Storyboard_iphone instantiateViewControllerWithIdentifier:@"fooViewController_storyboard_identifier"];
    [self.navigationController pushViewController:controller animated:YES];
    self.modalPresentationStyle = UIModalPresentationCurrentContext;
}

(ps. Saiba que o problema é que os fundos da visualização serão definidos em branco)



0

Obrigado pelas respostas a todos.

Segui as etapas acima, mas quando executei o aplicativo no simulador ou no iPad, ele continuou usando o storyboard do iPhone.

Por alguma razão, quando mudei o dispositivo de destino para Universal, em vez de iPhone, o Xcode (v5.0) não atualizou o arquivo app-Info.plist para incluir o storyboard do iPad, então tive que adicionar manualmente a seguinte entrada ( usando o editor plist no Xcode):

Nome da base do arquivo principal do storyboard (iPad) ==> MainStoryboard_iPad


0

Acabei de mudar (além da resposta de @tharkay):

 <device id="ipad9_7" orientation="landscape">

e funciona muito bem!

Eu uso isso no XCode 8.3.3

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.