Interface Builder: Para que servem o Layout iOS 6/7 Deltas do UIView?


111

Acabei de notar a propriedade Delta 6/7 do iOS encontrada sob o layout de estruturas do UIView.

Para que serve isso e por que está faltando no AutoLayout?

insira a descrição da imagem aqui

Respostas:


83

Na verdade, isso se refere ao Delta entre a posição do layout de iOS6 a iOS7.

No iOS7, algumas visualizações podem ocultar a barra de status ou torná-la transparente e, na verdade, é sobreposta na parte superior da sua visualização. Portanto, se você colocar um elemento de IU em (0,0, 0,0) no iOS6, ele aparecerá abaixo da barra de status, mas no iOS7 ele aparecerá parcialmente coberto abaixo da barra de status. Nesse caso, você deve querer um delta que corresponda à altura da barra de status (20,0 pontos) para que o layout seja o mesmo no iOS6 e iOS7.

Acredito que isso não seja necessário se você usar o autolayout, mas é claro, você perderá o suporte ao iPad1, o que muitos de nós não estão dispostos a conceder neste momento.


27
Para mim, descobri que é o delta do iOS 7 para o iOS 6. Eu abaixei meus elementos em 20 pontos, em seguida, configurei um -20 para Delta Y.
guptron

isso é particularmente útil com o UIProgressView, que é muito mais fino no iOS 7
Lee Probert

108

Observação: percebi essa pergunta há um tempo, mas só estou postando minha resposta agora porque o NDA foi cancelado

Por que não aparece para AutoLayout?

Como você deve ter notado, o iOS 7 traz um visual totalmente novo. A aparência dos elementos da IU mudou, mas também mudou alguns de seus tamanhos (ou métricas em geral). Isso pode tornar o design da interface para acomodar o iOS 7 e seus predecessores um pouco doloroso.

A linha oficial da Apple é usar o AutoLayout para resolver isso; isso deve diminuir muito o planejamento dos elementos da IU para você. Às vezes, incorporar isso não é fácil, especialmente se você ainda deve oferecer suporte ao iOS 5 por motivos de negócios, ou se suas interfaces são gerenciadas de uma forma que dificulta a implementação do AutoLayout. Como tal, a Apple parece ter fornecido uma maneira de tornar seu trabalho um pouco mais fácil se você se enquadrar nessa categoria de nicho, e eles chamaram isso de iOS 6/7 Deltas.

Ok então, o que isso faz?

Embora o rótulo no Interface Builder não seja um pouco claro quanto ao que 'Delta' significa neste contexto, o código contido no arquivo .xib que corresponde a este recurso é um pouco mais claro:

<inset key="insetFor6xAndEarlier" minX="-50" minY="-100" maxX="-50" maxY="300"/>

O nome da chave insetFor6xAndEarlierafirma explicitamente o que isso faz; você pode fornecer inserções alternativas para elementos da interface do usuário quando executado nos predecessores do iOS 7. Por exemplo, o acima define a seguinte alteração delta:

x: 50
y: 100
width: -100
height: 200

Embora os valores armazenados no .xib não correspondam diretamente aos valores citados, há uma correlação entre eles.

x: -minX
y: -minY
width: minX + maxX
height: minY + maxY

As imagens abaixo mostram essa mudança visualmente. É um exemplo bastante extremo, mas serve para demonstrar sua capacidade. Eu esperaria apenas na prática mudanças delta de apenas alguns pixels.

iOS7 View

iOS6 View

Você pode notar que os valores são inversos para a visualização do iOS 6; isso ocorre porque os deltas são relativos ao tipo de visualização com a qual você está trabalhando. Se você estiver editando para iOS 6, os deltas existem para transformar o elemento corretamente para iOS 7 (o reverso do exemplo acima).

Para visualizar os diferentes estilos, você pode alterar a forma como o Interface Builder o apresenta com base no sistema operacional em que estaria sendo executado. Ele está contido no Inspetor de Arquivos-> Documento do Construtor de Interface (1ª guia na barra direita), da seguinte forma:

Interruptor de estilo de interface

Isso existe se eu gostar de codificar minha interface manualmente?

Não diretamente, mas você pode obter facilmente o mesmo efeito tendo verificações condicionais na versão do sistema operacional em seu código e definindo a posição / tamanho correto de acordo. A capacidade delta existe no Interface Builder porque não haveria uma maneira direta de ter um posicionamento condicional sem ter um código para fazê-lo, e o objetivo do Interface Builder é tirar o máximo de código possível para a IU.

No geral...

A Apple recomenda enfaticamente que você use o AutoLayout, ele torna sua vida mais fácil na maioria dos casos. Se você não puder usá-lo (pelos motivos mencionados acima), os deltas fornecem a flexibilidade de posicionar seus elementos de IU de maneira apropriada, com base nas métricas do SO atual, sem a necessidade de reposicioná-los manualmente no código. Um bom exemplo é ajustar a falta de barra de status, mas existem muitos outros casos de uso.

Naturalmente, se você está desenvolvendo apenas para iOS7 e superior, não precisa conhecer esse recurso / não vai descobri-lo. Somente se você precisar ter dispositivos iOS6 executando seu aplicativo quando construído com o SDK iOS7, sem autolayout, você precisa de deltas.

No momento em que escrevo (21 de agosto), não consigo encontrar nenhuma documentação sobre esse recurso, nem qualquer menção no material do WWDC. Eu fiz uma brincadeira e, depois de um pouco de pesquisa, foi isso que descobri.


2
Muito obrigado WDUK
Kamar Shad

Nenhuma propriedade até agora, isso é o que eu precisava saber
Jasper

30

Eu sei que isso já foi respondido, apenas adicionando uma pequena variante na esperança de que também possa ajudar aqueles que não usam o layout automático e ainda querem oferecer suporte ao iOS 6.1 e versões anteriores.

Leia este Guia de transição da Apple - com suporte à versão anterior

Escolha 'Ver como' para 'iOS 7.0 e posterior'

insira a descrição da imagem aqui

UI de base para iOS 7. Para iOS 6 forneça o valor delta adequado. Use a visualização para ver como isso será renderizado no dispositivo iOS 7 e iOS 6.

insira a descrição da imagem aqui

Passos rápidos:

Selecione cada filho imediato da visualização raiz individualmente e adicione 20px ao seu valor 'Y'.

insira a descrição da imagem aqui

Em seguida, selecione todos os filhos imediatos coletivamente e forneça delta Y como -20px. Você também pode fazer isso em lote ou individualmente.

insira a descrição da imagem aqui


9

AutoLayout requer pelo menos iOS 6.0. Se você quiser oferecer suporte ao iOS 5.0, não poderá usar o AutoLayout.

E esses deltas são usados ​​para ajudá-lo a ajustar a posição de visualização em diferentes versões do iOS (principalmente iOS 7 e versão iOS inferior a 7).

Eu uso esses valores para me ajudar a gostar desta imagem. insira a descrição da imagem aqui


1
Quando eu as altero, nada acontece, há outra etapa envolvida?
Aço Reciclado de

@RecycledSteel veja minha resposta aqui: link
Riskov

3

Para ver o iOS 6/7 Delta em ação, farei uma demonstração com um SegmentedControl que aparece corretamente nos dispositivos iOS 6 e iOS 7.

Primeiro, selecione seu .Xib ou ViewController no Storyboard. Desmarque Usar Autolayout e selecione " Visualizar como iOS 7 e posterior "

insira a descrição da imagem aqui

Na tela do Interface Builder, coloque seu SegmentedControl de modo que origin.y seja 20. No iOS 6/7 Delta, escolha -20 para DeltaY

insira a descrição da imagem aqui

Isso fará com que o seu SegmentedControl seja colocado abaixo da barra de status nos dispositivos iOS 6 e iOS 7

insira a descrição da imagem aqui insira a descrição da imagem aqui

Outras citações úteis do Guia do desenvolvedor para a barra de status do iOS 7

Os deltas podem ser definidos individualmente para cada visualização e funcionam conforme o esperado. Se o seu storyboard ou ponta estiver definido para visualizar como iOS 6, definir os deltas fará com que a visualização seja deslocada e / ou redimensionada pelo valor delta definido quando executado no iOS 7. Alternativamente, se seu storyboard ou ponta estiver configurado para visualizar no iOS 7, os deltas serão aplicados quando executados no iOS 6


0

Se você estiver usando AutoLayout, Delta não estará disponível. Experimente isto (testado no iPhone 4s com iOS6):

- (void) viewWillLayoutSubviews {

//iOS 6 workaround offset
if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7) {

    self.view.clipsToBounds = YES;
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenHeight = 0.0;
    screenHeight = screenRect.size.width;
    CGRect screenFrame = CGRectMake(0, -20, self.view.frame.size.width,self.view.frame.size.height+10);

    self.view.frame = screenFrame;
}
}
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.