›

UIView personnalisée pour un UITableViewCell

xylowebxyloweb Membre
dans API UIKit #1
Bonjour à  tous,



Voilà  je vous soumets une question qui me taraude...



Je voudrais personnaliser avec une forme particulière ( un carré avec bord arrondi + triangle pointant à  droite sur bord droit du carré) un UIView présent dans un UITableViewCell.

Sachant que le contenu de cette forme doit prendre des couleurs différentes et l'intérieur du carré va contenir un chiffre de 1 à  99 (pour simplifier)



Ma question est la suivante :



Quelle est la meilleur façon de réaliser cet objet ?



- via CALayer,

- via UIImageView + UITextView ( l'image serait construite sous Illustrator) avec possibilité de modifier la couleur de l'image ?!

- via [font=Courier, Consolas, monospace]CGContextRef[/font]

- un peu des 3 ?



Je voudrais simplement prendre la bonne voie...



Merci d'avance pour votre aide.
Mots clés:

Réponses

  • Alf1996Alf1996 Membre
    #2
    Perso, je créerais une classe qui dessine ta forme particulière dans le drawRect (via CGContextRef), et avec des propriétés color (de type UIColor), et text (NSString). Mais je ne suis pas sure que ce soit la façon la plus simple de procéder... Je ne connais pas suffisamment CALayer pour te dire si c'est mieux ou moins bien.
  • KubernanKubernan Membre
    #3
    'Alf1996' a écrit:


    Perso, je créerais une classe qui dessine ta forme particulière dans le drawRect (via CGContextRef), et avec des propriétés color (de type UIColor), et text (NSString). Mais je ne suis pas sure que ce soit la façon la plus simple de procéder... Je ne connais pas suffisamment CALayer pour te dire si c'est mieux ou moins bien.




    En fait, l'implémentation du drawRect: peut être pénalisant (surtout dans une table view). Dans certains cas il est plus performant de faire appel directement aux propriétés CALayer plutôt que d'intervenir dans le drawRect: (par exemple pour choisir la couleur du background).



    Ce qu'il faut prendre en compte - je pense - c'est la performance globale obtenue dans la table view. Pour réaliser ce que xyloweb souhaite faire, j'ai utilisé une sous classe de UIView avec, dans l'implémentation du drawRect: des UIBezierPath. Quelques lignes de code à  peine qui ne pénalise pas le scroll de ma table view (60 fps).



    UIImageView peut être aussi une bonne option étant donné que cette classe est optimisée pour l'affichage. Pas testé ça.
  • xylowebxyloweb Membre
    janvier 2013 modifié #4
    ben CALayer me tenterait bien quand même avec CATextLayer en complément via un drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx



    en fait si on peut modifier la couleur d'un bitmap affiché par un UIImageView ça serait une piste intéressante également...



    #kuberman : l'utilisation de UIBezierPath est sans doute une solution à  tester également
  • AliGatorAliGator Membre, Modérateur
    #5
    Le mieux à  mon avis :



    - Un UIBezierPath pour faire ton tracé (ta bulle aux bords arrondis avec la pointe en triangle)

    - Un CAShapeLayer utilisant ce UIBezierPath pour faire le rendu de ce UIBezierPath à  l'écran. Tu peux alors choisir la couleur de contour, de fond, etc par code

    - Soit un UILabel par dessus le tout, soit un CATextLayer en sublayer pour le texte (attention, CATextLayer ne fait pas d'antialiasing il me semble, voir les détails dans la doc sur ce point)



    Au passage, PaintCode qui peut te permettre de générer ce type de code facilement. Perso je ne l'ai jamais essayé, mais plusieurs en ont déjà  parlé sur le forum, et entre autres, ils ont un tuto vidéo ici qui montre précisément comment faire la forme que tu veux faire (c'est pour ça que je m'en souviens et que je le cite) et montre donc comment donc PaintCode peut te générer automatiquement le code pour créer ce BezierPath... si ça t'intéresse de tester...
  • xylowebxyloweb Membre
    #6
    Merci Ali pour tes conseils avisés.

    Effectivement, je sentais bien qu'une des solutions élégante passait par CALayer... et ses acolytes.



    Je ne connais pas PaintCode et je vais tester, ça peut m'éviter de trop me torturer la cervelle pour construire ma courbe de Bézier image/thumbsup.gif' class='bbc_emoticon' alt='' />
  • xylowebxyloweb Membre
    #7
    Bon j'ai craqué pour PaintCode.



    Effectivement, ce logiciel répond parfaitement à  ma demande et en plus il est plus tôt bien écrit.

    Un régale, je vais pouvoir personnaliser assez facilement mes GUI ;-)



    Merci encore Ali.
Connectez-vous ou Inscrivez-vous pour répondre.