Pré-requis pour ce tutoriel

  • XCode, Interface Builder et le SDK iPhone
  • Des connaissances minimales dans l’utilisation d’XCode et d’Interface Builder
  • Pas besoin de licence de dev, le simulateur nous suffira

Introduction

Développer une application iPhone ce n’est pas seulement « développer« , c’est aussi réfléchir à une interface, penser à l’expérience utilisateur et la rendre la plus riche possible, cela prends du temps et demande un investissement, mais celui-ci sera forcément payant !

Le graphisme de l’application est ce qui fait vendre le plus, parfois même devant ses fonctionnalités, comme le dit d’ailleurs si bien Scott Stevenson dans un récent tweet :

Too many engineers brush off design when considering the success of a product. To the user, the design _is_ the product.

Alors voilà, le design de votre application est soigné au maximum, mais vous avez devant vous pléthore de boutons arrondis, de dégradés et autres fantaisies de graphistes :) Et vous sentez la difficulté de la découpe Photoshop qui s’annonce…

Heureusement pour nous, la propriété contentStretch permet de bénéficier d’un arrière plan étirable selon des contraintes. Applicable sur bon nombre de composants graphiques et qui nous interessera particulièrement sur les UIView ou UIImageView. Peu documentée ou relayée sur des blogs, elle est très souvent utilisée pour étirer des images ayant des coins arrondis ou bien des dégradés.

A la bonne heure ! C’est exactement ce qu’il nous fallait :D

Exemple et mise en oeuvre

Le principe est assez difficile à appréhender car les calculs se font en ratio et non en nombre de pixel ; à l’aide d’un couple de valeurs comprises entre 0 et 1, le développeur va définir le point à partir duquel l’image sera extensible et la largeur (ou hauteur) de cette zone extensible. Ce fonctionnement est bien entendu applicable en horizontal et en vertical.

Pour mieux comprendre passons à un exemple, et pour faire simple je vais prendre une image de 100×100 pixels comme celle-ci :

Sur l’image précédente je vais étirer la zone comprise entre le 40ème et le 60ème pixel, c’est-à-dire à partir de 0.4 sur une longueur de 0.2. Avec une image de 100 pixels de large, les calculs sont relativement simples, aussi je vous conseille de découper des images ayant des dimensions multiples de 10. Les zones comprises entre 0 et 0.4 et entre 0.6 et 1.0 seront protégées de l’étirement.

Voici l’intégration de cette image dans Interface Builder en utilisant le contentStretch :

Conclusion

Malheureusement pour nous la propriété contentStretch n’est pas applicable sur le background d’un UIButton, aussi je vous présenterai dans un prochain article l’équivalent de cette technique sur ce composant.

Toutefois, les applications sur les UIImageView sont nombreuses et cette propriété « magique » vous évitera des découpages d’images parfois fastidieuses !

Pour info cette technique existe également sous Android, il s’agit des PNG 9-Patch. J’en conviens la mise en oeuvre est plus simple sous Android, mais là n’est pas le sujet !