O que é 'Vary for Traits' no Xcode 8?

86

Estou usando as classes AutoLayout e Size, mas com o lançamento do iOS 10 e do novo Xcode 8.0, há uma nova opção Vary for Traits. É esta a substituição da classe de tamanho para diferentes larguras e alturas dos dispositivos.

insira a descrição da imagem aqui

Selecionando a widthcaixa de seleção, ele é exibido varying 14 compact width devices.

insira a descrição da imagem aqui

Selecionando a heightcaixa de seleção, ele é exibido varying 18 compact height devices.

insira a descrição da imagem aqui

Selecionando ambas as caixas de seleção, ele é exibido varying 11 compact width regular height devices.

insira a descrição da imagem aqui

Como fazer uso dessas opções? Podemos usar AutoLayout com classes de tamanho como Xcode7.0? Se alguém tiver conhecimento profundo, explique-o.

technerd
fonte
Dê uma olhada nos vídeos da sessão WWDC 2016. Tenho certeza de que foi abordado em algum lugar como "novos recursos do Xcode".
Martin R

Respostas:

133

Esta é apenas uma extensão de como usar "Vary Traits" rapidamente em seu projeto para adicionar diferentes layouts para iPad e iPhones.

Leia isso para entender mais sobre as classes de tamanho.

https://developer.apple.com/reference/uikit/uitraitcollection

insira a descrição da imagem aqui

Se você estiver pulando o exemplo a seguir, leia o Resumo no final.


  • OBJETIVO :

Você precisa de um botão com larguras diferentes no iPhone e no iPad. O primeiro tem uma largura de 80 e o último tem uma largura de 300.

  • MÉTODO 1 :

Varie para características com múltiplas restrições conforme instalado.

  • PASSOS :

    1. Adicione as restrições comuns primeiro, como Centralizar o botão horizontalmente e verticalmente.

insira a descrição da imagem aqui

  1. Escolha VaryForTraits e para telas do iPhone de acordo com as diretrizes de classe de tamanho, uma classe de tamanho C * R se encaixa no modelo e verificamos as marcas de largura e altura no PopUp. Dispense o pop-up clicando em qualquer lugar da tela.

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

  1. Adicione a constante de largura e verifique se a restrição foi adicionada para a classe de tamanho C * R. Depois de adicionar restrições, escolha o botão Done Varying.

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

  1. Para telas de iPad, selecione novamente qualquer dispositivo iPad e escolha VaryForTraits e, desta vez, clicando em altura-largura, ele deve mostrar a variação R * R.

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

  1. Novamente adicione uma restrição de largura, a última restrição de largura do iPhone adicionada deve ser desmarcada como na captura de tela. O valor adicionado será para a classe de tamanho R * R neste momento.

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

  1. Volte para o layout do iPhone e a largura será de 80 e o iPad terá 300.

insira a descrição da imagem aqui

CONCLUSÃO:

Observe que há um total de duas restrições adicionadas e em ambas as restrições, os valores diferem de acordo com a classe de tamanho escolhida.


  • MÉTODO 2:

Varie para características com restrição única, múltiplas classes de tamanho instaladas

  • PASSOS :
    1. Adicione a restrição de largura normal. Em seguida, selecione essa restrição e escolha o botão + ao lado do valor Constante.

insira a descrição da imagem aqui

  1. Adicione a variação do traço e, para o iPhone, escolhemos C * R e definimos o valor constante como 100.

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

  1. Novamente para iPad que segue uma variação de característica como R * R, adicionamos outra variação clicando novamente no botão + e definimos o valor como 300.

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

  1. Selecione um iPad e a largura será automaticamente considerada 300 e voltando ao iPhone leva 100 como valor.

insira a descrição da imagem aqui

CONCLUSÃO:

Esta parece ser uma opção melhor do que adicionar duas restrições quando uma única restrição é apenas necessária e o valor constante é diferente.

QUANDO USAR, O QUE USAR:

Ambas as abordagens estão basicamente fazendo a mesma coisa, definindo valores para classes de tamanho.

Mas, # Method1 é usado quando você deseja adicionar uma restrição especificamente para um dispositivo ou dizer classe de tamanho. Por exemplo, no iPhone o botão deve ser dos 50 pontos principais e no iPad deve ser centralizado horizontalmente e verticalmente. Em tais situações, você precisa usar VaryForTraits, pois abre portas para adicionar restrições para uma classe de tamanho específica.

# Method2 é usado quando você deseja valores constantes diferentes para um mesmo tipo de restrição.

PS: A TODOS OS QUE NÃO PODEM OBTER O EXEMPLO DE FUNCIONAMENTO

Certifique-se de que está adicionando apenas as restrições necessárias como instaladas. A caixa de seleção em Instalado deve aparecer apenas para a restrição necessária para uma classe de tamanho. Essa é a chave!

insira a descrição da imagem aqui

Basta adicionar uma restrição superior e um líder para um uiButton em uma visualização. Selecione a restrição superior e desmarque a opção básica Instalado com o sinal de adição. Agora, clicando no sinal de mais, adicione variação a C R e marque essa opção. Agora, mude o dispositivo de iPhone para iPad com várias combinações de orientação. Essa restrição será aplicada apenas para a classe de tamanho C R, que é o iPhone na orientação retrato. Se a caixa de seleção do Instalado básico (aquele com o símbolo de Mais) foi marcada, isso significa que a restrição deve ser aplicada a todas as classes de tamanho.

RESUMO:

A variação de traço é uma alteração na apresentação da interface do usuário com base na configuração do dispositivo. As variações de traço da interface do usuário não se limitam apenas a restrições, mas podem ser aplicadas a muito mais. Como alterar a cor do plano de fundo e outros elementos quando o dispositivo está definido para um estilo escuro. Uma variação pode ser aplicada a um elemento da interface do usuário, como remover uma restrição, ou a uma propriedade de uma classe de visão ou restrição, como a fonte de um rótulo. Você pode variar:

  • Tamanho ou posição de uma vista

  • Instalação de uma vista

  • Instalação de uma restrição

  • Constante de restrição

  • Fonte

  • Cor da fonte, matiz ou plano de fundo

  • Margens de layout

  • Arquivo de imagem

O conjunto específico de propriedades que você pode variar depende da classe do elemento. No exemplo, demonstramos o uso de - Instalação de uma restrição & - Constante de restrição. Outros são bastante simples e podem ser facilmente inferidos.

Jen jose
fonte
51
Isso não está funcionando para mim .. Ele atualiza as restrições em todos os tamanhos de tela e praticamente nada acontece ...
Dan
5
Se não funcionar, tente ler isto: help.apple.com/xcode/mac/8.0/#/devba3dd0b51 . Se você deseja personalizar a fonte ou outra propriedade, clique em "+" que está à esquerda da propriedade no painel de atributos. E você não pode variar as características do iPhone 4s e do iPhone 7 Plus, dependendo da largura, por exemplo, uma vez que ambos são compactos. Você pode varia-los para iPhone e iPad.
Denis Kutlubaev
2
Trabalhou para mim thnx :)
Sanman
1
Funcionou para mim depois que excluí a restrição antiga e adicionei uma nova, em vez de substituir seu valor.
Teodor Ciuraru
2
Para as pessoas que dizem que isso não está funcionando. Eu acho que você está tentando mudar todas as restrições, você pode apenas o valor constante em uma restrição, você não pode realmente alterar as propriedades múltiplas ou outras da restrição. Eu também estava confuso nessa parte.
3366784
21

Variar para características é a evolução da opção de classes de tamanho que estava presente na versão anterior do Xcode. Ele permite uma variação muito mais bacana e precisa com base nas características. Claro, não se limita a variações apenas para iPad / iPhone, mas você também pode especificar variações com base na orientação e no dispositivo diferente.

Outras respostas neste tópico têm algumas lacunas e imprecisões, talvez a forma mais eficiente de dar uma resposta seja dando um exemplo. Por motivos de clareza, limitaremos nosso exemplo a apenas um botão e dois layouts. No entanto, conforme explicado abaixo, você pode estender o exemplo a seguir como desejar. Nosso objetivo é ajustar a posição de um botão entre dois layouts diferentes: paisagem e retrato em todos os dispositivos.

Nota: Se a opção “variar para características” não estiver habilitada, todos os ajustes de layout e interface de interface do usuário são referentes a todas as características (ou seja, todas as classes de tamanho).

Figura 1

Vamos começar colocando um botão em nosso storyboard. Uma vez que “variar para características” não está habilitado, o botão estará presente em todos os layouts diferentes. Se, em vez disso, tivéssemos habilitado a variação para características, o botão seria referido apenas para a característica particular selecionada.

Figura 2

Agora, vamos habilitar “variar por característica” e escolher uma variação com base na altura. Você deve ver que a tela inferior ficará azul e de acordo com a seleção, você verá todos os dispositivos impactados. Por enquanto, tudo bem.

fig3

Selecione novamente o botão e adicione as restrições de anúncio usual. Em nosso exemplo, adicionaremos espaço inicial superior e esquerdo, bem como largura e altura. Depois disso, clique em “Done Varying”. Você verá que a parte inferior da tela ficará cinza novamente. O que está acontecendo é que pedimos ao Interface Builder para adicionar as restrições acima apenas para as classes (w: C h: R).

fig4

Agora selecione o modo paisagem na parte inferior da tela. Você verá que o botão está em vermelho, porque não possui as restrições que você adicionou apenas para algumas características. Selecione variar novamente para características e selecione novamente a variação de altura. Adicione as seguintes restrições:

fig5

e pressione feito variando. Agora o botão está bem identificado na tela tanto para paisagem quanto para retrato.

fig6

Construa e execute. Você verá que o botão mudará de acordo com a orientação da tela.

Você pode criar layouts mais avançados seguindo este padrão. Por exemplo, você pode selecionar no início uma variação para características e descartar objetos UIKit apenas para uma característica específica. Este objeto estará presente apenas na variante especificada e ficará esmaecido nas outras, permitindo que você crie interfaces de usuário completamente diferentes com base em características.

valvoline
fonte
3
Eu adicionei restrições para a classe (wC, hR) e cliquei em concluir a variação. Quando eu abro (wR, hR), então também vejo as velhas restrições. Como criar novas restrições para (wR, hR) esta classe. Por favor me diga @valvolin
Ramcharan Reddy
9

Não é nada além de size classessi mesmo, mas com uma representação diferente. até xcode 7usarmos classes de tamanho e considerarmos height-widthna regular,compact and anymaneira, o vary for traitsconceito é o mesmo, mas o xcode explica especificamente exact device. Na versão mais antiga, sabemos que for every iphone in portrainttipo de informação, etc., onde podemos saber o dispositivo exato!

Verifique as capturas de tela abaixo,

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Você deve consultar wwdc2016 - video para obter mais informações!

Referência: This So Post

Ketan Parmar
fonte
Ok, deixe-me verificar o Vídeo WWDC.
technerd
Você está certo, não é nada além da evolução das classes de tamanho
Durai Amuthan.H