Contexte et courte histoire sur ce sujet

En tant que débutants dans l'apprentissage du développement d'applications iOS, nous devons connaître ou apprendre à créer des vues à l'aide de storyboards et de mises en page automatiques. La première fois que j'ai appris à créer une application iOS, j'ai appris à utiliser des storyboards, notamment en définissant les dispositions des composants dans la vue. Cependant, il faut savoir que l'utilisation de storyboards est très inefficace à mettre en place dans des projets assez gros, surtout si le travail se fait en équipe. En utilisant le storyboard, il nous sera difficile de fusionner et de résoudre les conflits lors de la collaboration, difficile de naviguer, difficile de refactoriser le code, et bien d'autres.

J'ai finalement décidé d'apprendre comment créer une interface utilisateur par programmation en utilisant UIKit lorsque je travaillais sur mon projet et cela s'est avéré beaucoup plus facile en termes de collaboration. Pour cette raison, j'ai exploré plusieurs choses, y compris apprendre à déclarer un composant, ajuster le composant, le placer dans une vue selon les besoins, et également ajuster la disposition de divers composants dans une vue.

D'après ce que j'ai exploré, il y a diverses leçons que j'ai apprises mais il y a 2 choses qui semblent simples mais très utiles, y compris celles liées aux paramètres qui ont réellement besoin de créer une étiquette qui peut avoir des retours à la ligne automatiquement selon le contenu et aussi sur le fait qu'il existe de nombreuses façons de définir la disposition d'un composant dans la vue, mais jusqu'à présent, pour moi, le moyen le plus simple que j'ai jamais essayé d'implémenter consiste à utiliser la bibliothèque SnapKit.

Pour cela, je veux ici partager la manière de faire cela en l'expliquant à travers la mise en œuvre que j'ai faite sur le projet de mon équipe.

À propos du projet de mon équipe

Voici donc l'application que mon équipe et moi avons créée, appelée "Healo".
Healo est une application iOS de chat anonyme qui relie les personnes qui tentent de guérir des blessures parentales (appelées en tant que Seeker) à quelqu'un qui peut écouter les histoires qu'ils partagent et leur rappeler de rester motivés à faire de l'auto-reparenting (appelé en tant qu'auditeur ).

Lorsque nous voulons être un auditeur, il existe des pages d'évaluation qui contiennent des explications sur certains sujets ainsi que les questions auxquelles ils doivent répondre et ils doivent réussir le test pour s'assurer qu'ils peuvent être acceptés pour utiliser les applications.

En fait, nous n'avons besoin de créer qu'une seule page d'évaluation, mais le contenu de l'étiquette sur cette page affichera divers textes et sera également différent selon le numéro de la question. Cette description et cette question elle-même sont extraites de la base de données et ne sont pas directement écrites et stockées dans le projet Xcode. Par conséquent, bien sûr, le contenu du texte et le nombre de mots varieront également.

En fait, nous pouvons rendre notre apparence soignée sans avoir à effectuer certains réglages dans la vue. Nous pouvons le faire en le configurant sur les données textuelles que nous récupérons de la base de données en ajoutant \n pour certains textes qui doivent être sur une nouvelle ligne, par exemple comme "Bonjour, \nJ'adore la programmation". Mais c'est très gênant s'il y a beaucoup de texte qui nécessite ces ajouts et que nous devons toujours le faire manuellement.

Pour cela je vais vous montrer comment je fais des réglages sur l'étiquette de description pour que peu importe la longueur du contenu que l'on tire de la base de données, il y aura une nouvelle ligne ajoutée automatiquement si la longueur du texte a dépassé les contraintes de la vue d'étiquette qui a été définie à l'aide de SnapKit.

Mise en œuvre sur le projet

Pour utiliser la bibliothèque SnapKit, avant de commencer à travailler sur le projet, assurez-vous d'avoir installé CocoaPods. ( Voici un guide pour installer CocoaPods. )

Après avoir déjà installé CocoaPod, voici étape par étape comment installer SnapKit :
1. Nous devons aller dans notre dossier de projet Xcode et ouvrir le terminal à partir de là (clic droit + choisir "Nouveau terminal dans le dossier").
2. Une fois le terminal ouvert, nous tapons "pod init" et cela créera un nouveau fichier pod dans notre dossier.

3. Ouvrez ce Podfile et tapez ceci :

Ensuite, enregistrez le Podfile

4. Revenez au terminal et tapez "pod install". S'il n'y a pas d'erreur, cela signifie que SnapKit a été installé avec succès.

5. Ouvrez le fichier Xcworkspace et commencez à y coder.

Vous pouvez également lire plus d'explications sur l'installation de SnapKit ici .

Je suppose que vous connaissez déjà la configuration nécessaire pour créer toute l'interface utilisateur par programmation. Si oui, commençons tout de suite.

Tout d'abord , pour vous assurer que vous pourrez utiliser SnapKit pour la mise en page ultérieurement, vous devez importer cette bibliothèque dans le fichier que vous souhaitez utiliser.

Deuxièmement , nous avons juste besoin de déclarer notre étiquette à l'intérieur de la classe de notre contrôleur de vue (pour ce projet, je crée toujours des vues à l'intérieur des contrôleurs de vue et non dans des fichiers séparés spécifiquement dédiés à chaque vue). Lors de la déclaration de l'étiquette, la chose la plus importante à ne pas oublier est d'ajouter label.numberOfLines = 0 et label.lineBreakMode = .byWordWrapping.

A quoi servent ces choses en fait ?

D'après ce que j'ai lu sur la documentation Apple, voici ce que je peux partager :

Le nombre de lignes est en fait utilisé pour contrôler le nombre maximum de lignes à utiliser pour ajuster le texte de l'étiquette dans son rectangle de délimitation. Si nous définissons la valeur sur 0, cela signifie qu'il n'y a pas de limite de lignes et que nous pouvons l'utiliser autant de lignes que nécessaire en fonction du contenu du texte.

Le mode saut de ligne est en fait utilisé pour envelopper et tronquer le texte de l'étiquette. Certains modes sont disponibles, mais le mode le plus fréquemment utilisé est NSLineBreakMode.byWordWrapping. Si nous utilisons ce mode, le mot suivant sera coupé / déplacé vers une nouvelle ligne si le mot ne tient pas sur 1 ligne.

Vous pouvez en savoir plus à ce sujet sur la documentation des développeurs Apple : explication du nombre de lignes et explication du mode de saut de ligne .

Ensuite, nous pouvons créer 3 fonctions telles que setupData, setupView et setupLayout. Voici ce qu'il y a à l'intérieur de chaque fonction (je ne montre pas en détail, je montre juste ce qui est pertinent):

1. Fonction setupData :

2. Fonction setupView :

Dans cette fonction, nous pouvons définir la couleur d'arrière-plan de la vue et nous devons également ajouter notre étiquette de description à la vue pour nous assurer qu'elle apparaîtra sur notre vue.

3. Fonction setupLayout :

Dans cette fonction, nous pouvons définir la disposition de l'étiquette afin que l'étiquette soit dans la bonne position (comme ce que nous voulons).

Voici comment définir la disposition à l'aide de SnapKit :
1. Tapez le nom du composant pour lequel nous voulons définir la disposition. Dans ce cas, je veux donner la mise en page sur mon étiquette topicDesc. Voici le code :

}

2. Notez toutes les contraintes que nous voulons. Dans ce cas, je veux que la position de l'étiquette topicDesc soit en dessous du topicTitle (avec une distance de 21 pixels du titre du sujet inférieur). Voici le code :

topicDesc.snp.makeConstraints { créer dans
make.top.equalTo(topicTitle.snp.bottom).offset(21)
}

Je souhaite également que la position de l'étiquette topicDesc ait une distance de 27 pixels entre la gauche et la droite de superview . Voici le code :

topicDesc.snp.makeConstraints { make in
make.top.equalTo(topicTitle.snp.bottom).offset(21)
make.left.equalToSuperview().offset(27)
make.right.equalToSuperview().offset(-27)
}

Quelques conseils supplémentaires sur l'utilisation de SnapKit :

La valeur de décalage doit > 0 pour le rembourrage haut et gauche/avant.
La valeur de décalage doit < 0 pour le remplissage inférieur et droit/fin.

Nous pouvons utiliser l'encart pour le code dans une ligne si la distance est égale, par exemple :
topicDesc.snp.makeConstraints { make in
make.left.right.equalToSuperview().inset(27)
}

Enfin , nous devons appeler toutes les fonctions que nous avons déjà créées sur la vue, charger et exécuter le projet pour vérifier si tout fonctionne bien et comme souhaité.

Impressionnant! Nous avons enfin appris comment insérer automatiquement de nouvelles lignes pour une étiquette en fonction du contenu du texte et définir la mise en page à l'aide de SnapKit dans les applications iOS. L'utilisation de SnapKit lui-même m'a vraiment aidé pour la mise en page tout en travaillant sur mon projet et vous pouvez également l'essayer. Si vous êtes curieux et que vous voulez en savoir plus sur SnapKit, vous pouvez en savoir plus ici ).

Aussi, si vous êtes curieux et souhaitez en savoir plus sur le projet de mon équipe (Healo), vous pouvez tester notre application sur Testflight ( Cliquez ici pour tester notre application ).

J'espère que cet article pourra vous être utile et si c'est le cas, aidez-le à partager ce message avec vos amis ou collègues qui pourraient également le trouver utile, et n'hésitez pas à donner votre avis ou commentaire. Merci.

© 2022 Elvina Jacia. Tous les droits sont réservés.