Entonces, de vuelta en nuestro código, aquí en la pantalla de inicio del juego, que es
la primera pantalla que vemos, ya pudimos ver que nuestros dos botones: restablecer y confirmar tampoco estaban ubicados tan
bien en nuestro contenedor de botones.
Así que echemos un vistazo al estilo que configuramos allí y lo que podemos ver aquí es que
asignamos el ancho del 100% en el
contenedor del botón, pero ¿a qué se refiere este tamaño?
Bueno, este tamaño en esta vista aquí, por supuesto, si decimos 100%, al final se refiere al padre que
lo rodea, que en este caso es esta tarjeta, este
contenedor de entrada y en este contenedor de entrada, en realidad establecemos un ancho de 300 y que simplemente es demasiado pequeño, combinado con
nuestros botones que tenemos un ancho fijo de 100, obtenemos este aspecto que no queremos, que por cierto podemos
ver si cambiamos algo para que nuestra aplicación se reconstruya y, por lo tanto, se reinicie, luego
vemos esa pantalla de inicio nuevamente, aquí está
el aspecto que no queremos.
Entonces, ¿qué queremos aquí?
Bueno, tal vez no queremos el ancho de 300 aquí, sino un ancho más flexible. Estamos estableciendo un ancho máximo del 80%, lo que podríamos
hacer aquí es que siempre podríamos establecer un ancho de digamos 80 o 90% y simplemente asegurarnos de que esto siempre tenga un
ancho mínimo de 300, para que siempre tengamos al menos esta cantidad de píxeles en caso de que tengamos un
dispositivo pequeño donde el 80% sería menor que eso y que tengamos al menos
esto y ahora esto se vería mejor aquí.
¿Por qué?
Porque ahora tenemos el 80% por defecto y antes
de eso, lo teníamos como ancho máximo.
Entonces, al configurarlo por defecto, esto garantiza que este no sea nuestro límite, sino que
es nuestro tamaño predeterminado, pero
también configuramos que queremos tener un ancho mínimo de 300. En este pequeño dispositivo, este ancho
mínimo anula nuestro ancho predeterminado porque el 80% en realidad sería menos de 300
en este pequeño dispositivo.
Ahora, por supuesto, podría tener un dispositivo aún más pequeño donde esta regla sin embargo conduce a un problema
donde el ancho mínimo de 300 básicamente significa que su dispositivo es más pequeño que eso, no es lo suficientemente ancho y, por lo
tanto, su contenedor iría más allá de los límites de nuestro pantalla.
Entonces, esta podría no ser la regla perfecta, pero ciertamente es mejor, como podemos ver aquí, porque en la pantalla
más grande, esto todavía se ve bien aquí en el iPhone, en la pantalla más pequeña, ahora también
se ve bien.
Ahora, para asegurarnos de que nunca abandonemos nuestros límites, también podemos establecer un ancho máximo y establecerlo en un 95%
para que tengamos al menos un poco de espacio alrededor.
Ahora nos aseguramos de que nuestro contenedor nunca salga de nuestra pantalla, pero trata de ocupar el 80%, pero en
caso de que tengamos una pantalla súper pequeña,
tomará 300 pero, nuevamente, nunca más del 95% del ancho disponible.
Así que ahora simplemente establecemos reglas más flexibles aquí que funcionan en una gama más amplia de dispositivos que, como pueden
ver, es un poco mejor aquí.