Lorsque vous réduisez l'interface utilisateur, nous trouvons souvent un problème, selon l'esquisse réduction de la taille marquée à la conception projet de texte produira plusieurs erreurs de Px, caractère blanc et en légère baisse, de sorte que lorsque ce dernier examen de la conception souvent mise au point.

Photo ci-dessus sur les appareils Android 100px police différente de la taille réelle (includeFontPadding: false, le même ci-dessous), la hauteur réelle des polices différentes sont incompatibles.

Donc, nous devons comprendre afin de restaurer avec précision la police 1px à la fin à quelle hauteur?

FontMetrics

Dans le fichier de police TrueType, un fichier de police se définissent chacun un em-carré, qui est stocké dans le fichier TTF « tête » de la table, une valeur peut être em-carré 1000,1024 ou 2048 et similaires.

Récipient em-carré correspond sensiblement à une police de caractères, également textSize mise à l'échelle des unités relatives. caractère Âge métal ne peut pas dépasser dans le récipient, mais à l'ère numérique n'ont pas cette restriction, un caractère peut être étendu au-delà de l'em-carré, ce qui est également conçu un certain temps des polices de façon très pratique.

Après l'ascension, la descente et sont lineGap valeur équivalente relative de l'em-carré.

ascension représente un caractère unique au plus haut point de la ligne de fond de distance recommandée, descente représentent un seul caractère à la distance minimale recommandée à la valeur initiale. Hauteur des caractères est généralement déterminée par la montée et la descente, pour l'em-carré, montée et la descente, nous pouvons passer à travers l'analyse syntaxique de fichier de police fonttools.

fonttools

FootTools est un complet et facile à utiliser la bibliothèque Python police peut l'analyse syntaxique facilement TTX, TTF et d'autres documents dans le fichier de description XML dans un éditeur de texte pour ouvrir.

fonttools

installer

pip installer fonttools

transcodage

TTX Songti.ttf

Dans le répertoire courant génère un fichier Songti.ttx, nous ouvrons et la recherche de la « tête » avec un éditeur de texte après transcoder.

  < tête > < ! - La plupart de ce tableau seront recalculés par le compilateur - > < tableVersion value = "1.0" / > < fontRevision value = "1.0" / > < checkSumAdjustment value = "0x7550297b" / > < MagicNumber value = "0x5f0f3cf5" / > < valeur flags = "0000000000001011" / > < unitsPerEm value = "1000" / > < valeur créée = "11 novembre jeu 14:47:271999" / > < valeur modifiée = "14 Mar 201703:02:03 novembre" / > < valeur xMin = "- 99" / > < yMin valeur = "- 150" / > < xMax value = "1032" / > < yMax value = "860" / > < macStyle value = "0000000000000000" / > < lowestRecPPEM value = "12" / > < fontDirectionHint value = "1" / > < indexToLocFormat value = "1" / > < glyphDataFormat value = "0" / > < / Head >

UnitsPerEm qui représenterait l'em-carré, est de 1000. Sur les systèmes Windows, Montée et descente et usWinDescent déterminées par la table usWinAscent « OS_2 ». Cependant, MacOS, iOS et Android dans, est déterminée Descente Ascent par la montée de la table 'hhea' et descente.

  < hhea > < tableVersion value = "0x00010000" / > < valeur ascendante = "1060" / > < valeur de descente = "- 340" / > < lineGap value = "0" / > < advanceWidthMax value = "1000" / > < valeur minLeftSideBearing = "- 99" / > < valeur minRightSideBearing = "- 50" / > < xMaxExtent value = "1032" / > < caretSlopeRise value = "1" / > < caretSlopeRun value = "0" / > < caretOffset value = "0" / > < Reserved0 value = "0" / > < reserved1 value = "0" / > < Reserved2 value = "0" / > < Reserved3 value = "0" / > < La valeur de metricDataFormat = "0" / > < numberOfHMetrics value = "1236" / > < / Hhea >

Montée et descente à valeur BASELine l'origine des coordonnées, selon les trois valeurs, nous pouvons calculer la hauteur de la police.

TextHeight = (Montée - Descente) / EM-Square * TextSize LineHeight = (Montée - Descente + LineGap) / EM-Square * TextSize

Sur la table, nous savons Arial - ascension conventionnelle à 1060, descente vers -340.

TextSize à 100Pixcel Times New hauteur de caractère régulier romain hauteur = (1060 - (-340)) / 1000 * 100 = 140px

Donc, pour Times New Roman, mot 1px hauteur 1.4Px.

police commune LineGap général sont 0, il est généralement lineHeight = textHeight.

paramètres de police commune

iOS police par défaut -

  < unitsPerEm value = "2048" / > < valeur ascendante = "1950" / > < valeur de descente = "- 494" / > < lineGap value = "0" / > TextHeight = 1,193359375 TextSize

police par défaut Android -

  < unitsPerEm value = "2048" / > < valeur ascendante = "1900" / > < valeur de descente = "- 500" / > < lineGap value = "0" / > < yMax value = "2163" / > < valeur yMin = "- 555" / > TextHeight = 1.17187502 TextSize

adaptation UI erreurs

Comme illustration de la conception figure Sketch, police 28px, boîte police lettre à domicile est 32px, si une interface utilisateur pour restaurer dans ces paramètres à l'appareil par défaut Android comme un exemple, l'arrière-plan périphérique sera plus élevé que les 28 d'origine * (1,17 --1) = 4,76 pixels (applications IncludeFontPadding = false).

En effet, le projet de conception du chapiteau lineHeight = textSize, ce n'est pas vrai dans les polices générales! Une partie du texte peut ne pas tenir ou provoquent des parties supérieure et extrémité inférieure des deux lignes de texte superposées. De même, à la hauteur du mot à venir TextSize ce n'est pas correct! Lorsque le texte de chapiteau ne peut pas chinois juste assez de tente, en effet, une telle zone d'entrée d'approche d'un « j » sera au-delà de la boîte, mais montrer encore.

approche LineHeight correcte doit être réglée sur 28 * 1,17 = 33, puis mesurer les marges supérieure et inférieure.

Comme on le voit, le texte de la position réelle ne change pas, mais le texte lineHeight plus, et les marges inférieures correspondantes de réduction 29px et 30px.

Pour le projet de conception de LineHeight >  Un cas dans lequel la hauteur réelle de la police de caractères (par exemple, 1,17 * textSize), on peut définir linespace = lineHeight - 1,17 textSize de reproduire avec précision l'espacement entre les lignes.

Conclusion: la réduction de la police de l'interface est pas en place il y a une incompréhension générale de la hauteur de la police à comprendre, en fait la police 1px dans le client n'a généralement pas égal 1px, et est égal à 1,19 (iOS) ou 1,17 (Android) Apx.

Android IncludeFontPadding

 / ** * Définir si le TextView comprend le dessus supplémentaire et rembourrage bas pour faire * Chambre des accents qui vont au-dessus de l'ascension normale et descente. * La valeur par défaut est vrai. * * @See #getIncludeFontPadding () * * @Attr ref android.R.styleable # TextView_includeFontPadding * / setIncludeFontPadding public void (includepad de booléen) { si (mIncludePad! = includepad) { mIncludePad = includepad; si (mLayout! = null) { nullLayouts (); requestLayout (); invalider (); } } }

Android TextView par défaut IncludeFontPadding est activée, il laissera plus d'espace au bas de chaque mot de la ligne.

 si (getIncludeFontPadding ()) { fontMetricsTop = fontMetrics.top; } Else { fontMetricsTop = fontMetrics.ascent; } si (getIncludeFontPadding ()) { fontMetricsBottom = fontMetrics.bottom; } Else { fontMetricsBottom = fontMetrics.descent; }

Nous avons trouvé la source Textview, lorsque seule la IncludeFontPadding = false, calculé avant la intégré textHeight avec iOS extrémité distale. Par défaut situation réelle sélectionnera le haut et le bas, ces deux valeurs seront généralement supérieures à la montée et la descente, mais pas absolue, dans certaines polices seront inférieures à la montée et la descente.

 FontMetrics de classe {public static / ** * La distance maximale au-dessus de la ligne de base pour le plus grand glyphe * La police à une taille de texte donné. * / dessus du flottant; / ** * La distance recommandée au-dessus de la ligne de base pour le texte espacé du doigt. * / montée du flottant; / ** * La distance recommandée en dessous de la ligne de base pour le texte espacé du doigt. * / descente du flottant; / ** * La distance maximale en dessous de la ligne de base pour le plus bas glyphe * La police à une taille de texte donné. * / fond flottant; / ** * L'espace supplémentaire recommandé d'ajouter entre les lignes de texte. * / flottant leader; }

Pour le haut et le bas, ces deux valeurs ne sont pas le même nom dans les attributs de police CTT / TTF, Android doit être un nom unique. Nous pouvons trouver des moyens (getFontMetrics) Obtient les FontMetrics être traçable.

 getFontMetrics de fonds public (métriques de FontMetrics) { nGetFontMetrics de retour (mNativePaint, métriques); } @FastNative nGetFontMetrics de private static float natifs (longue métriques paintPtr, FontMetrics);

Peindre les getFontMetrics finissent par appeler une méthode native nGetFontMetrics, atteindre nGetFontMetrics dans le code source Android du Paint_Delegate.java de classe

@LayoutlibDelegate / * Forfait * / nGetFontMetrics flotteur statique (à long nativePaint, longue nativeTypeface, métriques de FontMetrics) { // obtenir le délégué délégué Paint_Delegate = sManager.getDelegate (nativePaint); if (déléguer == NULL) { return 0; } retourner delegate.getFontMetrics (métrique); } getFontMetrics flotteur privé (métriques FontMetrics) { if (mFonts.size () >  0) { java.awt.FontMetrics javaMetrics = mFonts.get (0) .mMetrics; si (métriques! = null) { // Android attend montée négative que nous inversons la valeur de Java. metrics.top = -javaMetrics.getMaxAscent (); metrics.ascent = -javaMetrics.getAscent (); metrics.descent = javaMetrics.getDescent (); metrics.bottom = javaMetrics.getMaxDescent (); metrics.leading = javaMetrics.getLeading (); } retourner javaMetrics.getHeight (); } return 0; }

A partir du résultat effectivement atteint haut et en bas est Java FontMetrics dans MaxAscent et MaxDescent, pour les valeurs MaxAscent OpenJDK forum site officiel donne la réponse:

Idéalement JDK1.2 aurait dû utiliser la valeur de table OS / 2 pour usWinAscent, ou peut-être sTypoAscender (donc il y a au moins trois choix ici, voir pour plus d'info). Pour l'ascension max nous pourrions utiliser le champ yMax dans l'en-tête de la police. Dans la plupart des polices, je pense que cela équivaut à la valeur que nous récupérons de la table hhea, d'où l'observation que les deux méthodes renvoient l'ascension max.

Ainsi, nous pouvons savoir, Android prend la hauteur de police par défaut yMax en regardant Apple Guide police yMax nous pouvons connaître est la zone de délimitation d'une plage de caractères, de sorte que nous pouvons tirer la formule suivante:

includeFontPadding vrai défaut TextHeight = (yMax - yMin) / EM-Square * TextSize faux includeFontPadding TextHeight = (montée - descente) / EM-Square * TextSize

Android police par défaut = true roboto includeFontPadding dans le cas de défaut, textHeight = 1.32714844 textSize.

Donc, adaptateur interface utilisateur Android, si vous ne changez pas includeFontPadding, le coefficient peut être ajusté à 1,327

résumé

TextSize même police, la taille de police est déterminée par lui-même

formule des polices

TextHeight = (Montée - Descente) / EM-Square * TextSize LineHeight = (Montée - Descente + LineGap) / EM-Square * TextSize Android - includeFontPadding vrai TextHeight = (yMax - yMin) / EM-Square * TextSize

Sous le client de police par défaut, une valeur très Px est pas 1px

iOS TextHeight = 1,193359375 TextSize Android - IncludePadding: true TextHeight = 1.32714844 TextSize Android - IncludePadding: false TextHeight = 1.17187502 TextSize

[Attaché] architecture et des informations connexes

Android pour obtenir à recevoir l'architecture avancée de l'information, le code source, notes, vidéo. Interface utilisateur principale, optimisation des performances, des cours d'architecte, NDK, développement hybride (ReactNative + Weex) applet micro lettre, pratique avancée Flutter Android tous les aspects de la technologie.

Mode de réception:

Regarder + réponse privée lettre, libre accès « données Andrews »!