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.

— 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

246

Adicione as seguintes restrições

Atribua largura igual de button1 a button2.
Atribuir espaçamento horizontal entre os dois botões.
Atribuir espaço inicial de button1 para sua visão geral.
Atribuir espaço à direita de button2 para sua visão geral.
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:

— Ben
fonte

2

Você pode verificar meu exemplo - você pode direcionar isso facilmente, usando a restrição proporcional. Além disso, você pode apontar facilmente vários UIViews proporcionais. Veja o exemplo em anexo

https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib

— Vitaliy Gozhenko
fonte

0

Minha solução é

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).
Adicione altura e largura à visualização pequena.
Adicione os botões às restrições e dê restrições de espaço horizontal para visualizações pequenas.
Dê à pequena visão a cor de fundo igual aos botões ou à cor da visão.

Nota: Veja a imagem.

— AG
fonte