Então, de volta ao nosso código, aqui na tela inicial do jogo, que é a primeira
tela que vemos, já podíamos ver que nossos dois botões - redefinir e confirmar também não estavam tão bem
posicionados em nosso contêiner de botões.
Então, vamos dar uma olhada no estilo que criamos lá em baixo e o que podemos ver aqui
é que atribuímos a largura de 100%
no contêiner de botões, mas a que tamanho se refere?
Bem, esse tamanho nesta exibição aqui, é claro, se dizemos 100%, no final se refere ao pai
circundante que, neste caso, é este cartão, esse contêiner
de entrada e nesse contêiner de entrada, na verdade definimos uma largura de 300 e que simplesmente é muito pequeno, combinado com
nossos botões, que temos uma largura fixa de 100, temos essa aparência que não queremos, que, a
propósito, podemos ver se mudamos alguma coisa para que nosso aplicativo seja reconstruído e, portanto, reiniciado;
vemos a tela inicial novamente, eis a
aparência que não queremos.
Então, o que queremos aqui?
Bem, talvez não desejemos a largura de 300 aqui, mas uma largura mais flexível. Estamos definindo uma largura máxima de 80%, o que
poderíamos fazer aqui é que sempre podemos definir uma largura de, digamos, 80 ou 90% e simplesmente certifique-se de que isso sempre
tenha uma largura mínima de 300, para que sempre tenhamos pelo menos esse número de pixels, caso tenhamos um
pequeno dispositivo em que 80% seria menor que isso e que tenhamos pelo
menos isso e agora isso pareceria melhor aqui.
Por quê?
Como agora temos 80% como padrão e
antes disso, tínhamos como largura máxima.
Portanto, agora, definindo-o como padrão, isso garante que esse não seja nosso limite, mas
sim o tamanho padrão, mas
também configuramos que queremos ter uma largura mínima de 300. Nesse dispositivo pequeno, essa largura mínima
está substituindo a largura padrão porque 80% seria realmente menor que 300
nesse dispositivo pequeno.
Agora, é claro, você pode ter um dispositivo ainda menor, onde essa regra leva a um
problema em que largura mínima de 300 significa basicamente que seu dispositivo é menor que isso, não é amplo o
suficiente e, portanto, seu contêiner ultrapassaria os limites da nossa tela.
Portanto, essa ainda pode não ser a regra perfeita, mas certamente é melhor como podemos ver aqui,
porque na tela maior isso ainda fica bem aqui no iPhone, na tela menor, agora também
parece bom.
Agora, para garantir que nunca deixemos nossos limites, também podemos definir uma largura máxima e, digamos, 95%, para que
tenhamos pelo menos um pouco de espaçamento em torno dela.
Agora, garantimos que nosso contêiner nunca saia da nossa tela, mas ele tenta levar 80%, mas no caso de
uma tela super pequena, serão necessários 300,
mas novamente, nunca mais do que 95% da largura disponível.
Portanto, agora simplesmente configuramos aqui regras mais flexíveis, que funcionam em uma gama mais ampla de dispositivos que, como você pode
ver, são um pouco melhores aqui.