Donc, dans notre code, ici dans l'écran de démarrage du jeu qui est le premier écran que
nous voyons, nous pouvions déjà voir que nos deux boutons - réinitialiser et confirmer n'étaient pas non plus positionnés aussi
bien dans notre conteneur de boutons.
Jetons donc un coup d'œil au style que nous avons mis en place là-bas et ce que nous pouvons voir ici,
c'est que nous attribuons la largeur de 100% sur
le conteneur de boutons, mais à quoi cette taille fait-elle référence?
Eh bien, cette taille sur cette vue ici, bien sûr si nous disons 100%, se réfère finalement au parent environnant
qui dans ce cas est cette carte, ce conteneur d'entrée
et sur ce conteneur d'entrée, nous avons en fait défini une largeur de 300 et que est tout simplement trop petit, combiné avec nos boutons dont
nous avons une largeur fixe de 100, nous obtenons ce look que nous ne voulons pas, que nous pouvons d'ailleurs
voir si nous changeons quelque chose pour que notre application se reconstruit et redémarre donc, puis nous voyons
à nouveau cet écran de démarrage, voici le
look que nous ne voulons pas.
Alors que voulons-nous ici?
Eh bien peut-être que nous ne voulons pas la largeur de 300 ici, mais une largeur plus flexible. Nous définissons une largeur maximale de 80%, ce que nous
pourrions faire ici, c'est que nous pourrions toujours définir une largeur de disons 80 ou 90% et nous assurer simplement que cela devrait toujours
avoir une largeur minimale de 300, afin que nous ayons toujours au moins autant de pixels au cas où nous aurions
un petit appareil où 80% serait inférieur à cela et que nous avons au
moins ceci et maintenant cela serait mieux ici.
Pourquoi?
Parce que maintenant, nous avons 80% par défaut et
avant cela, nous l'avions comme largeur maximale.
Alors maintenant, en le définissant sur une valeur par défaut, cela garantit que ce n'est pas notre limite,
mais plutôt notre taille par défaut, mais
nous avons également configuré que nous voulons avoir une largeur minimale de 300. Sur ce petit appareil, cette largeur minimale
l'emporte sur notre largeur par défaut car 80% serait en fait inférieur à 300
sur ce petit appareil.
Maintenant, bien sûr, vous pourriez avoir un appareil encore plus petit où cette règle conduit cependant à
un problème où une largeur minimale de 300 signifie que votre appareil est plus petit que cela, il n'est pas assez large
et par conséquent, votre conteneur dépasserait les limites de notre écran.
Donc, ce n'est peut-être pas encore la règle parfaite, mais c'est certainement mieux comme nous pouvons le voir ici, car sur
un écran plus grand, cela semble toujours bien ici sur l'iPhone, sur un écran plus petit, cela a maintenant
aussi l'air bien.
Maintenant, pour nous assurer que nous ne quittons jamais nos limites, nous pouvons également définir une largeur maximale et la définir
à, disons, 95% afin d'avoir au moins un peu d'espacement autour.
Maintenant, nous nous assurons que notre conteneur ne sortira jamais de notre écran, mais il essaie de prendre 80% mais dans le cas
où nous avons un très petit écran, cela prendra
300 mais encore une fois, jamais plus de 95% de la largeur disponible.
Alors maintenant, nous avons simplement mis en place ici des règles plus flexibles qui fonctionnent sur une plus large gamme d'appareils qui, comme vous pouvez
le voir, est un peu mieux ici.