Pourquoi Android s'engage-t-il dans l'adaptation d'écran

Pourquoi l'adaptation à l'écran

Au cours du processus de développement, nous devons toujours réfléchir à la manière de nous adapter aux différents écrans. Mais avez-vous déjà pensé à la raison pour laquelle nous devons adapter l'écran ? Pourquoi avons-nous besoin d'autant de solutions d'adaptation d'écran ?

Redécouvrir les pixels

Vous devez avoir entendu parler du pixel, qui est l'unité de base de l'affichage. Ce que nous utilisons, pxce sont des pixels. Alors il y a un problème ici. Si nous utilisons des pixels pour représenter la taille de l'interface utilisateur, 10px représente 10 pixels sur n'importe quel écran. N'est-ce pas correct ? Pourquoi s'adapter à différents écrans ?

En effet, les pixels n'ont pas de taille physique. En termes simples, un écran de 1 cm peut avoir 10 pixels ou 100 pixels. Généralement, nous utilisons ppi pour exprimer le nombre de pixels par pouce.

Comme le montre la figure ci-dessous, si des pixels sont utilisés pour l'adaptation, lorsque le nombre de pixels par unité de longueur d'un écran de même taille est différent, cela entraînera des problèmes de tailles différentes.

Alors pourquoi le pixel n'a-t-il pas une taille fixe ? Parce que différentes exigences d'écran sont différentes, par exemple, la résolution des téléphones mobiles et des ordinateurs portables a une résolution de 1080 * 1920, mais les tailles d'écran des téléphones mobiles et des ordinateurs portables sont différentes.

Quand il s'agit de PPI (pixels par pouce), vous devez mentionner DPI (points par pouce). Comme le montre le nom anglais, PPI fait référence aux pixels par pouce et DPI fait référence aux points d'encre par pouce. Il a d'abord été utilisé dans l'industrie de l'imprimerie, puis étendu aux ordinateurs, qui est le concept de PPI. À l'heure actuelle, PPI et DPI sont souvent utilisés ensemble et peuvent être considérés comme une seule et même chose. Pour plus de détails, veuillez consulter cette réponse de stackoverflow Quelle est la différence entre ppi et dpi ?

utiliser des pixels indépendants de la densité

Nous avons mentionné ci-dessus qu'en raison du nombre différent de pixels par unité de longueur, il n'est pas possible d'utiliser des pixels pour s'adapter à l'écran. À ce moment-là, nous penserons que si le système nous aide automatiquement à nous adapter à la différence de nombre de pixels par unité de longueur, cela ne suffira-t-il pas ?

Dans Android, Google fournit dp (pixel indépendant de la densité, c'est-à-dire pixel indépendant de la densité, également appelé dip) pour réaliser cette fonction ; dans ios, il utilise pt (pixel indépendant). Remarque : ces deux mots ont la même signification, mais ils sont appelés différemment.

Supposons que nous dessinons un carré 3dp * 3dp, dans un écran 1PPI , la taille du carré est de 3px * 3px ; et dans un écran 2PPI , la taille du carré devient 6px * 6px. L'effet est comme indiqué dans la figure ci-dessous, nous pouvons voir qu'après avoir utilisé dp, les performances sur les écrans avec différents PPI sont cohérentes.

La solution ci-dessus résout parfaitement le problème du PPI, mais peut-elle être adaptée à tous les écrans ? La réponse est bien sûr non, car la taille du brouillon de conception est fixe . Généralement, le brouillon de conception donné par le concepteur est de 360 ​​dp * 640 dp, mais la taille réelle de l'écran est plus que cela. Par exemple, le modèle Android One est
de 320 dp * 569 dp, tandis que le modèle Google Pixel est de 411 dp * 731 dp.

Supposons que nous devions implémenter une interface utilisateur pour envoyer des messages (une zone de saisie et un bouton d'envoi). Si l'interface utilisateur est placée conformément au projet de conception, il est normal sur un modèle avec la même taille de dp que le projet de conception, mais sur un modèle avec une taille de dp différente Ci-dessus, il y a un problème de performances. Comme le montre la figure ci-dessous, si la taille dp de l'écran est plus petite que le brouillon de conception (320dp * 569dp ici), le bouton d'envoi ne s'affichera pas complètement ; si la taille de dp de l'écran est plus grande que le brouillon de conception (411dp * 731dp ici ), l'espace supplémentaire sera libéré. C'est pourquoi dans le développement d'une interface Android, nous devons généralement définir une largeur maximale et une largeur minimale.

Rapport d'utilisation

Comme mentionné ci-dessus, même si les contrôles de l'interface utilisateur sont adaptés à la même taille, dans le cas de différentes tailles d'écran, il y aura des problèmes que les contrôles de l'interface utilisateur ne s'affichent pas complètement ou que le rapport d'affichage soit différent du brouillon de conception.

Puisqu'il est inutile d'adapter les contrôles de l'UI à la même taille, on les adapte simplement en fonction du rapport des contrôles de l'UI à la taille de l'écran. Il existe deux méthodes, l'une consiste à adapter en fonction du rapport des bilatéraux (longueur et largeur), l'autre consiste à adapter en fonction du rapport des unilatérales (longueur ou largeur).

adaptation bilatérale

Voici toujours l'interface utilisateur ci-dessus pour l'envoi de messages comme exemple. D'après la figure, nous savons que le rapport de longueur de la zone de saisie est de 13/20 et le rapport de largeur est de 1/18 ; le rapport de longueur du bouton d'envoi est de 1/5 et le rapport de largeur est de 1/18. la même conversion de rapport, L'effet est montré dans la figure ci-dessous:

la solution selon l'échelle semble résoudre le problème. Mais cela ne fonctionne que si le format d'image est fixe (ici 16:9). Si vous dessinez des carrés et des cercles sur des écrans avec des formats d'image différents, tels que des écrans 16:9 et des écrans 20:9 , des problèmes d'étirement se produiront. L'effet est le suivant :

Adaptation unilatérale

Étant donné que l'adaptation bilatérale n'est pas possible, elle doit être adaptée proportionnellement à la largeur, et la hauteur de l'UI est obtenue en multipliant la proportion du projet de conception par la largeur de l'UI actuelle. De cette manière, la largeur de la commande UI peut être garantie, et le format d'image de la commande UI reste inchangé. L'adaptation avec un ratio élevé est similaire à un ratio large, donc je n'entrerai pas dans les détails ci-dessous.

Comme le montre la figure ci-dessus, lors de l'utilisation de l'adaptation unilatérale, le contrôle de l'interface utilisateur peut être mis à l'échelle en fonction de la largeur d'écran actuelle lorsque la largeur d'écran est différente ; lorsque le rapport d'écran est différent, l'écran actuel peut être calculé en fonction du rapport de la brouillon de conception La hauteur du contrôle inférieur de l'interface utilisateur.

Il semble que s'adapter à un côté est une solution parfaite. Mais si vous souhaitez afficher en plein écran, cette solution ne fonctionnera pas. Comme le montre la figure ci-dessous, l'effet de l'utilisation de l'adaptation unilatérale sur différents écrans.

Si vous regardez attentivement, nous constaterons que si vous utilisez l'adaptation bilatérale dans l'image ci-dessus, il n'y a pas de problème. À partir de là, nous pouvons constater qu'en fait, le schéma d'adaptation doit être sélectionné en fonction de ses propres besoins , c'est pourquoi il existe tant de schémas d'adaptation.

Résumer

L'article précédent a présenté en détail les lacunes de l'adaptation des pixels, des pixels indépendants de la densité et du rapport, et a expliqué pourquoi nous devrions envisager l'adaptation de l'écran et les raisons des divers schémas d'adaptation.

Il convient de noter que ce qui précède ne traite que de l'écran du téléphone mobile. En fait, il existe en réalité des tablettes, des ordinateurs portables, des montres intelligentes, des téléviseurs, etc. L'adaptation parfaite à l'écran est bien plus compliquée qu'on ne l'imaginait. Au travail, nous n'avons pas besoin de tant réfléchir, nous devons juste choisir la solution d'adaptation appropriée en fonction de nos propres besoins.

référence

• Densité d'écran Android dpi vs ppi
• Guide du concepteur sur DPI
• Quelle est la différence entre ppi et dpi ?
• Site Web de requête de taille d'écran