iOS Autolayout: dois botões de largura igual, lado a lado

92

No momento, estou tendo dificuldade com o AutoLayout. Estou usando o construtor de interface e tentando posicionar dois botões de largura igual lado a lado, conforme ilustrado na imagem a seguir.

layout objetivo

A partir da imagem de visualização a seguir, meu titleImage foi devidamente restringido e está sendo exibido corretamente, mas os botões não estão. Eu experimentei alinhar o botão 1 com a borda anterior de titleImage e o button2 com a borda posterior de titleImage, no entanto, a distribuição de largura entre os dois botões fica distorcida neste ponto, conforme demonstrado abaixo.

cenário de problema

Meu objetivo é entender quais restrições estão faltando e devem ser aplicadas aos dois botões para manter larguras iguais, independentemente do dispositivo. Se possível, gostaria de conseguir isso por meio do construtor de interface, em vez de código adicional.

ios iphone xcode autolayout Scratcha
fonte
1
A alvenaria é uma maneira recomendada de fazer isso por meio de programação. Link: github.com/Masonry/Masonry
Itachi
1
aqui está o link ... você pode verificar ... stackoverflow.com/questions/29620409/…
EI Captain v2.0

Respostas:

246

Adicione as seguintes restrições

  1. Atribua largura igual de button1 a button2.
  2. Atribuir espaçamento horizontal entre os dois botões.
  3. Atribuir espaço inicial de button1 para sua visão geral.
  4. Atribuir espaço à direita de button2 para sua visão geral.
  5. Atribua espaço superior a ambos os botões.
    Deixe-me saber se funciona para você.
Abubakr Dar
fonte
7
Excelente - funcionou para mim. Especificamente, ponto # 2 - adicionar um espaçamento horizontal.
Scratcha
WoW !!! O que você quis dizer? Realmente funciona como um encanto, e estive perdida cerca de 3 horas! :( No meu caso, eu tinha duas visualizações de largura igual na super visualização dividindo-a. No entanto, ele me perguntou no final algo como, "Precisa de restrições para Y ou Altura" Eu escolhi fazer "Adicionar restrições ausentes" e resolveu.
Randika Vishman
@Abubakr: Funciona para apenas um tamanho de tela, pois os dois botões têm a mesma largura.
AG de
1
Funciona para mais de 2 elementos de interface do usuário adjacentes também!
siege_Perilous
1
Bem, obrigado, mas eu encontrei a solução e é melhor no código. Dê a qualquer um deles o alinhamento central ao pai e dê a metade constante do tamanho do conteúdo, você pode calcular isso no código ou se o conteúdo for estático, você pode apenas atualizar os frames e atualizar a constante. junto com isso, adicione metade do espaçamento central entre dois botões para esse alinhamento central. E apenas coloque isso à esquerda ou à direita para o outro botão. Corrige isso para mim. E se o seu conteúdo for intrínseco e precisar ser atualizado, basta chamar o método de atualizações de layout e calcular o valor constante novamente.
Amber K
79

Siga as etapas e capturas de tela para uma solução fácil

Passo 1)

  • Para o botão 1: definir restrições: (1) inicial, (2) superior ou inferior conforme sua necessidade, (3) altura

Passo 2)

  • Para o botão 2: Definir restrições: (1) Trailing, (2) Superior ou Inferior conforme sua necessidade, (3) Altura

Etapa 3)

  • Pressione Ctrl + Arraste do botão 1 para o botão 2

  • Selecione o espaçamento horizontal

Passo 4)

  • Selecione os dois botões (usando o comando) e adicione restrições com largura igual

RESULTADO

Espero que ajude você :)

Vvk
fonte
1
A altura não deve ser fixada. Deixe a visualização decidir a altura do botão de acordo com o tamanho da tela.
Kunal Kumar
@KunalKumar neste caso, a altura é fixa. você pode por favor me dizer o que você quer?
Vvk
@Vvk ... mano perfeito :)
Jaywant Khedkar
18

O layout da pilha no iOS9 fará o trabalho muito bem. Adicione a visualização em pilha à sua visualização e configure da seguinte forma:

insira a descrição da imagem aqui

Ben
fonte
0

Minha solução é

  1. Coloque uma visão pequena no meio de dois botões e torne-a no centro (centro horizontal no contêiner e centro vertical no contener como 0).
  2. Adicione altura e largura à visualização pequena.
  3. Adicione os botões às restrições e dê restrições de espaço horizontal para visualizações pequenas.
  4. Dê à pequena visão a cor de fundo igual aos botões ou à cor da visão.

Nota: Veja a imagem.

insira a descrição da imagem aqui

AG
fonte