Share
Parfois, quelques lignes de code suffisent pour faire apparaître votre interface. Ce tutoriel vous apprendra cinq astuces simples pour créer des boutons UI élégants afin de rendre votre application remarquable.!
Certains aspects des applications ou techniques utilisées dans ce tutoriel ont changé depuis sa publication initiale. Cela pourrait le rendre un peu difficile à suivre. Nous vous recommandons de consulter ces didacticiels plus récents sur le même sujet:
Dans le téléchargement qui accompagne ce didacticiel, vous trouverez des dossiers intitulés "Initial Build" et "Final Build". Plutôt que de montrer toutes les étapes nécessaires à la configuration du projet initial, vous devez simplement télécharger la pièce jointe et suivre en utilisant le projet à partir du dossier "Initial Build".
Avec le projet initial ouvert, allez à la ViewController.m déposer et localiser le pour boucle dans le viewDidLoad méthode. Les extraits de code des conseils ci-dessous doivent être placés dans cette boucle.
L’étape la plus fondamentale vers la personnalisation de la UIButton class consiste à ajuster la couleur de l’arrière-plan et du titre pour les états par défaut et en surbrillance. L'extrait de code suivant définit la couleur d'arrière-plan de chaque bouton en noir, la couleur du titre normal en blanc et la couleur de titre en surbrillance en rouge:
// Définit le bouton Couleur du texte [btn setTitleColor: [UIColor whiteColor] pourState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] pourState: UIControlStateHighlighted]; // Définit le bouton Couleur de fond [btn setBackgroundColor: [UIColor blackColor]];
Les couleurs de fond solides sont excellentes, mais un dégradé subtil peut souvent faire la différence entre fade et polie. Remplace le setBackgroundColor: message ci-dessus avec ce qui suit pour créer un dégradé personnalisé:
// Dessine un dégradé personnalisé CAGradientLayer * btnGradient = [CAGradientLayer layer]; btnGradient.frame = btn.bounds; btnGradient.colors = [tableau NSArray arrayWithObjects: (id) [[UIColor colorWithRed: 102.0f / 255.0f vert: 102.0f / 255.0f bleu: 102.0f / 255.0f alpha: 1.0f] CGColor], (id) [[UIColor colorWithRed : 51.0f / 255.0f vert: 51.0f / 255.0f bleu: 51.0f / 255.0f alpha: 1.0f] CGColor], nil]; [btn.layer insertSublayer: btnGradient atIndex: 0];
À partir de la ligne 4 ci-dessus, un NSArray est créé avec les couleurs du dégradé initial et cible. Notez que les valeurs RVB correspondantes doivent être divisées par 255 avant d’être fournies au colorWithRed: vert: bleu: alpha: message et qu'une valeur alpha de 1,0 représente totalement opaque tandis qu'une valeur alpha de 0.0 représente totalement transparent. Malheureusement, une explication complète de la "magie" ci-dessus dépasse le cadre de ce didacticiel, mais il est important de vous rappeler que vous devez simplement remplacer les valeurs RVB par les valeurs de début / fin que vous souhaitez utiliser dans votre configuration personnalisée. pente.
Si tout s'est bien passé, votre menu devrait maintenant ressembler à ceci:
Pas mal, hein? Et nous ne faisons que commencer…
Ensuite, nous voulons ajouter un rayon de coin personnalisé à chaque UIButton afin de rendre les choses un peu plus élégant. Insérez les lignes de code suivantes pour que cela se produise:
// Coins des boutons ronds CALayer * btnLayer = [btn layer]; [btnLayer setMasksToBounds: YES]; [btnLayer setCornerRadius: 5.0f];
Dans la ligne 4 ci-dessus, le rayon de coin est défini sur 5.0. Jouez avec ce chiffre pour augmenter ou diminuer la visibilité des coins.
Vous devriez maintenant avoir un menu qui a l'air un peu plus glissant:
Parfois, les petites modifications font toute la différence. Ajoutez un trait noir de 1px autour de chaque bouton avec les lignes de code suivantes:
// applique une bordure noire de 1 pixel [btnLayer setBorderWidth: 1.0f]; [btnLayer setBorderColor: [[UIColor blackColor] CGColor]];
Pouvez-vous faire la différence? C'est très subtil, mais toujours précieux:
Essayons maintenant un ajustement plus remarquable. La police système par défaut ne la coupe pas. Le menu de jeu que nous construisons nécessite une police pouvant correspondre à l'esthétique visuelle du jeu. Une recherche rapide sur Google Fonts révèle une police appelée Knewave de Tyler Finck qui devrait faire l'affaire. Télécharger maintenant Knewave.
Après avoir téléchargé le Knewave-Regular.ttf fichier, vous devez le faire glisser dans la sous-fenêtre Navigateur de projet de Xcode pour l’ajouter à votre projet. Ensuite, ouvrez le Info.plist fichier. Ajoutez une nouvelle ligne à la liste des propriétés et tapez "Polices fournies par l'application". Un tableau doit être créé automatiquement. Définissez la chaîne associée à l'élément 0 sur "Knewave-Regular.ttf". Revérifiez le nom car la valeur est sensible à la casse. Sauvegarder le fichier.
Après avoir apporté la modification ci-dessus, votre fichier Info.plist devrait maintenant ressembler à ceci:
Ensuite, vous devrez ajouter le Knewave-Regular.ttf déposer dans les ressources groupées de votre projet. Sélectionnez "SleekButtons" dans le navigateur de projet, puis cliquez sur l'onglet "Build Phases". Développez le menu déroulant "Copier les ressources de l'ensemble", puis cliquez sur le signe plus..
À ce stade, vous devriez pouvoir commencer à utiliser la police Knewave dans votre projet! Testons cela en revenant à la ViewController.m déposer et modifier le viewDidLoad méthode pour définir une police personnalisée:
// Définit le bouton Couleur du texte [btn setTitleColor: [UIColor whiteColor] pourState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] pourState: UIControlStateHighlighted]; // Ajouter une police personnalisée [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" size: 18.0f]]; // Dessine un dégradé personnalisé CAGradientLayer * btnGradient = [CAGradientLayer layer]; btnGradient.frame = btn.bounds;
Notez que le fontWithName la valeur est spécifiée en tant que "Knewave" et non pas "Knewave-Regular" comme vous pouvez vous y attendre. En effet, il existe une différence entre le nom de fichier de la police et le nom donné à la police. Vous devez vous assurer d'utiliser le nom indiqué lorsque vous utilisez vos propres polices..
Avec le code ci-dessus en place, le menu du jeu devrait être complet! Générez et exécutez maintenant et vous devriez voir quelque chose comme:
Bien que non utilisé dans la conception principale présentée dans ce tutoriel, il est souvent utile d’appliquer une légère rotation aux éléments UIKit, en particulier UIButton ou UIImage objets. Cela est simple et peut être fait avec une seule ligne de code.
Vous pouvez essayer ceci avec le code écrit jusqu'à présent en procédant comme suit:
self.startGameButton.transform = CGAffineTransformMakeRotation (M_PI / 180 * 5.0f); for (UIButton * btn in button) // Définit le bouton Text Color [btn setTitleColor: [UIColor whiteColor] pourState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] pourState: UIControlStateHighlighted];
En ligne 1 ci-dessus, la constante M_PI est divisé par 180 pour générer 1 radian, qui est ensuite multiplié par 5,0f pour obtenir une rotation de 5 radians. Comme vous le constaterez si vous générez et exécutez le projet, les problèmes ci-dessus risquent d'entraîner des problèmes d'anticrénelage avec des éléments UIKit dessinés dynamiquement. Par conséquent, appliquer une rotation est plus approprié avec un UIButton lorsque la propriété image d'arrière-plan est définie et que les graphiques raster sont utilisés (c'est-à-dire que cela fonctionne mieux avec les fichiers PNG).
Les cinq conseils ci-dessus vous ont montré à quel point il peut être facile d’apporter des modifications subtiles mais significatives à une UIButton objet. Cependant, si je vous disais que cela pourrait être encore plus facile? Rencontrer UIButton-Glossy, George McMullen, une catégorie open-source qui applique automatiquement un dégradé et une finition brillante à UIButton objets.
Exécution UIButton-Glossy dans votre propre projet est simple. Après avoir téléchargé le UIButton-Glossy.h et UIButton-Glossy.m fichiers et les ajouter à votre projet Xcode, importez le fichier * .h dans le contrôleur de vue du projet principal, comme suit:
#import "ViewController.h" #import "UIButton + Glossy.h"
Vous pouvez maintenant appliquer instantanément un effet brillant brillant sur vos boutons avec une seule ligne de code: [btn makeGlossy];.
Pour voir cela en action, remplacez le code du contrôleur de vue existant par ce qui suit:
for (UIButton * btn in button) // Définit le bouton Text Color [btn setTitleColor: [UIColor whiteColor] pourState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] pourState: UIControlStateHighlighted]; // Définition de la couleur d'arrière-plan par défaut [btn setBackgroundColor: [UIColor blackColor]]; // Ajouter une police personnalisée [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" size: 18.0f]]; // Make glossy [btn makeGlossy];
Vos boutons devraient maintenant avoir une finition brillante et le résultat final devrait ressembler à ceci:
Ce didacticiel a présenté plusieurs techniques permettant de personnaliser UIButton les objets brillent. Téléchargez le projet ci-joint pour un aperçu complet du code source final.
Des questions? Commentaires? Sonnez ci-dessous ou envoyez-moi un message directement à @markhammonds.
Accentsconagua