Un moyen facile de faire défiler le texte de débordement sur un bouton?

Question

Quelqu'un at-il des exemples ou des ressources où je pourrais trouver des informations sur le défilement de texte trop long à afficher dans un contrôle bouton? Je pense à quelque chose dans ce sens.

• Affichez autant de texte que possible dans le rect actuel avec un '...' à la fin pour indiquer un débordement.
• Faites une pause d'une heure, puis faites défiler lentement le texte vers le bord droit pour afficher la partie droite de la chaîne.
• Afficher autant de texte tiendra dans le rect actuel avec un '...' au début pour indiquer un débordement.
• Recommencez l'opération en sens inverse.

Existe-t-il un moyen facile de faire cela en utilisant le "noyau"? ou intégré dans "animation". cadres sur un certain appareil mobile?

[modifier] Je voulais ajouter plus de détails car je pense que les gens sont plus concentrés sur la question de savoir si ce que j'essaie d'accomplir est approprié. Le bouton est pour les réponses sur un jeu-questionnaire. Il n'effectue aucune fonction spécifique de l'interface utilisateur mais sert à afficher la réponse. Apple le fait lui-même dans son jeu-questionnaire iQuiz sur iPod Nano et je pense que c'est une solution assez élégante pour des réponses plus longues que la largeur de mon bouton.

Dans le cas où c’est le "...", c’est la partie la plus difficile de ce processus. Disons que j'ai supprimé cette exigence. Pourrais-je avoir l’étiquette du bouton en taille réelle mais clipsée sur le bouton droit du client et utiliser certaines méthodes d’animation pour le faire défiler dans le cadre du bouton? Cela me donnerait presque le même effet moins les ellipses.

Answer 1

Voici une idée: au lieu d’ellipses (...), utilisez un dégradé de chaque côté pour que le texte supplémentaire disparaisse dans la couleur de fond. Ensuite, vous pouvez le faire avec trois couches: une pour le texte et deux pour l’effet de fondu.

Les masques de fondu seraient simplement des rectangles avec un dégradé allant de transparent à la couleur d'arrière-plan. Ils doivent être positionnés au-dessus du calque de texte. Le texte serait dessiné sur le calque de texte, puis vous l'animeriez en glissant d'avant en arrière de la manière que vous décrivez. Vous pouvez créer un objet CGPath décrivant le chemin d'accès et l'ajouter à un objet CAKeyframeAnimation que vous ajoutez au calque de texte.

Pour ce qui est de savoir si cela est "facile" Cela dépend de votre connaissance de Core Animation, mais je pense qu'une fois que vous aurez appris l'API, vous constaterez que ce n'est pas si grave et que cela en vaudrait la peine.

Answer 2

Sans vouloir être obtus, vous devriez peut-être repenser votre problème. Un bouton doit avoir une fonction claire et prévisible. Ce n'est pas un endroit pour stocker et afficher du texte. Peut-être pourriez-vous afficher une description à l’écran avec un joli bouton standard ci-dessous?

Answer 3

Mise à jour avec l'exemple de code source:

Voici un exemple de code source prêt à l'emploi (en fait un projet Xcode entièrement zippé avec image et fichiers nib et un peu de code source), pas pour l'iPhone, n'utilisant pas Core Animation, utilisant simplement quelques NSImages et un NSImageView. C'est juste un hack pas cher, il n'implémente pas toutes les fonctionnalités que vous avez demandées (désolé, mais je n'ai pas envie d'écrire votre code source pour vous :-P), une mise en page de code horrible (hé, j'ai juste piraté cela ensemble dans un quelques minutes, donc vous ne pouvez pas vous attendre mieux ;-)) et c'est juste une démonstration de la façon dont cela peut être fait. Cela peut également être fait avec Core Animation, mais cette approche est plus simple. Composer l’animation du bouton dans un NSImageView n’est pas aussi agréable que de sous-classer un NSView et de peindre directement dans son contexte, mais c’est beaucoup plus simple (je voulais juste pirater ensemble la solution la plus simple possible). Il ne reviendra pas non plus en arrière une fois qu'il aura défilé complètement vers la droite. Par conséquent, vous avez simplement besoin d’une autre méthode pour revenir en arrière et démarrer un autre NSTimer qui se déclenche 2 secondes après que vous ayez dessiné les points à gauche.

Ouvrez simplement le projet dans Xcode et cliquez sur Exécuter, c’est tout ce que vous avez à faire. Regardez ensuite le code source. Ce n’est vraiment pas si compliqué (cependant, vous devrez peut-être le reformater d’abord, la mise en page est nul).

Mise à jour à cause du commentaire de ma réponse:

Si vous n'utilisez pas du tout les éléments de l'interface utilisateur Apple, je ne vois pas le problème. Dans ce cas, votre bouton n'est même pas un bouton, il s'agit simplement d'une vue cliquable (NSView si vous utilisez Cocoa). Vous pouvez simplement créer une sous-classe NSView en tant que MyAnswerView et écraser la méthode paint afin de peindre dans la vue comme vous le souhaitez. Texte multiligne, texte défilant, texte 3D animé, tout dépend de votre imagination.

En voici un exemple , montrant comment une personne sous-classée NSView crée un contrôle personnalisé complet qui n'existe pas par défaut. Le contrôle ressemble à ceci:

Voir la chose amusante dans le coin supérieur gauche? C'est un contrôle. Voici comment cela fonctionne:

Je déteste dire cela, car ce n'est pas une réponse à votre question, mais " Ne faites pas ça! ". Apple a des directives pour mettre en place une interface utilisateur. Même si vous êtes libre de les ignorer, les utilisateurs d’Apple ont l'habitude de demander à leurs interfaces utilisateur de respecter ces consignes. Si vous ne les suivez pas, vous créerez des applications qu'ils trouveront laides et peu intéressantes.

Voici les consignes d'interface utilisateur d'Apple

Permettez-moi de citer à partir de là

  

Contenu et étiquetage des boutons poussoirs

     

Un bouton-poussoir contient toujours du texte, il   ne contient pas d'image. Si tu as besoin   pour afficher une icône ou une autre image sur un   bouton, utilisez à la place un bouton de biseau,   décrit dans les "Boutons biseautés". & # 8221;

     

L’étiquette d’un bouton-poussoir doit être un   verbe ou phrase verbale décrivant le   les actions qu'il effectue & # 8212; enregistrer, fermer, imprimer,   Supprimer, changer le mot de passe, etc. Si   un bouton-poussoir agit sur un seul   paramètre, étiquetez le bouton comme suit:   spécifiquement que possible; & # 8220; Choisissez   Image & # 8230;, & # 8221; par exemple, est plus   plus utile que & 8282; Choisissez & # 8230; & # 8221; Parce que les boutons   initier une action immédiate, il   Ne devez pas utiliser & # 8220; maintenant & # 8221;   (Analyser maintenant, par exemple) dans l’étiquette.

     

Les étiquettes des boutons doivent avoir   la capitalisation de type titre, comme   décrit dans & # 8220; Capitalisation du   Etiquettes et texte des éléments d'interface. & # 8221; Si   le bouton-poussoir s'ouvre immédiatement   une autre fenêtre, boîte de dialogue ou application   pour effectuer son action, vous pouvez utiliser un   points de suspension dans l'étiquette. Par exemple,   Les préférences de messagerie affichent un push   bouton comportant des points de suspension   parce qu'il ouvre le système .Mac   préférences, comme illustré à la figure 15-8.

Les boutons doivent contenir un seul verbe ou une phrase du verbe, pas des réponses à un jeu-questionnaire! Si vous avez entre 2 et 5 réponses, vous devez utiliser les boutons radio pour que l'utilisateur sélectionne la réponse et un bouton OK pour que l'utilisateur accepte la réponse. Pour plus de 5 réponses, vous devriez plutôt envisager un sélecteur de fenêtres publicitaires intempestives, conformément aux instructions, bien que ce soit plutôt moche dans ce cas.

Vous pouvez envisager d'utiliser un tableau avec une seule colonne, une ligne par réponse et chaque cellule étant multiligne si la réponse est très longue et doit être rompue. Ainsi, l'utilisateur sélectionne une ligne de tableau en cliquant dessus, ce qui met en surbrillance la cellule de tableau, puis clique sur un bouton OK pour terminer. Vous pouvez également continuer directement dès que l'utilisateur sélectionne une cellule de tableau (mais vous lui donnez ainsi toute chance de corriger un clic accidentel). Par contre, les tableaux contenant des cellules multilignes sont plutôt rares sur MacOS X. L’iPhone en utilise, mais avec très peu de texte (au plus deux lignes).

Answer 4

Vous ne pouvez certainement pas faire cela avec l’API standard, certainement pas avec UILineBreakMode. En outre, le guide de style indique qu'un point de suspension indique que le bouton, lorsqu'il est enfoncé, vous demandera plus d'informations. Par exemple, Ouvrir un fichier ... vous demandera le nom d'un fichier. Votre utilisation proposée des points de suspension viole cette directive.

Vous auriez besoin d'une logique personnalisée pour mettre en œuvre le comportement que vous décrivez, mais je ne pense pas que ce soit la voie à suivre.

Answer 5

Ce n’est pas une très bonne pratique d’interface utilisateur, mais si vous voulez toujours le faire, votre meilleur pari est de le faire via un div cliquable stylé pour ressembler à un bouton.

Définissez la largeur de la div sur une valeur explicite et son dépassement sur masqué, puis utilisez un script s'exécutant sur un intervalle pour ajuster la propriété scrollLeft de cette div.