web-dev-qa-db-fra.com

Mettre à l'échelle l'étiquette du texte en fonction de la taille de l'écran

Existe-t-il un moyen de redimensionner le texte de sorte qu'il occupe presque le même écran, quelle que soit la taille de l'appareil? J'ai constaté que le texte sur un périphérique de taille iPad est trop petit par rapport à la taille de l'écran par rapport à l'iPhone. Vous trouverez ci-dessous un exemple de ce que je recherche. Notez que la taille du pourcentage de texte est similaire à celle de l'écran du périphérique.

Exemple

enter image description hereenter image description here

20
Jeffrey

Pour définir des contraintes sur l'étiquette que vous avez, voir ce lien: Comment créer une image d'arrière-plan à l'échelle de la taille de l'écran en mode rapide? . Je sais que vous n'utilisez peut-être pas Swift (j'utilise Objective-C), mais la première réponse montre comment le faire dans le scénarimage. Faites la même chose que ça dit, mais pour l'étiquette. Ensuite, consultez l'image ci-dessous pour modifier les options de réduction automatique de l'étiquette de "Taille de police fixe" à "Echelle de police minimale" (voir l'image ci-dessous). J'espère que cela t'aides!

Changing Font Size

24

J'avais mon propre correctif et ce n'est pas un clic, mais je l'ai trouvé bien en vaut la peine.

Étape 1:

Testez certaines tailles de police pour différentes tailles d'écran, enregistrement de la police taille et de la plus autre autre dimension.

Voici ce que je veux dire ... 

Je commencerais par un écran iPad normal et choisirais une taille de police qui fonctionnerait.

 enter image description here

Puisque je savais que toute la hauteur de l’écran déterminerait ce qui rend une taille de police confortable ou non, j’enregistrais la taille de la police avec toute la hauteur de l’écran.

 enter image description here

La taille de la police était donc 50 avec une hauteur de 1024.

Ensuite, je suis passé à l'iPhone SE

 enter image description here  enter image description here

C'était assez atroce, alors j'ai corrigé la taille de la police:

 enter image description here

Après l’enregistrement, la taille de la police a fonctionné à 25 avec une hauteur de 568.

Étape 2:

Effacez l'application pour calculatrice et trouvez une constante qui relie les tailles de police aux hauteurs (dans mon cas), en donnant ou en prenant un peu.

Voici ce que je veux dire:

Je connaissais 50 œuvres avec 1024 et que 25 œuvres avec 568.

La division 50/1024 vous donne 0,048828125. 

Multiplier cela par 568 équivaut à 27.734375, ce qui serait un peu gras d'une taille de police pour la SE.

Répéter ce processus, mais en utilisant les valeurs du SE pour effectuer la division, a généré .0440140845 et en vérifiant que, avec la hauteur de l'iPad, la taille de la police était de 45, un peu petite pour le puissant écran de l'iPad.

J'ai donc divisé les quotients au milieu, ce qui a donné un nombre autour de 0,46. 

Étape 3:

Connectez les étiquettes et changez leurs tailles de police par programme en utilisant ce numéro.

Tout d’abord, faites glisser les étiquettes dans une collection de magasins. J'ai nommé ma connexion 'headerLabels' car elles sont toutes en haut de l'écran.

 enter image description here

Ensuite, vous pouvez voler mon code, mais ne gagnez pas trop d'argent avec lui;)

// Outlet collection of labels
@IBOutlet var headerLabels: [UILabel]!

// Who needs a short variable name when we can have a 
// painfully lengthy one to describe the number we calculated?
let relativeFontConstant:CGFloat = 0.046

override func viewDidLoad() {
    super.viewDidLoad()

    // Should be in the viewDidLoad so it can load the same time as
    // the view does.

    // apply a font size to all the labels.
    for label in headerLabels {
        // multiply the height we based it on of the entire view 
        // to the number we calculated
        label.font = label.font.withSize(self.view.frame.height * relativeFontConstant)
    }
}

Si vous avez des questions, des commentaires, des compliments ou des insultes, faites le moi savoir :)

7
bearacuda13

J'avais le même problème pour lequel le texte devait être mis à l'échelle proportionnellement à l'augmentation de la taille de l'écran.

Le dimensionnement adaptatif est assez limité car vous ne pouvez définir le dimensionnement de la police que pour les classes de taille. Avoir les tailles de police pour deux options de largeur, compacte et régulière n'était pas une solution pour moi.

J'ai écrit une petite bibliothèque qui gère la mise à l'échelle automatique des polices pour UILabel et UITextView pour différentes tailles d'écran.

Vous pouvez définir la mise à l'échelle globalement ou pour une instance spécifique de UILabel et UITextView.

Trouvez-le ici: AMXFontAutoScale

5
Alex Maimescu

différentes tailles d'écran selon 

// iphone 5s,SE screen width 320
// iphone 6,6s,7,etc width 375
// iphone 7 plus, 8 plus, xs max,etc width 414
if (self.view.frame.width == 320) {

    label.font = UIFont(name: label.font.fontName, size: 16)

} else if (self.view.frame.width == 375) {

    label.font = UIFont(name: label.font.fontName, size: 21)

} else if (self.view.frame.width == 414) {

    label.font = UIFont(name: label.font.fontName, size: 24)

}
1
M Naveed Ashfaq

Il existe une contrainte de format d'image. Ajoutez ceci à votre étiquette. Les contraintes imposées aux marges gauche et supérieure pour ancrer l'étiquette sur place devraient faire taire les avertissements du compilateur. 

Comme @VatsalManot l'a mentionné, apprenez le dimensionnement adaptatif pour commencer. Voici un bon lien:

http://www.raywenderlich.com/83276/beginning-adaptive-layout-tutorial

J'espère que cela t'aides! :)

1
GoGreen

1. Sélectionnez votre étiquette et ouvrez l'inspecteur d'attributs correspondant Select the UI (button, label etc)

2. Cliquez sur le signe + par police, sélectionnez largeur et hauteur en "Normal", cliquez sur Ajouter une variante click on + icon on side of font, select width and height regular

3. Un autre champ Police apparaîtra, il représentera la police pour ipad/grand écran/illusion de grand écran (affichage par défilement)}

 another font field will appear, this is for big screen (ipad or illusion of big screen by scroll view etc)

_ {4. Sélectionnez la police souhaitée pour ipad} _

 select the desired size and font you want to show on ipad

1
Kamran Bashir

J'ai eu un comportement décent avec le code suivant dans ma fonction viewDidLoad:

(Notez que les limites de l'écran sont en "points" et non en "pixels")

    // Set the clock font size according to the height.
    //  Design was done on iPhone XR with height of 896 points and font size of 98.
    if (UIScreen.main.bounds.height != 896). // Only need code if not on original design size.
    {
        let scaleFactor: Float = Float(UIScreen.main.bounds.height) / 896.0
        let fontSize = CGFloat(98.0 * scaleFactor)
        self.clock.font = self.clock.font.withSize(fontSize)
    }

Cela utilisait la police "Helvetica Neue" qui est une police à largeur fixe. Pour une raison quelconque, il n’a pas été complètement mis à l’échelle sur des appareils plus grands, donc un peu plus petit que la cible sur les iPad, mais suffisamment proche.

0
Dave Hubbard