Share
La personnalisation du thème est un excellent moyen de se distinguer dans l'App Store, mais ce n'est pas toujours facile à réaliser. Ce tutoriel vous apprendra quelques astuces de base sur la personnalisation UIKit qui aideront à distinguer vos applications et à créer des expériences utilisateur plus mémorables..
Si vous avez déjà passé un peu de temps à fouiller dans la documentation en ligne d'Apple dans leur centre de développement iOS, vous êtes sûrement familiarisé avec les fameuses directives relatives à l'interface humaine (plus communément appelées le "HIG"). Ce document fournit aux développeurs et aux concepteurs d'applications iOS des instructions sur la manière dont les utilisateurs envisagent d'interagir avec les applications de la plate-forme iOS, des exemples d'utilisation courants et les principes généraux d'UI / UX à suivre..
Bien qu'il existe de nombreuses façons de personnaliser l'apparence de votre propre application iOS - du changement de couleurs et de tailles au déroulement de vos propres éléments d'interface utilisateur - il est considéré comme la meilleure pratique de suivre le HIG et ses suggestions pour fournir une interface concise et utilisable..
En gardant cela à l’esprit, examinons quelques façons de le faire tout en personnalisant notre interface pour s’adapter à un thème visuel plus unique..
La plupart des développeurs iOS connaissent les attributs courants de la classe UIView faciles à modifier, tels que la couleur d'arrière-plan, la taille de la police ou l'opacité. Mais parfois, modifier ces propriétés ne nous donne pas le résultat dont nous avons besoin.
Ainsi, pour démontrer davantage de techniques de personnalisation pratiques, nous allons travailler sur une simple application de visualisation de photos. Voici à quoi ressemblera l'application sans aucune personnalisation, puis avec les modifications à apporter:
Avant de commencer, vous aurez besoin de quelques images que vous pouvez télécharger ici..
De plus, j'ai configuré l'application de base que nous allons utiliser, que vous pouvez télécharger ici. Vous n'avez pas à vous soucier de tout le travail de préparation; Commençons juste à personnaliser!
Avec notre application de préparation, nous avons quelques composants de base:
Nous allons commencer par rendre notre arrière-plan plus classe en définissant une image d'arrière-plan. Pour ce faire, ajoutons une méthode dans notre classe "MTViewController" appelée "-setupUI".
Nous allons ajouter cette méthode juste en dessous de nos déclarations @synthesize.
- (void) setupUI
Nous devons maintenant ajouter notre fichier d’image d’arrière-plan à notre projet. Obtenez le fichier "BG-pattern.png" à partir des ressources que vous avez téléchargées il ya une minute à peine et faites-le glisser dans notre application. J'ai créé un nouveau groupe pour nos images d'interface utilisateur appelé "Graphiques d'interface utilisateur"..
Avec l'image en place, nous pouvons entrer dans cette méthode "setupUI", et nous n'avons besoin que d'ajouter une ligne:
[self.view setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @ "BG-pattern.png"]]];
Pour que ce changement se répète dans notre application, nous devons appeler notre méthode "setupUI" à partir de la méthode "viewDidLoad" de notre ViewController. J'ai déjà ajouté quelques appels à la méthode "viewDidLoad", nous pouvons donc simplement ajouter celui-ci au début:
- (void) viewDidLoad // configure les éléments d'interface utilisateur personnalisés [self setupUI]; // construit des tableaux pour les images et les titres [self setupData]; // démarre l'application avec le premier segment sélectionné [self didChangeSegmentControl: aSegmentControl]; [super viewDidLoad]; // Effectue toute configuration supplémentaire après le chargement de la vue, généralement à partir d'un nib.
Faisons maintenant ressortir notre image en ajoutant une bordure blanche autour d'elle. Pour ce faire, nous travaillerons avec CALayers, ce qui signifie que nous devons d’abord inclure le cadre QuartzCore dans notre projet..
Allez donc dans notre projet UIKitDemo et nous choisirons notre cible (UIKitDemo). Ensuite, nous allons passer à l'onglet "Build Phases" et afficher la section "Link Binary With Libraries".
En bas, on clique sur le bouton "+" et on choisit "QuartzCore.framework".
Enfin, nous devons #importation Quartz dans notre ViewController (MTViewController.m).
#importation
Avec Quartz en place, nous pouvons commencer à jouer avec les sous-couches anImageView. Nous allons ajouter ce qui suit à notre méthode "setupUI" pour ajouter la bordure autour de notre ImageView:
[anImageView.layer setBorderWidth: 5.0f]; [anImageView.layer setBorderColor: [[UIColor whiteColor] CGColor]];
Si nous construisons et exécutons notre application maintenant, nous pouvons voir une bordure blanche élégante autour de notre ImageView.
Maintenant, pour que notre image soit encore plus visible, nous pouvons créer une ombre subtile en utilisant des méthodes similaires:
[anImageView.layer setShadowRadius: 5.0f]; [anImageView.layer setShadowOpacity: .85f]; [anImageView.layer setShadowOffset: CGSizeMake (1.0f, 2.0f)]; [anImageView.layer setShadowColor: [[UIColor blackColor] CGColor]]; [anImageView.layer setShouldRasterize: YES]; [anImageView.layer setMasksToBounds: NO];
Certaines de ces commandes ne sont pas immédiatement évidentes quant à leur fonction, nous allons donc les examiner ligne par ligne:
[anImageView.layer setShadowRadius: 5.0f];
Nous commençons par définir la quantité de "flou" que notre ombre aura.
[anImageView.layer setShadowOffset: CGSizeMake (1.0f, 2.0f)];
Ensuite, nous créons un décalage pour notre ombre, pour que ce ne soit pas juste derrière notre image..
[anImageView.layer setShouldRasterize: YES];
Cette commande contribuera aux performances, car elle garantit que l'ombre n'est dessinée qu'une seule fois, puis enregistrée en tant que bitmap, évitant ainsi à l'application de redessiner la couche transparente gourmande en ressources processeur..
[anImageView.layer setMasksToBounds: NO];
Enfin, nous voulons nous assurer que nous ne coupons pas notre ombre, car elle s'étend au-delà des limites de notre vision d'origine..
Essayez de relancer l'application, et vous verrez une belle ombre derrière notre image..
Nous avons beaucoup de bords durs, adoucissons donc notre interface en faisant en sorte que notre UILabel (aLabel) ait des coins arrondis.
Nous pouvons le faire dans la même méthode "setupUI" sous les personnalisations UIImageView. Tout ce dont nous avons besoin est une simple ligne pour que cela fonctionne:
[aLabel.layer setCornerRadius: 15.0f];
Maintenant, la dernière modification de notre méthode "setupUI" fera pivoter légèrement notre UIImageView, ce qui rompra la sensation de "carré" du reste de la mise en page..
Nous pouvons le faire avec deux autres lignes au bas de notre méthode "setupUI":
CGAffineTransform transform = CGAffineTransformMakeRotation (.03f); anImageView.transform = transformer;
Et c'est tout pour notre "setupUI". Pas trop mal pour seulement quelques lignes de code, à droite?
Avec la sortie d'iOS 5, un nouveau protocole pour les sous-classes d'UIViews appelé "apparence". Ce protocole nous permet de modifier à volonté certains aspects de nos composants UIKit standard, tels que la définition d’images de fond personnalisées, d’ombres, d’effets de couleur, etc..
Un exemple simple est UINavigationBar. Nous pouvons maintenant configurer des images personnalisées pour que nos UINavigationBars soient adaptées aux thèmes de notre application, sans aucun problème:
[[UINavigationBar Apparence]] setBackgroundImage: navBarImage forBarMetrics: UIBarMetricsDefault];
Dans ce cas, nous avons un UIImage nommé "navBarImage", que nous définissons comme image par défaut pour notre UINavigationBar. L'appel "apparence" va affecter notre classe UINavigationBar, pas seulement une seule instance. Cela signifie que nos modifications seront appliquées à toutes les UINavigationBars que nous utilisons dans cette appli..
Pour implémenter cette modification dans notre projet de visionneuse de photos actuel, nous devons accéder à notre classe AppDelegate (MTAppDelegate). Nous allons à AppDelegate parce que nous souhaitons que nos modifications affectent toutes les instances de UINavigationBars dans notre application. Par conséquent, afin de nous assurer que nos modifications sont apportées, nous les implémenterons immédiatement après l'ouverture de l'application..
Commençons par ajouter la méthode à notre classe "MTAppDelegate" juste après notre @ synthétiser déclarations, comme nous l'avons fait dans notre classe "MTViewController":
- (void) setupUI
Maintenant, nous allons importer notre image "navBar.png" (à partir du dossier de ressources d'images que vous avez téléchargé précédemment).
Nous pouvons ensuite créer l'instance UIImage que nous utiliserons comme arrière-plan:
UIImage * navBarImage = [UIImage imageNamed: @ "navBar.png"];
Et juste après, nous pouvons appeler notre "apparence":
[[UINavigationBar Apparence]] setBackgroundImage: navBarImage forBarMetrics: UIBarMetricsDefault];
Avant que ce changement soit actif, nous devons appeler notre méthode "setupUI" à partir du application: didFinishLaunchingWithOptions: méthode.
- Application (BOOL): application (UIApplication *) application didFinishLaunchingWithOptions: (NSDictionary *) launchOptions [self setupUI];…
Vous pouvez exécuter votre application maintenant. Notez le fond sombre de notre Barre de navigation au sommet.
Pour notre prochain tour, les choses se compliquent un peu. Nous allons définir des images personnalisées pour notre UISegmentedControl. La partie délicate ici est que nous ne traitons pas seulement avec une ou deux images d’arrière-plan, mais plutôt que nous devons travailler avec des sections spécifiques d’images; telles que les extrémités arrondies, les sections du milieu sélectionnées ou non sélectionnées, la ligne de division entre deux segments, etc.
Tout d'abord, si ce n'est déjà fait, importez les images restantes dans le dossier de ressources d'images que vous avez téléchargé..
Tout comme le UINavigationBar que nous avons modifié il y a une minute, nous devons faire deux choses pour que notre UISegmentedControl soit modifié..
Je n'ai pas assez de temps ici pour décomposer chacune de ces actions étape par étape, mais je vais en aborder quelques-unes des principales dans une minute. Pour l'instant, ajoutez le code suivant à votre méthode "setupUI":
UIImage * segmentSelected = [[UIImage imageNamed: @ "segcontrol_sel.png"] resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)]; UIImage * segmentUnselected = [[UIImage imageNamed: @ "segcontrol_uns.png"] resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)]; UIImage * segmentSelectedUnselected = [UIImage imageNamed: @ "segcontrol_sel-uns.png"]; UIImage * segUnselectedSelected = [UIImage imageNamed: @ "segcontrol_uns-sel.png"]; UIImage * segmentUnselectedUnselected = [UIImage imageNamed: @ "segcontrol_uns-uns.png"];
Cela crée nos UIImages et effectue le redimensionnement approprié. Vous remarquerez ce petit peu:
resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)
Cela nous permet essentiellement de "rogner" notre fichier image en le découpant par certaines marges. Dans ce cas, nous laissons le haut tel quel, en déplaçant 15 points du côté gauche, en laissant le bas tel quel, et en plaçant 15 points du côté droit. Cela nous laisse avec la section du milieu qui s’étendra jusqu’à la largeur nécessaire, mais les extrémités arrondies resteront identiques.
Pour plus d'informations sur "resizableImageWithCapInsets:", consultez la documentation officielle Apple..
Avec nos images dimensionnées et prêtes, nous pouvons définir les différents états de notre UISegmentedControl. Chacune des cinq images que nous venons d'ajouter aura un état correspondant:
[[UISegmentedControl Apparence] setBackgroundImage: segmentUnselected forState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl Apparence] setBackgroundImage: segmentSélectionné pourEtat: UIControlStateSélection de la barreMetrics: UIBarMetricsDefault]; [[UISegmentedControl Apparence] setDividerImage: segmentUnselectedUnselected forLeftSegmentState: UIControlStateNormal rightSegmentState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl Apparence] setDividerImage: segmentSelectedUnselected forLeftSegmentState: UIControlStateSelected RightSegmentState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl Apparence] setDividerImage: segUnselectedSelected forLeftSegmentState: UIControlStateNormal rightSegmentState: UIControlStateSelected barMetrics: UIBarMetricsDefault];
Contrairement à un simple bouton UIB, sélectionné ou non, notre UISegmentedControl peut également vérifier l'état de chaque côté du segment en cours, mais ce n'est pas trop complexe une fois que nous avons compris le principe..
Grâce aux nouvelles fonctionnalités d'iOS 5 et au travail créatif avec Quartz, nous pouvons rapidement et facilement donner à nos applications l'apparence souhaitée. La personnalisation de l'interface utilisateur présente certains défis:
Il peut être relativement facile de trouver de bons graphiques, et il y a beaucoup de bons concepteurs prêts à vous aider. Il peut être parfois plus difficile de rester concentré sur le "pourquoi" et pas seulement sur le "comment" de la personnalisation de l'interface utilisateur. Pour citer le Dr Ian Malcolm fictif dans parc jurassique:
[Ils] étaient tellement préoccupés de savoir s’ils pouvaient le faire qu’ils ne se sont pas arrêtés pour penser s’ils devaient.
Comme toujours, sortez, essayez de nouvelles choses, modifiez les paramètres et explorez les nombreuses autres façons de personnaliser vos interfaces iOS.!
Accentsconagua